HTML基础与常用标签详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45486436/article/details/99817933

文章目录

1 HTML语法基础
- 1.1 HTML
- 1.2 元素/标签
2 常用标签介绍
3 常用结构标签
4 标签分类
5. 标签比较
6 标签间的转换
- 6. 标签嵌套

1 HTML语法基础

1.1 HTML

超文本标记语言浏览器能够识别和解析的语言，通过元素的形式构建页面结构和填充内容

1.2 元素/标签

元素也称为标记或标签，用于在网页中标记内容
语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示
分类：
- 双标签：成对出现，包含开始标签和结束标签。
- 单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。
标签属性：
- 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：
```
<img src="imgs/img01.jpg">
```
- 同一个标签中可以添加若干组标签属性，使用空格间隔。例：
```
<img src="imgs/img01.jpg" width="200px" height="200px">
```

2 常用标签介绍

2.1 基本结构解析

<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html> 
<!-- HTML文档开始的标志 -->
<html> 
  <!-- 头部设置，可在head中设置网页标题，引入外部的资源文件 -->
  <head>
      <!-- 设置网页标题，显示在网页选项卡上方 -->
      <title>网页标题</title>
      <!-- 设置网页字符编码 -->
      <meta charset="utf-8"> 
  </head>
  <!-- 网页主体部分，显示网页主要内容 -->
  <body> 
      网页主体内容
  </body>
</html><!-- 文档结束-->

2.2 body中常用标签

2.21 文本标签

标题标签 :h
段落标签：p

普通文本标签

<b>加粗标签</b>
<strong>强调标签，效果同b标签</strong>
<i>斜体标签</i>
<u>删除线标签</u>
<s>删除线标签</s>
<span>行分区标签，用于对特殊文本特殊处理</span>
<label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>

换行标签：br
水平线标签，在页面中插入一条水平分割线:hr

字符实体：

 使用 &lt; 在页面中呈现 "<"
 使用 &gt; 在页面中呈现 ">"
 使用 &nbsp; 在页面中呈现一个空格
 使用 &copy; 在页面中呈现版权符号"©"
 使用 &yen; 在页面中呈现人民币符号"￥"

2.22 容器标签:div

常用于页面结构划分，结合CSS实现网页布局

  <div id="top">页面顶部区域</div>
  <div id="main">页面主体区域</div>
  <div id="bottom">页面底部区域</div>

2.23 图片标签:img

   <img src="" width="" height="" title="" alt="">

用于在网页中插入一张图片。

属性 src 用于给出图片的URL(路径)，必填。
属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
属性 title 用于设置图片标题，鼠标悬停在图片上时显示
属性 alt 用于设置图片加载失败后的提示文本

2.24超链接标签：a

   <a href="http://www.taobao.com" target="_self">淘宝</a>
   <a href="http://www.baidu.com" target="_blank">百度</a>

用户可以点击超链接实现跳转至其他页面

属性 href 用于设置目标文件的URL(路径)，必填。
属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
属性href也可以指向某个id号属性的标签(页面内跳转)
text-decoration: none;去除底部横线。

3 常用结构标签

列表标签

无序列表:
默认用实心圆点标识列表项

ul>li*3
<ul>
   <li>list item 列表项</li> 
   <li>list item 列表项</li>
   <li>list item 列表项</li>
</ul>

使用样式：list-style-type: none可以去掉默认实心圆点标识

<style>
        ul{
            list-style-type: none;
        }
    </style>

有序列表
默认使使用阿拉伯数字标识每条数据，可以使用start属性设置起始的值，默认为1

<ol>
 	<li>list item 列表项</li> 
 	<li>list item 列表项</li>
 	<li>list item 列表项</li>
 </ol>

列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单

0l>li>ul>li*3
<ol>
   <li>
   	西游记
   	<ul>
   		<li>孙悟空</li>
   		<li>孙悟空</li>
   		<li>孙悟空</li>
   	</ul>
   </li>
</ol>

表格标签

表格由行和单元格组成，常用于直接的数据展示或辅助排版，基本结构如下：
th为标题行

<!-- 创建表格标签 -->
<table>
	 <!-- 创建行标签 -->
	<tr>
		<!-- 行中创建单元格以显示数据 -->
		<th>姓名</th>
		<th>年龄</th>
		<th>班级</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>20</td>
		<td>一(1)班</td>
	</tr>
</table>

单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整。

单元格属性作用取值
colspan 跨列合并单元格无单位数值
rowspan 跨行合并单元格无单位数值
合并示例代码：

单元格属性	作用	取值
colspan	跨列合并单元格	无单位数值
rowspan	跨行合并单元格	无单位数值

<table border="1">
    <tr>
        <th>姓名</th>
        <td>李小明</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>010-1234567</td>
    </tr>
    <tr>
        <td>13912321213</td>
    </tr>
</table>

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>李小明</td>
        <td>010-1234567</td>
        <td>13912321213</td>
    </tr>
</table>

表单标签：form

表单用于采集用户的信息并提交给服务器，由表单标签和表单控件组成。表单标签form负责提交数据给服务器，表单控件负责收集数据。

属性名	取值
action	设置数据的提交地址
method	设置数据的提交方式，默认为get方式，可以设置为post （加密）
onsubmit	设置表单数据提交时的触发事件的执行函数（事件绑定中详细介绍）

 <form>
 	<form action="" method="" onsubmit="">
 	<!--此处为表单控件-->
 </form>

表单控件使用（重点）
表单控件用于采集用户信息，可设置以下标签属性

属性名	取值
type	设置控件类型
name	设置控件名称，最终与值一并发送给服务器
value	设置控件的值
placeholder	设置输入框中的提示文本
maxlength	设置输入框中可输入的最大字符数
checked	设置单选按钮或复选按钮的默认选中
selected	设置下拉菜单的默认选中

input函数
- type:text,password,radio(单选框)，checkbox（复选框），button:普通按钮/submit（value=提交）/reset（value=重置）：按钮。autofocus属性自动获取焦点。
- checkbox（复选框）(同时适用于radio)使用lable包裹可以实现点选文字生效或
```
<input type="checkbox"  id="checkbox_id" value="toast">
<label for="checkbox_id">Toast</label>
```
- radio(单选框)命名相同的name可以使选项相互排斥
- checked 默认选中状态
- select 下拉菜单
  selected默认选中

	<select name="edu" id="">
             <option value=""></option>
            <option value="1"></option>
             <option selected value="2"></option>
             <option value="3"></option>
    </select>

		-  range滑块元素
max,min	起始值

value 默认值

 <!-- 滑块元素 -->
    <input type="range"
           min="1"
           value="5"
           max="10"
           id="rng">

textarea

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

4 标签分类

4.1 块标签

独占一行,不与标签共行;可以手动设置宽高,默认宽度与与父标签保持一致
例 : body div h1~h6 p ul ol li form table(默认尺寸由内容决定)

4.2 行内标签

可以与其他标签共行显示;不能手动设置宽高,尺寸由内容决定
例 : span label b strong i s u sub() sup a

4.3行内块标签

可以与其他标签共行显示,又能手动调整宽高
例 : img input button (表单控件)

5. 标签比较

行内标签的特征
块标签特征

6 标签间的转换

内联标签如何转成块元素

		<!-- 内联转块display: block -->
    <span style="display: block;width:200px;background-color: red">今天</span>
    <span style="display: block;width:200px;background-color: red">明天</span>
    <!-- 内联转块display:inline-block -->
    <span style="display:inline-block;width:200px;background-color: red">今天</span>
    <span style="display:inline-block;width:200px;background-color: red">明天</span>

块标签如何转成内联元素

  <!-- 块转内联，块一行显示 -->
      <div style="display: inline; background-color: red">后天</div>
      <div style="display: inline; background-color: red">大后天</div>

6. 标签嵌套

块标签中可以嵌套任意类型的标签
p 标签除外，段落标签只能嵌套行内标签，不能嵌套块标签
行内标签中最好只嵌套行内或行内块标签
标签嵌套
- 在双标签中书写其他标签，称为标签嵌套
- 嵌套结构中，外层标签称为父标签，内层标签称为子标签。
- 多层嵌套结构中，所有外层标签统称为祖先标签，内层标签统称为后代标签，平级结构互为兄弟标签。