本文介绍了HTML的基础知识，包括Web标准的重要性，HTML的结构和基本标签的使用，如标题、段落、超链接、表格和表单等。此外，还探讨了GET和POST请求的区别以及语义化标签的应用。
Web标准
- 结构标准:对网页元素进行整理和分类(HTML)
- 表现标准:设置网页元素的版式、颜色、大小等外观属性(CSS)
- 行为标准:对网页模型的定义及交互的编写(JavaScript)
Web标准的优点
- 易于维护：只需更改CSS文件，就可以改变整站的样式
页面响应快：HTML文档体积变小，响应时间短 - 可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
- 设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
- 搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名
HTML初识
「HTML」(Hyper Text Markup Language):超文本标记语言
- 它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）
「HTML骨架格式」
<!-- 页面中最大的标签 根标签 -->
<html>
<!-- 头部标签 必须要设置的标签是title-->
<head>
<!-- 标题标签 网页标题-->
<title>第一个页面</title>
</head>
<!-- 文档的主体 页面内容-->
<body>
</body>
</html>
工具VSCode
- Ctrl+N 新建
- Ctrl+S 先保存为 .html文件
- shift+！自动生成骨架
- 右键 open in default browser
- Ctrl+ 放大代码字体
文档类型声明标签
- 告诉浏览器按照HTML5标准解析页面
- 位于文档中最前面的位置，处于html标签之前
页面语言lang
<html lang="en">
- en 定义语言为英语
- zh-CN定义语言为中文
- 但对于文档显示来说，en可以显示中文，zh-CN也可以显示英文
字符集
(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
- 必须写，否则乱码
<!--UTF-8万国码 -->
<meta charset="UTF-8" />
常用标签
文档网址
- W3C：http://www.w3cschool.com.cn/
- MDN:https://developer.mozilla.org/zh-CN/
1. 标题标签
<!--head的缩写 h1-h6>
<h1>我是一级标题</h1>
- 文字会变粗，字号依次变小，重要性依次减弱
- 一个标题独占一行
2. 段落标签和换行标签
<p>我是一个段落</p>
- 文本在一个段落中会根据浏览器窗口大小自动换行
- 段落之间保有空隙
<!--强制换行-->
<br/>
- 单标签
- 换行后无空隙
3. 文本格式化标签
- b和strong 文字以粗体显示
- i和em 文字以斜体显示
- s和del 文字以加
删除线显示 - u和ins 文字以加++下划线++显示
推荐后者，语义更强烈
4. div和span用于布局
- div 大盒子，一个div独占一行
- span 小盒子，一行有可以多个span
5. 图像标签
<!-- src必需属性>
<img src="图像URL" />
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本 图片不能显示时的文字 |
| title | 文本 | 提示文本 鼠标悬停显示的文字 |
| width | 像素 | 宽度 |
| height | 像素 | 高度 |
| border | 像素 | 边框粗细（一般在CSS中修改） |
- 宽高只修改一个，另一个自动等比缩放
- 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 采取 键值对 的格式 key=“value” 的格式
6. 超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值当前窗口打开，_blank为在新窗口中打开方式 |
外部链接
<!--必需格式http://+网址-->
<a href="http://www.qq.com" target="_self">腾讯</a>
内部链接
<a href="xxx.html" target="_blank">内部链接</a>
空链接
<a href="#" target="_blank">空链接</a>
下载链接
<a href="xxx.zip">下载链接（文件或压缩包）</a>
锚点链接（定位到该页面某个位置）
- 使用相应的id名标注跳转目标的位置。 (目标)
<h3 id="two">第2集巴拉巴拉巴拉</h3>
- 创建链接文本（被点击的）
<a href="#two">第2集</a>
- 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
7. 注释标签
快捷键 ctrl + /
特殊字符
重要三个：空格 < < > >
8. 表格标签
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
table、tr、td，他们是创建表格的基本标签，缺一不可,嵌套关系
- table用于定义一个表格标签。
- tr用于定义表格中的行，必须嵌套在 table标签中。
- td用于定义表格中的单元格，必须嵌套在标签中。
- 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。
表头单元格
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
表格划分结构
1.<thead></thead>：用于定义表格的头部。用来放标题之类的东西。一般位于第一行<thead> 内部必须拥有<tr> 标签！
2. <tbody></tbody>：用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>:放表格的脚注之类。
4. 以上标签都是放到table标签中
合并单元格
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
在目标单元格上写合并代码 - 跨行：最上侧单元格为目标单元格
- 跨列；最左侧单元格为目标单元格
最后删除多余的单元格
9. 列表标签
- 无序列表(使用最多)
1.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
3.样式在CSS中设置
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
- 有序列表
1.<ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
常用的type属性值分别为是1，a，A，i，I
2.<ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
3.<ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。
<ol type="A">
<li>列表项1</li>
<li>列表二</li>
<li>列表三</li>
</ol>
- 自定义列表
常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
10. 表单标签
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址(用于指定接收并处理表单数据的服务器程序的url地址)，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
1.input输入表单元素
<input type="属性值" value="你好">
- input 输入的意思
<input />标签为单标签- type属性设置不同的属性值用来指定不同的控件类型
用户名: <input type="text" />
密 码：<input type="password" />
- 除了type属性还有别的属性
value属性
默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置
用户名:<input type="text" name="username" value="请输入用户名">
name属性
表单的名字，这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单
单选按钮和复选框要有相同的name值
checked属性<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
表示默认选中状态。
较常见于单选按钮和复选按钮。性 别: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女
label标签
- label 标签为 input 元素定义标注（标签）。
- label标签用于绑定一个表单元素, 当点击label标签内的文本时,浏览器会自动将焦点（光标）转到或者选择对应的 表单元素上。主要目的是为了提高用户体验。为用户提高最优秀的服务。
第一种
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
第二种
id和for建立连接，标签for属性与相关元素的id属性相同即可
<input type="radio" name="sex" id="man">
<label for="man">男</label>
2.select下拉表单元素
- 有多个选项让用户选择，为了节约空间
- 在option 中定义selected =" selected "时，当前项即为默认选中项。
- 至少包含一对option
- 实际开发会用的比较少
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
3.textarea文本域表单元素
<textarea >
文本内容
</textarea>
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用
扩展
GET 和 POST 的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
语义化标签
- header — 头部标签
- nav — 导航标签
- article — 内容标签
- section — 块级标签
- aside — 侧边栏标签
- footer — 尾部标签
扫一扫
3585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
