HTML标签
注释
- vscode快捷键：ctrl+/
- 注释旨在源代码中可见，在浏览器窗口不显示。
<!-- 注释内容 -->
- 用途：
- 在源码中添加描述性提示信息，便于阅读代码
- 对于HTML纠错也大有帮助，可以通过注释某一行HTML代码，一边检索错误位置。
- 暂时注释掉一部分不用的代码，便于后期回复代码。
标题
- 通过<h1>-<h6>六个标签分别来对六个级别的标题进行定义。
- vscode快捷键：快捷键h$*6
- 标题标签是容器级标签、双标签，可以在内部放置其他文本标签或容器标签作为元素。
- 作用：给标签内部的元素添加对应级别标题的语义。
- 标题标签不能互相嵌套。
- 标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>最重要按顺序次之。<h1>标签内部一般放置最重要的内容如logo。<h1>内部的文字会提高搜索引擎排名，但多个<h1>标签同时在页面上出现会降低权重。
约定俗称:一个页面中只出现一个<h1>
段落和换行
- <p>标签定义段落，是一个双标签、文本级标签，内部只能放文本，图片，表单元素，或者废弃的<font>标签等。
- <p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。
- <br />标签是html中的简单的换行符，单标签。
- <br />标签没有建立新的段落语义，只是简单的进行强制换行。
文本格式化
-
文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
图像
-
<img>标签定义图像，单标签，本身是一个特殊文本。
-
<img>标签的作用是在指定位置插入一张图片。
-
在html文件，常用的插入图片的类型又：jpg、png、gif。
-
<img>标签常用属性：
- src属性:全称source资源，属性值是图片查找的路径。
- html中对路径有特殊的书写语法。路径分为相对路径和绝对路径，不同方式出发点和参考点位置不同。
- 相对路径:从html文件本身出发，根据相对的位置进行查找
- 同级查找:文件名+后缀 test001.jpg
- 子级查找:image/test001.jpg
- 上级查找:…/images/test001.jpg …/表示跳出一级
- 绝对路径:从电脑的盘符出发进行查找，或者使用网址形式查找。
- width属性:图片的宽度。属性值以px为单位。
- height属性:图片的高度。属性值以px为单位。
- border属性:设置图片的边框。
- title属性:设置鼠标悬停的提示文本。
- alt属性:设置图片查找错误时，出现的替换文本。
- src属性:全称source资源，属性值是图片查找的路径。
音频视频
- 音频
- 音频使用<audio>标签进行定义，双标签，使用src属性设置音频查找路径。
- 音频文件支持格式包括：.mps、.ogg、.wav。
- 音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也试controls。
- 视频
- 视频使用<video>标签定义，双标签，使用src属性设置视频查找路径。
- 视频文件支持.mp4、.ogg、.webm格式。
- 视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也试controls。
超级链接
- html使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，一幅图像，可以点击内容跳转到新的文档或当前文档中的某个部分。
- <a>标签定义超级链接，全称anchor，锚的意思。双标签。
- <a>标签的作用时在指定位置添加超链接，提供用户进行点击和跳转。可以实现跨页面跳转和页面内跳转。
- <a>标签属性：
- href属性:全称hypertext reference,超文本引用，用于规定链接的目标地址。可以是相对路径也可以是绝对路径，实现跳转必须设置该属性。
- target属性:定义呗链接文档在何处跳转显示。属性值有两种_self:默认当前窗口跳转，_blank:新空白窗口跳转。
- title属性:设置鼠标悬停时的提示文本。
锚点跳转
-
页面内锚点跳转
- 分两步
- 1.设置锚点:指设置目标位置
- 1.1在目标位置的标签添加id，id的属性值唯一。id属性值定义规则：以字母开头，后面可以有字母、数字、下划线、横线且区分大小写。
- 1.2在目标位置添加空标签<a>只设置一个name属性，name唯一。
- 2.添加链接：链接到锚点，在需点击位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。
- 1.设置锚点:指设置目标位置
<a href="#goToThere">页面内</a> <a name="goToThere"></a> - 分两步
-
跨页面锚点跳转
- 分两步
- 1.设置锚点:指设置目标位置
- 1.1在目标位置的标签添加id，id的属性值唯一。id属性值定义规则：以字母开头，后面可以有字母、数字、下划线、横线且区分大小写。
- 1.2在目标位置添加空标签<a>只设置一个name属性，name唯一。
- 2.添加链接：链接到锚点，在需点击位置设置<a>标签，给a的href属性设置属性值为跳转页面的路径+#id属性值或者#加a的name属性值。
- 1.设置锚点:指设置目标位置
<a href="15_audio_video.html#goThere">跨页面</a> - 分两步
列表
- 无序列表
- 需要两个标签参与<ul>和<li>，都是容器标签。
- <ul>:unordered list,表示定义一个无序列表的大结构。
- <li>:list item,列表项，定义的是无序列表内的没一项。
- <ul>与<li>是嵌套关系，快捷键:ul>li。
- <ul>内部只能嵌套<li>,<li>标签不能脱离<ul>。
- <li>标签是容器及标签，内部可以放置任意内容。
- 无序列表的列表项<li>之间没有顺序先后之分，重要程度相同。
- 有序列表
- 需要两个标签参与<ol>和<li>，都是容器标签。
- ol:ordered lidt,表示定义一个有序列表的大结构。
- li:list item,定义的是有序列表的每一项。
- <ol>和<li>是嵌套关系，快捷键ol>li。
- <ol>内部只能嵌套<li>,<li>标签不能脱离<ol>。
- <li>标签是容器及标签，内部可以放置任意内容。
- 有序列表的<li>之间存在顺序的先后之分。
- 有序列表只是搭建了有序列表结构，前面的数字样式不是<ol>标签作用，是由css负责的。
- 定义列表
- 定义列表:定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 由三个标签组成包含<dl>,<dt>,<dd>都是容器级标签
- dl:definition list,表示定义一个自定义列表的大结构。
- dt:definition term,表示定义自定义列表中的一个主题或者术语。
- dd:definition description,定义解释项，表示描述或解释前面的定义主题。
- <dl>内部只能嵌套<dt>和<dd>,<dt>与<dd>是同级关系。
- <dl>内部可以有多组<dt>和<dd>,每个<dd>解释距离最近的前面的<dt>
- <dt>后面可以有0个到多个解释项<dd>
- 最好每个dl中织田家一组dt和dd便于管理。
布局标签
- <div>和<span>标签常用作布局工具，我们俗称盒子，没有具体明确的语义。双标签，容器级标签。
- div:全称divsion,分割、区域、快读的意思。俗称大盒子。
- 作用:多用于划分网页区域，进行结构布局。一般将相关的内容使用<div>包裹起来，整体设置大的布局效果。
- span:小区域，小跨度的意思。俗称小盒子。
- 作用:在不改变整体效果的情况下，可以辅助进行局部调整。
表格
-
表格至少由三个标签组成，分别是<table>、<tr>、<td>标签。
-
table:表格，定义的是整个的表格大结构。
-
tr:table rows,表格的行，定义的是表格由多少行组成。
-
td:table data,表格的数据，也称表格的单元格，定义每一行内部的单元格。
-
table标签属性:
- border属性:边框，属性值是数字，表示像素值。
-
<th>标签绘制表头，table head data，表头单元格。自带默认的css样式:文字粗体居中。在表格中绘制的时候，替换的是<td>的位置。
-
表格单元格进行合并，通过<th>和<td>标签属性可以进行合并。
- rowspan:跨行合并。上下合并。
- colspan:跨列合并。左右合并。
- 属性值是数字表示合并几格。
-
表格分为四个区域：标题、头部、主体、页脚。
- <table>内部最直接的子级包含四个分区标签，双标签。
- caption:表格的标题，内部书写标题文字。
- thead:table head,表格的头部。内部嵌套tr、th
- tbody:table body,表格的主体。内部嵌套tr、td
- tfoot:table foot,表格的也叫。内部嵌套tr、td
- 可选择性组合，浏览器加载一定按照标题->头部->主体->页脚
表单
-
表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件。
-
html中一个完整的表单由表单域、提示信息和表单控件(也称表单元素)3个部分构成。
-
表单域:相当于一个容器，用来收纳所有的表单控件和提示信息。可以通过他定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。不定义表单域，表单中的数据无法传送到后台服务器。
-
<form>标签定义表单域，功能性标签，双标签，容器级标签。提交到服务器的表单信息必须放在<form>标签内。
- action属性:属性值url，指定接受并处理表单数据的服务器程序的url地址
- method属性:属性值get/post，用于设置表单提交方式
- name属性:属性值自定义名称，规定表单名称。
-
<input>标签为单标签，本身相当于一个特殊文本
- type属性:
- 当属性值为text时为用户提供单行文本输入框，不能输入多行文字。
- 当属性值为password时提供一个有掩码处理的密码框。
- 当属性值为radio时提供一个单选框,用name进行分组。
- 当属性值为checkbox时提供一个复选框,用name进行分组。
- 当属性值为button时提供一个普通按钮。
- 当属性值为reset时提供一个重置按钮，将表单内容清空恢复默认。
- 当属性值为submit时提供一个提交按钮，将数据提交到指定服务器，并重置表单内容。
- 当属性值为image时提供一个默认与提交按钮效果相同的按钮。
- 当属性值为file时提供一个文件上传按钮，可以提供用户选择本地文件进行上传服务器。
- value属性:定义默认文字
- checked属性:设置默认选项(单选，多选)
- multiple属性:属性值multiple，在file按钮中使用使可上传多个文件。
- type属性:
-
<textarea>标签定义文本域，可以输入多行文本，双标签，相当于一个特殊的文字。
- rows属性:行，属性值是数字，表示文本框显示最大行数，如果超过了行数，会被隐藏并出现滚动条。
- cols属性:列，属性值是数字，每一行显示的最大字节数(一个汉字按2字节计算)。
-
下拉菜单需要至少两个标签完成结构：都是双标签，文本级标签
- <select>:选择，表示定义下拉菜单整体结构。
- <option>:选项，表示定义下拉菜单的每一项。
- 关系：select>option,option可以有任意多个。
- selected属性:属性值selected，将某个option项设置为默认选项
- <optgroup>标签对<option>进行分组，双标签，将一组的option嵌套在内部
- label属性:给<optgroup>标签添加一个分组名
<p> 城市： <select name="" id=""> <optgroup label="国内"> <option value="">北京</option> <option value="shanghai" selected="selected">上海</option> <option value="">广州</option> </optgroup> <optgroup label="国外"> <option value="">俄罗斯</option> <option value="shanghai">美国</option> <option value="">韩国</option> </optgroup> </select> </p> -
表单元素通过绑定其他内容来扩大触发点击范围，使用<lable>标签实现。
- <label>标签作用是帮表单元素定义标记，如果将表单控件与提示内容使用<lable>进行绑定后，当用户鼠标点击<label>内提示内容时，浏览器就会自动将焦点转移到相应控件。
- 绑定方法：
- 1.给表单元素设置id属性，将需要绑定的其他内容用<label>标签包裹，给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。
- 2.直接包裹所需被绑定的内容。
<p> 性别: <!-- 绑定方法一 --> <input type="radio" name="sex" checked="checked" id="nan"> <label for="nan">男</label> <input type="radio" name="sex" id="nv"> <label for="nv">女</label> </p> <p> 爱好: <!-- 绑定方法二 --> <label><input type="checkbox" name="hobby">篮球</label> <input type="checkbox" name="hobby">绘画 <input type="checkbox" name="hobby">音乐 </p>
字符实体
- 概念：在普通文字书写时，有一些特殊符号不能直接书写(例如连续的空格)，或者符号具有特殊功能(例如<>符号)。可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。
- www.w3school.com 查询相关规则。
4630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
