德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流(https://www.wxclwl.com)
日期:2023/07/19 17:22作者:翁惠珠人气:
同步本人CSDN :
课程学习一段时间了,之前也在各种网站上自学过,感觉都不太全面,学的也不扎实,便想系统的学习一下,从基础到深入,但是不知道改如何下手,选择了拉钩大前端课程后,感觉找到了方向,不多说了,开始学习吧
HTML定义了网页的结构和内容。浏览器访问网站,其实就是从服务器下载 HTML 代码。HTML 的全名是“超文本标记语言”(HyperText Markup Language),上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李(Tim Berners-Lee)发明。浏览器的网页开发,涉及三种技术:HTML、CSS 和 javascript。HTML 语言定义网页的结构和内容,CSS 样式表定义网页的样式,JavaScript 语言定义网页与用户的互动行为。HTML 语言是网页开发的基础,CSS 和 JavaScript 都是基于 HTML 才能生效,即使没有这两者,HTML 本身也能使用,可以完成基本的内容展示。
HTML 结构层CSS 样式层JavaScript 行为层浏览器向服务器发送http请求后,服务器返回相应,过程大致为下:
发送http协议(地址栏输入/超链接 request)接受服务器返回的http响应 (response)解析与渲染浏览器解析与渲染网页 的时候,会把服务器响应(html)解析成一个标签树,每个标签都是树的一个节点(node)。这种节点就称为网页元素(element)。所以,“标签”和“元素”基本上是同义词,只是使用的场合不一样:标签(tag)是从源码角度来看,元素是从编程角度来看,比如
标签对应网页的p元素。在HTML语言中标签分为两种:
容器及 可以存放任意内容文本级 只可以存放文本或者图片定义标签额外的信息,属性均为键值对形式的(key, value),使用空格与其他属性和标签名分割,比如:
html5的基本骨架
表示文档类型,告诉浏览器如何解析网页。经过HTML的几个版本迭代,现在声明已经简单多了,一般来说,简单声明DOCTYPE 为html即可。浏览器就会按照 HTML 5 的规则处理网页。
顶层容器,即顶层节点、跟元素,一个网页只有一个<html>标签,标签中的lang属性,定义了网页默认内容的语言。
<head>存放元数据、设置标题等,是一个容器级标签
<head>存放的内容,常用的大致如下
title 设置网页的标题link 链接外部资源meta 设置网页的元数据style 为网页设置CSS样式script 引入js或者在源文件只直接嵌入jsnoscript: 浏览器不支持脚本时候,所要显示的内容base 设置网页内部相对URL的计算基准容器级标签,用于放置网页的主要内容。
HTML中有三种列表的书写方式 有序列表、无序列表、定义列表。
ol 标签用来定义有序列表,ol标签是一个有序列表容器(ordered list),每个列表项前面都有编号(li 标签用来定义列表项),呈现出顺序,大概样子如下: 1. 有序 2. 无序 3. 定义
可以指定start属性与type属性,start用来定义开始编号,type用来定义编号的样式。
ul 标签用来定义无序列表,ul标签同样也是一个有序列表容器(unordered list),大概样子如下:
有序无序定义dl (description list)标签用来定义一组列表,dl为容器级标签,dl中的dt 常用来顶一个标题,dd定义内容:
table 是一个容器级标签,表格的内容都放在这个标签里面,table中的caption子元素用来定义表格的标题,table中的子元素thead、tbody、tfoot分表代表表头、表体、表尾。tr标签表示定义一行,如果表格有thead、tbody、tfoot,那么tr就放在这些容器元素之中,否则直接放在table的下一级。th和td都用来定义表格的单元格。th是标题单元格,td是数据单元格。
表格中单元格会有跨行或跨列的情况,通过colspan属性和rowspan属性设置,colspan表示单元格跨越的列数,rowspan表示单元格跨越的行数。列子如下:
作用: 向服务器发送数据,负责前端数据采集
组成:
表单标签(包含action,method等属性) 表单域 (文本框、密码框、复选框等) 表单按钮 (submit、reset等)功能: 采集用户数据
表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。
action: 服务器接收数据的 URL。
method: 提交数据的 HTTP 方法,可能的值有post,get。
name: 表单的名称,应该在网页中是唯一的。
target: 在哪个窗口展示服务器返回的数据。
novalidate: 布尔属性,表单提交时是否取消验证。
enctype: 当method属性等于post时,该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded(默认值),multipart/form-data(文件上传的情况),text/plain。
label 为控件提供文字说明,帮助用户理解控件的目的。两中方式,如下:
input 来接收用户的输入。它是一个单独使用的标签,没有结束标志。它有多种类型,取决于type属性的值,默认值是text,表示一个输入框。type属性决定了的形式。该属性可以取以下值。
type="text" 普通的文本输入框type="button" 按钮type="submit" 提交按钮type="reset" 重置按钮type="checkbox" 复选框type="radio" 单选框type="email" 电子邮箱type="password" 密码输入框type="file"文件选择框....button标签会生成一个可以点击的按钮,select标签用于生成一个下拉菜单,textarea是一个块级元素,用来生成多行的文本框
上图来自拉钩大前端课程中的截图
基本选择器:标签选择器、ID选择器、类选择器、通配符选择器
高级选择器:后代选择器、交集选择器、并集选择器