html 标签学习归纳笔记

最新推荐文章于 2024-07-31 22:35:20 发布

未来w

最新推荐文章于 2024-07-31 22:35:20 发布

阅读量737

点赞数

本文链接：https://blog.csdn.net/farewell_w/article/details/104490149

版权

一、简单标签
二、多个标签
三、超链接、图片
四、`from 表单标签`

一、简单标签

0、`注释`

1、`p 段落`

说明：段前段后都有空白
举例：

<body>
    ------------
    <p>我的第一个段落。</p>
    <p>我的第二个段落。</p>
    <p>我的第三个段落。</p>
    ------------
</body>

【运行结果】

2、`hx 标题`

说明：标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。
举例

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

运行结果

3、`strong 、em 强调`

说明：em 表示强调，默认用斜体表示。strong 表示更强烈的强调，用粗体表示。
（目前国内前端程序员更喜欢使用 strong 表示强调。)
举例

<p>有一个名叫<strong>尼克•卡拉威</strong>
（<em>托比•马奎尔</em>Tobey Maguire饰）的作家。</p>

运行结果

4、`span 设置单独样式`

说明：span没有语义，就是为了设置单独的样式用的
举例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    span{
        color:blue;
    }
</style>
</head>
<body>
为了实现他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
</body>

运行结果：

5、`q 短文本引用`

说明：注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。用 q 标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
举例：

<p>周瑜是历史上的英雄人物！配的上那句<q>聪明秀出为之英，胆略过人为之雄。</q></p>

运行结果

6、`blackqoute 长文本引用`

说明：浏览器对 blockquote 标签的解析是缩进样式
举例：

<body>
<p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p>
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
<p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适。</p>
</body>

运行结果

7、`br 换行`

说明：
xhtml1.0写法：<br />
html4.01写法：<br>
现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

br标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有 br 、hr 和 img 。

在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入br。
举例：

<body>
<p>暗淡轻黄体性柔，<br/>情疏迹远只香留。</p>
</body>

运行结果

8、 `nbsp 空格`

说明：若代码中单纯输入空格符，无论输入n个，都只会显示一个空格。
举例：
（1）输入n个空格符

<body>
<p>今天       星期五。</p>
</body>

运行结果

（2）输入4个

<body>
<p>今天&nbsp;&nbsp;&nbsp;&nbsp;星期五。</p>
</body>

运行结果

9、`hr 水平横线`

说明：
html4.01版本：<hr>
xhtml1.0版本：<hr /> 一般使用 xhtml1.0 的版本。

<hr />标签和<br />一样也是一个空标签，只有一个开始标签，没有结束标签。
举例：

<body>
<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr/>
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。</p>
</body>

运行结果：线是无限延长的。

10、`address 地址`

说明：可以定义地址（比如电子邮件地址）、签名或者文档的作者身份。在浏览器上显示的样式为斜体，会自动另起一行。
举例：

<body>
<p>我家住在<address>北京市白云区同德5号</address></p>
<address>
    本文的作者：<a href="mailto:lilian@imooc.com">月半</a>
</address>
</body>

运行结果：

11、`code 插入一行代码`

说明：当代码为一行代码时方可使用。
举例：

<body>
<p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>

运行结果：

12、`pre 插入多行代码`

说明：可插入大段代码
举例：

<body>
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
    alert(message);
}
</pre>
</body>

运行结果：

二、多个标签

1、`ul-li 无序列表`

说明：ul-li 标签是无前后顺序的，默认样式为每个 li 项前有一个原点。一般多用于列举新闻信息。
语法：

<ul>
	<li>信息</li>
	<li>信息</li>
	......
</ul>

举例：

<body>
<ul>
    <li>香港将向18随以上永久居民发放1万港币</li>
    <li>美国口罩出现2亿7千万缺口</li>
    <li>日本回应东京奥运可能取消</li>
</ul>
</body>

运行结果：

2、`ol-li 有序列表`

说明：ul-li 标签是有前后顺序的，默认样式为1.2.3.……
语法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

举例：

<body>
<ol>
    <li>香港将向18随以上永久居民发放1万港币</li>
    <li>美国口罩出现2亿7千万缺口</li>
    <li>日本回应东京奥运可能取消</li>
</ol>
</body>

运行结果：

3、`div 容器`

说明：
· div 相当于一个容器，可以把一些独立的逻辑部分划分出来。
·可以为这一个独立的逻辑部分设置一个名称，用 id 属性来为 div 提供唯一的名称。
举例：

<body>
<div id="hotList">
    <h2>热门新闻</h2>
    <ol>
        <li>美国口罩出现2亿7千万缺口</li>
        <li>日本回应东京奥运可能取消</li>
    </ol>
</div>
<div id="sportNews">
    <h2>体育新闻</h2>
    <ul>
        <li>湖人118-109鹈鹕 </li>
        <li>詹姆斯赛季首个40+湖人三杀鹈鹕取6连胜</li>
    </ul>
</div>
</body>

运行结果：

4、`table 表格`

说明：包含五个元素：table、tbody、tr、th、td

· <table>…</table>：整个表格以<table>标记开始、</table>标记结束。

· <tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

· <tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

· <td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

· <th>…</th>：表格的头部的一个单元格，表格表头。

[ 1 ] . table表格在没有添加css样式之前，在浏览器中显示是没有表格线的。

[ 2 ] . 表头，也就是th标签中的文本默认为粗体并且居中显示。

举例：

<body>
<table>
  <tbody>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
    <tr>
        <td>三班</td>
        <td>32</td>
        <td>80</td>
    </tr>
  </tbody>
</table>
</body>

运行结果：

5、`caption、summary 为表格添加标题和摘要`

说明：摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：
摘要：<table summary="表格简介文本">
标题： <caption>标题文本</caption>
举例：

<body>
<table summary="本表格记录2012年到2013年库存记录，包括U盘和耳机库存量">
    <caption>2012年到2013年库存记录</caption>
    <tr>
        <th>产品名称 </th>
        <th>品牌 </th>
        <th>库存量（个） </th>
        <th>入库时间 </th>
    </tr>
    <tr>
        <td>耳机 </td>
        <td>联想 </td>
        <td>500</td>
        <td>2013-1-2</td>
    </tr>
    <tr>
        <td>U盘 </td>
        <td>金士顿 </td>
        <td>120</td>
        <td>2013-8-10</td>
    </tr>
    <tr>
        <td>U盘 </td>
        <td>爱国者 </td>
        <td>133</td>
        <td>2013-3-25</td>
    </tr>
</table>
</body>

运行结果：

三、超链接、图片

1、`a 超链接`

说明：title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色，可通过css更改。
语法：<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
举例：

<body>
<p>我最近看的一本很好看的书叫<a href="#">漫长的告别</a>。</p>
</body>

运行结果：点击前：

点击后：

[1.1] 在新建浏览器窗口打开链接：加入`target="_blank"`

语法：<a href="目标网址" target="_blank">click here!</a>

[1.2] 在网页中链接Email地址： `mailto`

说明：如果mailto后面同时有多个参数的话，第一个参数必须以 ? 开头，后面的参数每一个都以 & 分隔。（下列参数注意观察参数最后的符号）

邮箱地址：mailto：
抄送地址：cc=
密件抄送地址：bcc=
多个收件人、（密件）抄送人：用分号；分开
邮件主题：subject=
邮件内容：body=
举例：

<body>
<a href="mailto:discover__w@outlook.com?cc=1509115773@qq.com;discover__w@outlook.com&subject=html笔记&body=标签">发送</a>
</body>

运行结果：点击发送后，浏览器自动调用默认客户端的电子邮件程序，并填上相应信息。

2、`img 图片`

语法：<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
说明：
src：标识图像的位置；

alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
图像可以是GIF，PNG，JPEG格式的图像文件。
举例：

<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg"
title="电影介绍">

运行结果：鼠标移动到该图片上时，会显示相应的提示文本。

四、`from 表单标签`

1、与用户交互

语法：<form method="传送方式" action="服务器文件">
说明：
<form>标签是成对出现的，以<form>开始，以</form>结束。所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间，否则用户输入的信息可提交不到服务器上！

action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

method ：数据传送的方式（get/post）
举例：<form method="post" action="save.php">

2、输入框 input - text / password

语法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

说明：
type：type=“text”，文本输入框；
type=“password”, 密码输入框。

name：为文本框命名，以备后台程序ASP 、PHP使用。

value：为文本输入框设置默认值。(一般起到提示作用) password类型的输入框，默认值将显示为黑色圆点。
举例：

<body>
<from>
    账号：<input type="text" name="账号" value="请输入账号"><br/>
    密码：<input type="password" name="密码" value="请输入密码">
</from>
</body>

运行结果：

3、文本域-多行 textarea

语法：<textarea rows="行数" cols="列数">文本</textarea>
说明：<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

cols ：列数
rows ：行数
举例：

<body>
<from>
    <textarea cols="50" rows="10">请输入你的简介</textarea>
</from>
</body>

运行结果：

4、单选框、复选框 input - radio / checkbox

语法：<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
说明：

type：type=“radio时，为单选框；type="checkbox"时，为复选框。

value：提交数据到服务器的值（后台程序PHP使用）。

name：为控件命名，以备后台程序 ASP、PHP 使用。

checked：当设置 checked=“checked” 时，该选项被默认选中。

同一组的单选按钮，name 取值一定要一致。
举例：

<body>
<from>
    请选择性别：<br/>
    <input type="radio" name="sex" value="女" checked="checked">女
    <input type="radio" name="sex" value="男">男
    <br/><br/>请选择你学过的科目：<br/>
    <input type="checkbox" value="数学">数学
    <input type="checkbox" value="英语">英语
    <input type="checkbox" value="语文">语文
    <input type="checkbox" value="物理">物理
</from>
</body>

运行结果：

5、下拉列表框 select - option

[1] 单选

语法：

<from>
    提示文字
    <select>
        <option value="1" >选项1</option>
        <option value="2" selected="selected">选项2</option>
        ……
    </select>
</from>

说明：

value：要向服务器提交的值。
selected: 当selected="selected"时，该选项被默认选中。
举例：

<body>
<from>
    性别：
    <select>
        <option value="1" >男</option>
        <option value="2" selected="selected">女</option>
    </select>
</from>
</body>

运行结果：

[2] 多选 select - multiple=“multiple”

语法：

<from>
    提示文字
    <select multiple="multipe">
        <option value="1" >选项1</option>
        <option value="2" selected="selected">选项2</option>
        ……
    </select>
</from>

说明：在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
举例：

<body>
<from>
    书：
    <select multiple="multiple">
        <option value="1" selected="selected">安妮的日记</option>
        <option value="2" selected="selected">漫长的告别</option>
        <option value="3" >摆渡人</option>
        <option value="4" >我喜欢你</option>
    </select>
</from>
</body>

运行结果：

6、按钮 input - submit / reset

[1] 提交 submit

语法：<input type="submit" value="提交">
说明：
· 只有当type="submit"时，按钮才有提交的作用
·value：按钮上显示的值
举例：

<body>
<from>
    <input type="submit" value="提交" name="sumbit">
</from>
</body>

运行结果：

[2] 重置 reset

语法：<input type="reset" value="重置">
说明：

· 只有当type="reset"时，按钮才有重置的作用
·value：按钮上显示的值
举例：

<body>
<from>
    <input type="reset" value="重置" name="reset">
</from>
</body>

运行结果：

7、label 控件

语法：<label for="控件id名称">

※ 标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
说明：label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（即自动选中和该label标签相关连的表单控件上）。
举例：

<body>
<form>
    性别：
    <label for="male">男</label>
    <input type="radio" name="gender" id="male" />
    <label for="female">女</label>
    <input type="radio" name="gender" id="female" />
</form>
</body>