HTML常见标签

2023-09-30 20:59:40

文章目录

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 例子

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

<img src="./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”
HTML常见标签

五、列表标签

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

5.1 有序列表

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

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

HTML常见标签

5.2 无序列表

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

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

HTML常见标签

5.3 自定义列表

  • dl：总标题；
  • dt：小标题；
  • dd：分点内容；
<h3>无序列表</h3>
<dl>
    <dt>姓名</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
</dl>

HTML常见标签

六、表单标签

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

6.1 input标签

1> 相关属性

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

2> 文本框

<input type = "text">
HTML常见标签

3> 密码框

< input type = "password" >
HTML常见标签

4> 单选框

<input type="radio" name="sex">男
<input type="radio" name="sex">女

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

5> 复选框

<input type="checkbox" checked="A"> A
<input type="checkbox" checked="B"> B
<input type="checkbox"> C

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

6> 普通按钮

<input type="button" value="按钮">
HTML常见标签

6.2 label标签

  • 相关属性：for指定当前 label 和相同 id 的 input 标签对应；
  • 作用：搭配input标签使用，实现仅点击label(文字)也能选中input(按钮)，提升用户体验；
<input id="male" type="radio" name="sex"> 
<label for="male">男</label>
<input id="female" type="radio" name="sex">  
<label for="female">女</label>

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

6.3 select标签

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

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

HTML常见标签

6.4 textarea标签

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

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

HTML常见标签

6.5 无语义标签

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

  • div：独占一行，是一个大盒子；
  • span：不独占一行，是一个小盒子；
<div>1. div</div>
<div>2. div</div>
<span>3. span</span>
<span>4. span</span>

HTML常见标签

上一篇：html css——美化表单元素


下一篇：input[type="file"]文件上传并保存