HTML介绍及常用标签

最新推荐文章于 2024-06-30 22:51:30 发布

Downhill Wind

最新推荐文章于 2024-06-30 22:51:30 发布

阅读量333

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Cream336/article/details/131603476

版权

静态网页-HTML

1.HTML介绍及基本结构（了解）

2.HTML中的常用标签（熟练运用）

3.CSS的引入方式（重点）

1.HTML介绍

1.1 HTML概念

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言；即除了文字之外还可以有视频、音频等内容

1.2 静态页面概念

常说的浏览器中的视觉效果，不需要与用户进行交互（浏览器对用户操作的操作做出的回应）动作，例如：用户点击登录，弹出登录框、订单点击支付会弹出支付框、搜索手表出现手表的列表等

1.3 浏览器内核（了解）

浏览器内核原名叫渲染引擎，用于根据指定的标准解析网页结构，将结构的文本、图片、链接、音频、视频等内容渲染到页面中。

浏览器名称	渲染引擎
Chrome/Safari *	WebKit
Firfox	Gecko
IE	Trident
Opera	Presto(最新的是Blink)

本章课程中推荐使用Chrome或Firfox浏览器，减少兼容性问题的处理（Java课程中暂不考虑兼容性）

1.4 网页结构

通过F12或在页面中右键-审查元素等方式查看页面的HTML构建结构

<html>
  <!--head中指定网页标题及要用到的样式、js或其他需要进行引入的内容-->
  <head>
    <!-- charset用于设置网页的统一字符编码 -->
    <meta charset='utf-8'/>
    <!-- 网页的标题（名称） -->
    <title>第一个网页</title>
  </head>
  <body>
    <!--body中写的都是要在网页中展示的内容-->
    hello html!!
  </body>
</html>

网页结构想要在浏览器上打开并被浏览器解析，需要文件的后缀为.html

1.5 开发工具

工具名称	工具logo	下载地址
Sublime Text	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZxBpLqO1-1688729842265)(./assets/st-logo.png)]	http://www.sublimetext.com/3
HBuilder	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4svb1m8n-1688729842266)(./assets/hbuilder-logo.png)]	https://www.dcloud.io/hbuilderx.html
VS code	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CWCswUG3-1688729842266)(./assets/vscode-logo.png)]	https://code.visualstudio.com/Download
WebStorm	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WfPmCUX1-1688729842267)(./assets/ws-logo.png)]	https://www.jetbrains.com/webstorm/download/

本课堂使用的是Hbuilder X/Visual Studio，因为在学习前端的网页框架的时候需要使用本地服务器，但是还没有学到JavaWeb课程，而HbuilderX/Visual Studio自带了服务器

2. HTML常用标签

前端页面中只有指定的标签才能被浏览器的内核解析，对于未知或自定义的标签浏览器会当成常规的文本识别

2.1 基础标签

2.1.1 标题标签

标题标签默认具有加粗效果，最小字体是16像素，最大是42像素

this is a normal text!
<!-- 注意点：在网页中默认字体大小最小为16px/1em，1em=16px -->
<!-- 标题标签 -->
<h1>一级标题标签，有加粗效果，字体比较大</h1>
<h2>二级标题标签，有加粗效果，字体比一级的小</h2>
<h3>三级标题标签，有加粗效果，字体比二级的再小点</h3>
<h4>四级标题标签，有加粗效果，字体比三级的再小点</h4>
<h5>五级标题标签，有加粗效果，字体比四级的再小点</h5>
<h6>六级标题标签，有加粗效果，字体比五级的再小点</h6>
<h7>没有该标签，但是浏览器依然可以解析，因为其符合标签的格式。所以不会报错，只是没有任何的效果</h7>

2.1.2 段落标签

段落标签包裹的内容代表是一个段落，但是呢，该段落没有任何的形式上的效果和语文中段落不一样，它仅仅只是有这么一个段落的含义而已

<p>
  我是一个段落，但是没有任何的特点，只具备段落的含义而已
</p>

2.1.3 列表标签

将内容以列表的形式按从上往下进行排列，开发需要自定义样式，此处只针对标签演示学习

<!-- 无序列表，没有顺序，ul只是语义上表示其是一个列表标签，但是里面是没有内容的，内容要通过li标签来书写-->
<ul type="disc">
  <li>马克杯</li>
  <li>笔记本</li>
  <li>麦克风</li>
</ul>
<!-- 有序列表，带有顺序，type指定排序类型，start指定开始的位置 -->
<h5>热搜排行榜</h5>
<ol type="A" start="3">
  <li>新冠疫情</li>
  <li>外交部发言回击</li>
  <li>中国台湾出现5.8级地震</li>
</ol>
<!-- 自定义列表 dt相当于标题 dd相当于是描述 -->
<dl>
  <dt>新冠疫情</dt>
      <dd>1、成都出现新冠疫情</dd>
      <dd>2、出现疫情后所有相关人员已经进行了隔离及检测</dd>
  <dt>中国台湾</dt>
      <dd>1、台湾是中国的宝岛</dd>
      <dd>2、想台独想了很多年，也只能想想</dd>
</dl>

2.2 图片标签

用于引入图片在网页中进行显示，开发常用，重点注意其相对路径的使用方式

<!-- 
src：用于指定图片所在的路径
相对路径：图片相对于HTML文件所在的位置
./表示在当前目录下
../表示返回上一级目录
绝对路径：指的是图片在电脑上的存储路径（包含到了盘符路径）
alt：用于作为图片加载失败时的文字提示
title：当鼠标在图片上悬浮时显示的提示（title属性是所有的标签都具备的一个属性）
width：设置图片的宽度
当仅设置宽或者高时 另外一个属性会等比进行设置
height：设置图片的高度
-->
<img src="./assets/image.jpg" alt="加载中..." title="大鱼海棠" width="100px" height="100px"/>

2.3 超链接标签

超链接就是网页中常用的用于页面跳转的标签，还可以用于锚点，例如：网页中常见的返回顶部效果

2.3.1 超链接跳转

<!-- 
href：指定要跳转的网页链接 如果没有href属性将会失效
target：指定新窗口的打开方式
_blank：代表打开一个新窗口
_top：在当前窗口中打开
-->
<a href="http://www.baidu.com" target="_top" title="http://www.baidu.com">点击访问百度</a>
<hr>
<!-- 以图片作为跳转的方式 -->
<a href="http://www.baidu.com"><img src="./assets/image.jpg" alt=""></a>
<hr>
<!-- 当在设置超链接时，此时还不确定要跳转的链接地址，使用#作为占位符，代表当前页面 -->
<a href="#">跳转到指定服务器地址</a>

2.3.2 锚点

锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转

常见举例

1.网页中常见的返回顶部功能

2.火影中四代火影的瞬雷术

<!--页面A中指定位置-->
<!-- 做个标记 -->
<a id="position"></a>
<!--页面B中进行跳转-->
<a href="./超链接-跳转.html#position">回到超链接-跳转的页面</a>

2.4 table表格

2.4.1 表格语法

和办公软件Excel表格是类似的，都有行（tr）和列（td），行及列都可以进行合并操作

<!-- 简易的简历表 -->
<table border="1px" rules="all" cellspacing="0" align="center" width="50%">
  <tr>
    <td width="20%">姓名</td>
    <td width="20%"></td>
    <td width="20%">专业</td>
    <td width="20%"></td>
    <!-- rowspan表示跨行操作，值也包含了本身所在的行 -->
    <td width="20%" rowspan="2"></td>
  </tr>
  <tr>
    <td>出生日期</td>
    <td></td>
    <td>联系方式</td>
    <td></td>
  </tr>
  <tr>
    <td>籍贯</td>
    <td colspan="4"></td>
  </tr>
  <tr>
    <td colspan="5" align="center">工作经历</td>
  </tr>
  <tr>
    <td colspan="5" height="100px"></td>
  </tr>
  <tr>
    <td colspan="5" align="center">教育经历</td>
  </tr>
  <tr>
    <td>起止时间</td>
    <td colspan="2">学校名称</td>
    <td colspan="2">证明人</td>
  </tr>
  <tr>
    <td height="40px"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td height="40px"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
  </tr>
  <tr>
    <td colspan="5" height="120px">备注</td>
  </tr>
</table>

表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注，此时就需要考虑一个问题

如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead、tbody、tfooter，内容默认都在tbody中

<!-- 表格中默认会将所有的内容都放在一个tbody中 -->
<table border="1px" cellpadding="0" cellspacing="0" align="center" width="50%">
  <thead>
    <tr>
      <th rowspan="2">编号</th>
      <th>姓名</th>
      <th>性别</th>
    </tr>
  </thead>
  <tr>
    <td>1</td>
    <td>福欧文</td>
    <td>男</td>
  </tr>
  <tr>
    <td>1</td>
    <td>福欧文</td>
    <td>男</td>
  </tr>
</table>

2.4.2 表格优缺点

优点

1.布局简单（因为就是纯表格的区域划分）

2.样式统一（只要确认好第一行的样式，后面的都会跟着变）

缺点

维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）

2.4.3 表格应用场景

布局简单，变动的可能性比较小的情况下考虑使用表格

例如：登录、注册页，百度新闻的热搜新闻词模块

2.5 form表单 *

2.5.1 表单中的基础标签

表单通常用于让用户能够进行输入操作使用的，例如常见的登录、搜索、注册、图片上传等等

表单是让用户进行信息输入的，将输入的数据提交到服务器上，服务器再根据提交的数据进行分析验证反馈结果
action：指定服务器地址
method：指定表单数据的提交方式
get：默认的提交方式，get方式提交的数据会在地址栏中显示出来，很不安全，所能提交的数据量比较小，效率高
post：效率低，安全，携带大量的数据，不会在地址栏中显示
开发的过程中post方式使用的较多，考虑安全问题

注意：表单中的数据想要提交，一定要有name属性存在
表单中所有的内容都是通过以下三个标签组成的：
input、textarea、select

		<h1 align="center">注册页面</h1>
		<table align="center">
			<!-- 
 			定义这是表单,表单是用于数据提交
			 action：提交到后台的请求路径(自己写的后台)
			 method：提交到后台的请求方式
					post: 不会把提交的内容在浏览器地址栏中显示，安全，提交的内容理论上来是无限
					get：xxx/?username11=jack&passwrold22=123

						 把提交的内容在浏览器地址栏中显示，不安全，对内容有限制一般为1kb,提交的内容有限
                      type:表示当前输入框是什么类型	
                      name:表示给这个输入框起的名字（也是用于后台提交的名字）	
                      placeholder:输入框中提示
                      title：鼠标悬浮时显示提示
                      autocomplete：关闭输入框中已提交历史记录
                      maxlength：设置当前输入框的最大长度（仅仅表示长度）
                      value：当前输入框中的默认值
                      readonly：设置当前输入框为 只读状态，但不影响数据提交
                      disabled：设置当前输入框为 不可用状态，不能数据提交
			-->
			<form action="xxx" method="get">
				<tr>
					<td>用户名：<font color="red">*</font></td>
					<td><input  type="text" 
								name="username11" 
								placeholder="请输入用户名" 
								title="请输入用户名" 
								autocomplete="off" 
								maxlength="3" 
								value="小江" 
								readonly="readonly" 
								disabled="disabled"/></td>
				</tr>
				<tr>
					<td>密&nbsp;&nbsp;&nbsp;码：<font color="red">*</font></td>
					<td><input type="password" name="passwrold22" placeholder="请输入密码" /></td>
				</tr>
				<tr>
					<td><input type="submit" value="注册"></td>
					<td><input type="reset"></td>
				</tr>				
			</form>
		</table>

2.5.2 表单中的扩展标签

<form action="" method="">
			文本输入框:<input type="text" name="username" /><br>
			密码输入框:<input type="password" name="pwd" /><br>
			日期:<input type="date" name="date" /><br>
			月：<input type="month" name="month"/><br>
			日期日分秒：<input type="datetime-local" name="local" /><br>
			数据：<input type="number" name="number"/> <br>
			多选框：
				<input type="checkbox" name="box" value="吃饭"/>吃饭
				<input type="checkbox" name="box" value="睡觉"/>睡觉
				<input type="checkbox" name="box" value="打豆豆"/>打豆豆
				<input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>
			单选框：
				<input type="radio" name="sex" value="男" checked="checked" />男
				<input type="radio" name="sex" value="女" />女
				<input type="radio" name="sex" value="人妖" />人妖<br>
			文件上传：<input type="file" name="file"/><br>
			提交按钮：<input type="submit" value="登录"/><br>
			重置按钮：<input type="reset" /><br>
			按钮:<input type="button" id="button" value="点我啊"/>
				 <button>我是一个button</button><br>
			隐藏域：<input type="hidden" name="hidden" /><br>
			下拉框：
				<select>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="郑州" selected="selected">郑州</option>
					<option value="杭州">杭州</option>
				</select><br>
			文本域：<textarea rows="10" cols="30"></textarea>
		</form>

Label标签

<input type="checkbox" name="box" value="吃饭" id="a"/> <label for="a">吃饭</label>
<input type="checkbox" name="box" value="睡觉" id="b"/> <label for="b">睡觉</label>
<input type="checkbox" name="box" value="打豆豆"/>打豆豆
<input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>

2.6 iframe标签

后台管理的前台门户通常都是以单页面为主实现的，此时需要进行页面内容的嵌套，iframe标签可以在一个页面中嵌套其他页面的内容

<!-- 引入其他页面
frameborder：控制是否显示边框线 1显示 0不显示
scrolling：控制是否显示滚动条 yes显示 no不显示 auto根据页面大小浏览器自动控制
-->
<iframe src="../day01/常用标签01.html" width="100%" height="800px" frameborder="0" scrolling="auto"></iframe>

<a href="aa.html" target="myiframe">教职员工</a>
<a href="bb.html" target="myiframe">在校学生</a>
<a href="cc.html" target="myiframe">毕业校友</a>

<iframe frameborder="0" scrolling="auto" src="aa.html" name="myiframe" width="1000px" height="600px"></iframe>

3. 标签划分及嵌套规则

3.1 标签划分

从行业的官方规范来讲，对标签的划分分两种

块元素：单独占整行（自带换行符），可以设置宽高属性的

行元素：可以在同一行显示，设置宽高不生效

目前行业中的程序员喜欢的划分，分三种

块元素：单独占整行（自带换行符），可以设置宽高属性的

行元素：可以在同一行显示，内容撑开元素宽高，设置宽高不生效

行内块元素：既可以设置宽高，也可以在同一行显示（img-本身自带了宽高属性，display属性控制）

3.2 嵌套规则

a.行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）

b.块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意
p标签中是不允许嵌套其他任意的块元素
h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）

<span>价格：<strong style="color: red;">998</strong>元</span>
<hr>
<p>
  <a href="http://news.baidu.com">百度新闻</a>
  <a href="http://www.baidu.com">百度首页</a>
</p>
<hr>
<div>
  <p>在div中嵌套任意的块元素是很常见的</p>
</div>
<p>
<div>在p标签中嵌套任意的块元素都会发生页面结构的变化</div>
</p>
<h3>
  <h2>在一个小的字体中嵌套了一个大的字体</h2>
</h3>

本章小结

1.网页基本结构的组成需要了解，方便后期JavaScript中对DOM结构进行操作

2.图片标签的相对路径使用及超链接的跳转使用要熟练

3.表单的action及method属性要掌握，input标签注意其name属性一定要存在

4.标签的嵌套规则没有明确的要求，只是根据其特征从理论上进行划分从而规范开发
n>价格：998元

百度新闻百度首页

在div中嵌套任意的块元素是很常见的

在p标签中嵌套任意的块元素都会发生页面结构的变化

在一个小的字体中嵌套了一个大的字体

```

本章小结

1.网页基本结构的组成需要了解，方便后期JavaScript中对DOM结构进行操作

2.图片标签的相对路径使用及超链接的跳转使用要熟练

3.表单的action及method属性要掌握，input标签注意其name属性一定要存在

4.标签的嵌套规则没有明确的要求，只是根据其特征从理论上进行划分从而规范开发