🔎注释标签
<!----> 这是一个注释标签 快捷键 ctrl + /
需要在<>中填写注释的内容
例如<!--这是一个注释-->
🔎标题标签
标题标签共6个, 从h1 ~ h6, 数字越大, 字体越小 <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>
🔎段落标签
<p></p>这是一个段落标签
需要在<>与<>之间填写内容
例如<p>段落</p>
🔎换行标签
<br> 这是一个换行标签 换行标签是单标签(不是成对出现), 最好写成<br/>
🔎格式化标签
| 格式 | 标签 | 具体化 |
| 加粗 | strong 标签 或 b 标签 | <strong></strong> 或 <b></b> |
| 倾斜 | em 标签 或 i 标签 | <em></em> 或 <i></i> |
| 删除线 | del 标签 或 s 标签 | <del></del> 或 <s></s> |
| 下划线 | ins 标签 或 u 标签 | <ins></ins> 或 <u></u> |
需要在<>与<>之间填写内容
🔎图片标签
| 标签 | 含义 |
| img | 图片标签, 需要搭配其他标签一起使用 |
| src | 表示图片的位置 |
| alt | 替换文本, 当图片不能正确显示的时候, 会显示一个替换的文字 |
| title | 提示文本, 鼠标放到图片上, 会有提示 |
| width / height | 控制图片的宽度 / 高度(宽度 / 高度一般只需要更改一个即可, 另一个会等比例缩放) |
| border | 为图片设置边框 |
图片表示的位置可以用相对路径表示, 也可以用绝对路径表示
🔎超链接标签
| 标签 | 含义 |
| a | 超链接标签, 需要搭配其他标签一起使用 |
| href | 必须填写, 表示点击后跳转到填写的地址 |
| target | 打开方式(默认是_self, 如果是_blank 则用新的标签页打开) |
链接的几种形式
- 外部链接
引用其他网站的地址链接<a href="https://www.csdn.net/" >其他网站地址的链接</a> - 内部链接
网站内部页面之间的链接<a href="./demo1.html">页面之间的链接</a> - 空链接
使用 # 在href 中占位<a href="#">空链接</a> - 下载链接
href 对应的路径是文件<a href="./cat.zip">下载链接</a> - 网页元素链接
可以给图片等元素添加链接<a href="https://www.baidu.com"> <img src="./cat.png" > </a> - 锚点链接
<a href="#sogo">锚点链接</a> <img src="./Sogo_logo.png" id="sogo">
🔎表格标签
| 标签 | 含义 |
| table | 表格标签, 需要搭配其他标签一起使用 |
| thead | 表格的头部 |
| tbody | 表格的主体 |
| tr | 表示表格的行 |
| td | 表示一个单元格(表格的列) |
| th | 表示表头单元格, 居中加粗的格式(表格的列) |
示例代码
<table border="1" width="500" height="500"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> </tr> <tr> <td>李四</td> <td>20</td> </tr> </tbody> </table>
有多少组
<tr></tr>标签就代表了多少行(上述代码共3组<tr></tr>标签, 共3行)
<th></th>或<td></td>代表一行中有多少个单元格(有多少列)
<th></th>表示居中加粗的格式,<td></td>表示普通的格式
效果展示
合并单元格
(1)跨行合并
rowspan="n", n 表示合并的行数
(2)跨列合并
colspan="n", n 表示合并的列数
(1)跨行合并
示例代码
<table border="1" width="500" height="500"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td rowspan="2">张三</td> <td>18</td> </tr> <tr> <!-- <td>李四</td> --> <td>20</td> </tr> </tbody>
注意, 跨行合并需要将被合并的行的内容清空
这里是将张三的姓名进行合并, 将李四的姓名清空
效果展示
(2)跨列合并
示例代码
<table border="1" width="500" height="500"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td colspan="2">张三—18</td> <!-- <td>18</td> --> </tr> <tr> <td>李四</td> <td>20</td> </tr> </tbody> </table>
注意, 跨列合并需要将被合并的列的内容清空
这里是将张三的姓名与年龄进行合并, 将张三的年龄进行清空
效果展示
🔎列表标签
| 标签 | 含义 |
| ul | 无序列表标签, 需搭配其他标签一起使用 |
| ol | 有序列表标签, 需搭配其他标签一起使用 |
| li | 无序, 有序列表标签搭配使用的标签, 承载无序, 有序列表中的内容 |
| dl | 自定义列表标签 |
| dt | 自定义列表的小标题 |
| dd | 承载自定义列表中的内容 |
无序列表
示例代码
<ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul>
效果展示
有序列表
示例代码
<ol> <li>张三</li> <li>李四</li> <li>王五</li> </ol>
效果展示
自定义列表
示例代码
<dl> <dt>姓名</dt> <dd>张三</dd> <dd>李四</dd> <dd>王五</dd> </dl>
效果展示
🔎表单标签
表单标签包括
- 表单域(包含表单元素的区域, 重点是 form 标签)
- 表单控件(输入框, 提交按钮等, 重点是 Input 标签)
form标签
<form action="" method=""> <!--form的内容--> </form>
描述了要把数据按照什么方式, 提交到哪个页面中
input标签
input 标签通常需要搭配其他标签一同使用, 包括
| 标签 | 含义 |
| type | 种类(包括 button, checkbox, text, file, image, password, radio…) |
| name | 给 input 取名字, 尤其是对于 radio(单选按钮), 具有相同的 name 才能多选一 |
| value | input 中的默认值 |
| checked | 默认被选中的状态, 用于 radio(单选按钮) 与多选按钮 |
| maxlength | 设定最大长度 |
(1) text (文本框)
文本框 <input type="text">
(2) password (密码框)
密码框 <input type="password">
(3) radio (单选框)
单选框 <input type="radio" value="男" name="sex"> 男 <input type="radio" value="女" name="sex"> 女
(4) checkbox (复选框)
复选框 <input type="checkbox" > 抽烟 <input type="checkbox" > 喝酒 <input type="checkbox" > 烫头
(5) button (普通按钮)
<input type="button" value="普通按钮">
(6) submit (提交按钮)
<input type="submit" value="提交按钮">
(7) reset (清空按钮)
<input type="reset" value="清空按钮">
(8) file (选择文件)
<input type="file" value="选择文件">
(9) select (下拉菜单)
下拉菜单 <select> <option>选项1</option> <option selected>选项2</option> <!--selected -- 将选项2作为默认选项--> <option>选项3</option> </select>
(10) textarea (文本域)
文本域 <textarea cols="30" rows="10"></textarea>
文本框中输入内容会显示, 密码框则不会显示
单选框由于输入的 name 相同, 所以每次只能选择一个
复选框无论输入的 name 是否相同, 每次都可以选择多个
下拉菜单中由于在选项2处添加了 selected, 所以将选项2作为默认选项
🔎无语义标签
| 标签 | 含义 |
| div | 分割 |
| span | 跨度 |
将 div 与 span 理解为两个盒子
- div 是一个大盒子, 独占一行
- span 是一个小盒子, 不独占一行
示例代码
<div> <div>(1)...</div> <div>(2)...</div> <span>(A)...</span> <span>(B)...</span> </div>
运行结果
🔎HTML中的特殊字符
| 特殊字符 | 含义 |
|   | 空格 |
| < | 小于号(＜) |
| > | 大于号(＞) |
| & | 按位与(&) |
