HTML常见标签

文章目录

HTML概念

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML代码由标签构成，标签是由<>括起来的结构~

学习前端技术不像学习语言一样，无需安装任何的编译器，因为前端的代码都是运行在浏览器上的，我们可以借助Chrome浏览器的F12开发者工具，方便随时查看网页结构的设计细节，更好的优化页面设计。

HTML常见标签

一、基本标签

1.1 标题标签

共有六级标题，数字越大，字体越小~

<h1>一级标题</h1>
...
<h6>六级标题</h6>

1.2 段落标签

如果把一篇文章粘贴到 html 代码中，会发现文字并没有分段~ 为了实现作文中分段的形式，我们可以使用段落标签，每一段文字都放到一个 p标签中，即可实现分段的效果。

<p>一段文字</p>

1.3 换行标签

html 代码中是不能使用 \n 等字符换行的，有特定的换行标签~
与其他标签不同的是，html 中的标签大多是成对的，单换行标签的单标签~
写作

<br> 或 <br/>

1.4 格式化标签

• 加粗<strong> 加粗 </strong> 或 <b> 加粗 </b>
• 倾斜<em> 加粗 </em> 或 <i> 加粗 </i>
• 删除线<del> 加粗 </del> 或 <s> 加粗 </s>
• 下划线<ins> 加粗 </ins> 或 <u> 加粗 </u>

二、图片标签

该标签可以用于网页中展示自定义图片~

<img src = "图片路径">

2.1 相关属性

• alt：若图片路径错误导致无法正确显示该图片，则会给用户一个说明文本；
• title：鼠标放在图片上会出现提示文本；
• width / height：设置尺寸；
• border：设置边框；

2.2 相关路径

• 相对路径 以当下的 html 文件为基准，图片位置在 - 同级路径下：直接访问 photo.jpg- 下一级路径：image/photo.jpg- 上一级路径：…/image/photo.jpg 其中，image为包含photo.jpg的文件夹，./表示当前路径~ …/表示当前路径的上级路径~
• 绝对路径 - 完成的磁盘路径： D:\文件夹…- 网络路径：网上查找的图片链接

2.3 例子

例如，插入一个笑脸图片~

<imgsrc="./image/photo.png"alt="笑脸",title="这是一个笑脸",width="500px",height="500px">

三、超链接标签

html 中可以使用超链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面~

<a href= "链接地址">文本说明</a>

3.1 相关属性

• target：定义被链接的文档在何处显示，默认以当前窗口打开~ 设置target = _blank 可以实现在新窗口打开文档

3.2 链接形式

• 外部链接：链接地址为其他网站的链接；
• 内部链接：在本页面内部跳转的链接，写相对路径即可；
• 空连接：点击无反应；<a href= "#">空连接</a>
• 下载链接：点击下载本地指定的文件；
• 网页元素链接：可以指定图片等元素作为链接的载体，实现点击图片发生网页跳转；
• 锚点链接：可快速定位到页面中的某个位置；

四、表格标签

表格标签用的较少，一般都使用列表标签~

<table>...</table>

4.1 相关属性

• align：表格相对于周围元素的对齐方式；
• border：表示表格边框；
• cellspadding：表格内容距离边框的位置；
• cellspacing：表示单元格之间的距离；
• width / height：设置尺寸；

4.2 例子

下图表格的设置中，表格处于页面居中位置，单元格之间没有距离，调整合适的宽高比；
align=“center”
border=“1”
cellpadding=“20”
cellspacing=“0”
width=“300”
height=“50”

五、列表标签

该标签比较常用，主要用来布局对齐，调整页面~

5.1 有序列表

ol 中只能放 li 标签，li 标签中可以放其他标签~

<h3>有序列表</h3><ol><li>张三</li><li>李四</li><li>王五</li></ol>

5.2 无序列表

ul 中只能放 li 标签，li 标签中可以放其他标签~

<h3>无序列表</h3><ul><li>张三</li><li>李四</li><li>王五</li></ul>

5.3 自定义列表

• dl：总标题；
• dt：小标题；
• dd：分点内容；

<h3>无序列表</h3><dl><dt>姓名</dt><dd>张三</dd><dd>李四</dd><dd>王五</dd></dl>

六、表单标签

表单标签是用户输入信息的方式，是用户和页面进行交互的一类标签~

6.1 input标签

1> 相关属性

• type：必须有，指明选择的标签种类；
• name：input的别名，在单选按钮中，如果想实现多个按钮只能选择其中一个时，这多个按需要具有相同的name；
• value：input 标签中的默认值；
• check：用于单选框和复选框中的默认选中值；

2> 文本框

<input type = "text">

3> 密码框

< input type = "password" >

4> 单选框

<inputtype="radio"name="sex">男
<inputtype="radio"name="sex">女

如果不设置相同的name，那么男女两个按钮都可以同时选中，反之，两个按钮只能选中其中一个；

5> 复选框

<inputtype="checkbox"checked="A"> A
<inputtype="checkbox"checked="B"> B
<inputtype="checkbox"> C

类似于多选题，几个选择框可以任意选中；checked表示默认选中A和B；

6> 普通按钮

<input type="button" value="按钮">

6.2 label标签

• 相关属性：for指定当前 label 和相同 id 的 input 标签对应；
• 作用：搭配input标签使用，实现仅点击label(文字)也能选中input(按钮)，提升用户体验；

<inputid="male"type="radio"name="sex"><labelfor="male">男</label><inputid="female"type="radio"name="sex"><labelfor="female">女</label>

与上述介绍的单纯的单选按钮的区别在于，鼠标点击文字也可以实现按钮选中；

6.3 select标签

下拉菜单，第一行为默认值

<select><option>--请选择年份--</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option></select>

6.4 textarea标签

多行文本框，实际就是text文本框，但是能输入多行；
cols / rows：设置文本框尺寸；

<textareacols="30"rows="10"></textarea>

6.5 无语义标签

主要使用 div 和 span 来设计页面布局，但是这两个标签在页面中不显示；

• div：独占一行，是一个大盒子；
• span：不独占一行，是一个小盒子；

<div>1. div</div><div>2. div</div><span>3. span</span><span>4. span</span>