- 搜索
德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流（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选择器、类选择器、通配符选择器
高级选择器：后代选择器、交集选择器、并集选择器
