01-HTML常用标签+特殊字符

 

01-HTML常用标签+特殊字符

1.HTML简介

  1. HTML，Hyper Text Markup Language的缩写，中文译为超文本标记语言。
  2. HTML4+CSS2常用于PC端；HTML5+CSS3常用于移动端。

2.HTML基本标签

  1. <!DOCTYPE html>用于声明文档类型，让浏览器按照相应的版本解析HTML内容，<!DOCTYPE html>是HTML5的协议头；<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">是HTML4的协议头。
  2. html标签。html是网页的根标签，其他所有的标签都被他包含。
  3. head标签。head是网页的头部标签，头部标签中主要包含网页的配置信息。
  4. body，主体标签。body中包含浏览器中显示的其他内容和标签。
  5. meta标签，meta用于设置字符集或者设置编码；meta还可以用来设置网页的关键信息，用于进行seo搜索引擎的优化。
  6. title，标题标签。

3.HTML常用标签

  1. h1-h6，标题标签，字体从小到大，并且加黑加粗。
  2. hr，水平线标签。
  3. br，换行标签。
  4. p，段落标签。
  5. font，文本标签。

4.图片标签

<!--
1 网页中的基本单位是像素px。如果是0像素，可以直接写为0；如果是其他的像素值必须带px单位，如10px。
2 图片标签中的属性：
    src，图片的路径。
    width，图片的宽，单位是px。如果单独设置了width或者height，图片会进行等比例缩放。
    height，图片的高，单位是px。如果单独设置了width或者height，图片会进行等比例缩放。
    border，图片的边框。
    title，鼠标悬浮到图片上的文字提示。
    alt，图片不存时的提示文字信息。
-->
<img src="img/timg.jpg" width="500px" border="5" title="图片" alt="加载中">

5.超链接标签

<!--
1 a标签，超链接标签。
2 a标签中的href属性，跳转的路径。如果跳转到外部网站，需要添加协议，如https://www.baidu.com。
3 a标签中的target属性，跳转的目标或者跳转的方式。
    _self，target的默认值，在浏览器当前选项卡中打开新网站。
    _black，在浏览器新的选项卡中打开新网站。
-->
<a href="https://www.baidu.com" target="_self">去百度</a>
<a href="https://www.baidu.com" target="_blank">去百度</a>

6.插入图和背景图

<!--
1 插入图通过img标签呈现到页面中，并且插入图在页面中占位置。
    插入的图片有多大，在页面中就会呈现出多大。如果插入图大于屏幕大小，则屏幕中会出现滚动条。

2 背景图通过background属性放入到页面中。
    背景图在页面中不占位置。如果背景图大于屏幕大小，也不会出现滚动条。
    如果背景图小于屏幕大小，则多个背景图会被平铺到页面上。
-->
<img src="./img/timg.jpg">

7.锚点链接

<!-- 1 a标签中嵌套img标签，点击图片会跳转到指定网站。 -->
<!-- 2 通过id="xxx"定义锚点。 -->
<!-- 3 通过a标签跳转到指定的锚点，如<a href="#xxx">去锚点二</a>。 -->
<h3 id="one">锚点一</h3>
<a href="https://www.baidu.com">
    <img src="./img/timg.jpg">
</a>
<h3 id="two">锚点二</h3>
<br>
<a href="https://www.baidu.com">
    <img src="./img/timg.jpg">
</a>
<br>
<a href="https://www.baidu.com">
    <img src="./img/timg.jpg">
</a>
<br>
<!-- 锚点链接，href="#"，返回顶部；href="#xxx"，跳转到指定锚点。 -->
<a href="#">顶部</a>
<a href="#one">去锚点一</a>
<a href="#two">去锚点二</a>

8.列表

<!-- 1 无须列表 -->
<ul>
    <li>tom</li>
    <li>bob</li>
    <li>alice</li>
</ul>

<!-- 2 有序列表 -->
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>

<!-- 3 自定义列表 -->
<dl>
    <dt>姓名</dt>
    <dd>tom</dd>
    <dd>alice</dd>
</dl>

9.表格

<!--
1 表格相关的标签。
    table，表格标签；
    tr，表格行标签；
    td，单元格标签，单元格的列宽以当前列中最宽的单元格为基准。
    th，表格头的单元格，th中的文本会默认居中并加粗。
    caption，设置表格的标题。
2 表格相关的属性：
    border，为表格设置边框，边框的大小为1px，即1像素。
    width，表格的宽。
    height，表格的高。
    cellspacing，设置单元格的边距。
    align，表格单元格的文本位置。
        默认left，居左；center，居中；right，居右。
        align在table标签中使用，会将表格居中；align在tr中使用，会将文本居中。
    colspan，跨列。
    rowspan，跨行。
-->
<table border="1" width="500px" height="300px" cellspacing="0" align="center">
    <caption>信息</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr align="center">
        <td>tom</td>
        <td>20</td>
    </tr>
    <tr align="center">
        <td>alice</td>
        <td>30</td>
    </tr>
</table>
<br>
<br>
<!-- 3 表格跨行或者跨列合并案列。 -->
<table border="1" width="600" height="300" align="center" cellspacing="0">
    <caption>课程表</caption>
    <tr bgcolor="yellow">
        <th>日期</th>
        <th colspan="5">课程</th>
        <th colspan="2">周末</th>
    </tr>
    <tr bgcolor="#9acd32" align="center">
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期天</td>
    </tr>
    <tr align="center">
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
        <td>政治</td>
        <td rowspan="6">休息</td>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
        <td>政治</td>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
        <td>政治</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
        <td>政治</td>
    </tr>
    <tr align="center">
        <td rowspan="2">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
        <td>政治</td>
    </tr>
    <tr align="center">
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
        <td>政治</td>
    </tr>
</table>

10.表单

<!--
form表单标签。可以将要提交的内容放入到form中。
    actions属性，提交的地址。
    method属性，提交的方式，有两个值，post和get。
label标签。
    for属性，用于将标签和input进行关联。关联之后点击边标签，光标也会到input上。

input输入框标签。
    type属性表示输入框的类型。
        text，文本输入框。
        password，密码框。
        radio，单选框。单选框中的name属性用于将单项框分组，
        同组中的多个单选框，同时只能被选中一个。
        checkbox，复选框、多选框。
        button，普通按钮。
        submit，提交按钮，会提交form中的数据。
        reset，重置按钮，会清空form中的内容。
    checked属性。有三种表示选中的写法，checked="checked"、checked=""、checked。

select下拉框标签。
option下拉框中的下拉列的标签。
    selected属性，默认选中该下拉框。有三种选中写法，selected="selected"、selected=""、selected。
optgroup下拉组标签。

textarea文本域标签。

button按钮标签。
    type属性表示按钮的类型，有三个值submit、reset和button。
        submit，type的默认值为submit，即按钮写在form中会将表单数据提交。
        reset，重置form的数据。
        button，普通按钮。
-->
<form action="https://www.baidu.com" method="get">
    <label for="name">姓名</label>
    <input type="text" id="name">
    <br>
    <label for="password">密码</label>
    <input type="password" id="password">
    <br>
    性别
    <input type="radio" name="gender" id="male" checked="checked"> <label for="male">男</label>
    <input type="radio" name="gender" id="female"> <label for="female">女</label>
    <br>
    爱好
    <select>
        <option>打游戏</option>
        <option selected="selected">写代码</option>
        <option>唱歌</option>
    </select>
    <br>
    下拉组
    <select>
        <optgroup label="水果">
            <option>苹果</option>
            <option selected="selected">梨</option>
            <option>香蕉</option>
        </optgroup>
        <optgroup label="爱好">
            <option>打游戏</option>
            <option selected="selected">写代码</option>
            <option>唱歌</option>
        </optgroup>
    </select>
    <br>
    爱好
    <input type="checkbox">打游戏
    <input type="checkbox">写代码
    <input type="checkbox" checked>唱歌

    简介
    <textarea></textarea>
    <br>
    <input type="button" value="按钮">
    <br>
    <input type="submit" value="按钮">
    <br>
    <input type="reset" value="按钮">

    <button type="submit">按钮</button>
</form>

11.HTML中的其他标签

<!--
1 如下四组标签展示效果是相同的，但是每组的第二个会加强语义。
2 使用加强语义的标签，可以让爬虫更好的通过语义来获取文本信息。
-->
<b>加粗</b>
<strong>加粗</strong>
<br>

<i>倾斜</i>
<em>倾斜</em>
<br>

<u>下划线</u>
<ins>下划线</ins>
<br>

<s>删除线</s>
<del>删除线</del>

12.HTML中的特殊字符

特殊字符 描述 字符代码
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 并且，与 &amp;
￥ 人民币 &yen;
© 版权符号 &copy;
® 注册商标 &reg;
° 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方 &sup2;
³ 立方 &sup3;
posted @   行稳致远方  阅读(259)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  07-H5新增属性、标签和伪类
·  02-CSS常用属性+显示模式+选择器
·  HTML标签
·  HTML常用标签超详细整理
·  HTML常用标签
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae