前端html基本结构

原创已于 2022-08-16 16:30:52 修改 · 1.8k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html #javascript

于 2022-08-16 15:53:17 首次发布

前端系列学习专栏收录该内容

4 篇文章

订阅专栏

前言：

前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页和界面

前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时：

1. HTML:页面结构:可以把他看成一个文档,定义展示页面的内容结构
1. CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
1. JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能

一、HTML基本结构

HTML: 超文本标记语言,是网页制作必备的编程语言“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素

HTML页面结构

超文本标记语言的结构包括“头"部分（Head）、和“主体”部分（Body）,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容
```
<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

</body>
</html>
```
1、文档声明 : DOCTYPE声明该html文件使用的HTML版本 ------> 为HTML 5
2、页面头部:

1.标签中的 lang="“en” 定义网页的语言为英文,定义成中文是 'lang=“zh-CN”
2.标签中的 <title 显示在浏览器头部的内容，:标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏。

3、页面内容:

<body:元素定义文档的主体,也就是页面显示的内容,body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等)

二、常见的HTML标签使用

1、注释:

定义和用法：注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。

例如: 这是注释,快捷键:ctrl+/

	<!--这是一段注释。注释不会在浏览器中显示。-->
	 <p>这是一段普通的段落。</p>

2、标题标签: h1-h6标签

定义和用法: 标签可定义标题的大小,分为 h1-h6
注意: 由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小

例如:

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

3、段落标签:p标签

定义和用法：标签定义段落,一个P标签标示一个段落,元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定

例如:

	<p>7日晚上10点,中国机队进行排查</p>
	<p>新闻实践史不是对新闻历史的碎片化、浅表性阐释</p>

4、分割线:hr标签

定义和用法:标签在 HTML 页面中创建一条水平线。水平分隔线以在视觉上将文档分隔成各个部分,在 HTML中

例如:

	<p>7日晚上10点,中国机队进行排查</p>
	<hr>
	<p>新闻实践史不是对新闻历史的碎片化、浅表性阐释</p>
	<hr>

5、换行标签: br标签

定义和用法: 插入一个换行符，标签是空标签,意味着它没有结束标签

例如:

	<p>7日晚上10点,中国国际航空在其官方微博<br>确认了这一情况</p>

6、字体斜体标签: i标签

定义和用法: 字体进行倾斜

例如:

	<i>中国</i>国际航空

7、字体加粗标签: b标签

定义和用法:字体进行加粗

例如:

	<b>新闻</b>实践史不是对新闻历史的碎片化

8、图片标签: img标签

定义和用法: 向网页中嵌入一幅图像
标签的属性：

src:为图片链接
alt:为图片名称
height:定义图像的高度
width:定义图像的宽度

注意: 本地图片地址链接格式为:./600.jpg

例如:

	<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是网络图片">
	<img src="./600.jpg" alt="这是本地图片">

9、链接标签: a标签

定义和用法: 标签定义超链接,用于从一个页面链接到另一个页面

例如:

	<a href="https://www.baidu.com">百度一下</a>

10、列表标签:

无序列表: ul 标签

定义和用法: 在网页上定义一个无编号的内容列表可以用
例如:

	 <ul>
		 <li>无序列表文字1</li>
		 <li>无序列表文字2</li>
		 <li>无序列表文字3</li>
	 </ul>

有序序列表:ol标签

定义和用法: 在网页上定义一个有编号的内容列表可以用
例如:

	<ol>
		 <li>有序列表文字1</li>
		 <li>有序列表文字2</li>
		 <li>有序列表文字3</li>
	</ol>

11、表格标签: table标签

定义: 向网页中嵌入一幅图像，tabel标签定义 HTML 表格

table标签的使用：

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
tr元素:定义表格行
th元素:定义表头
td元素:定义表格单元
表格默认没有边框,需要边框在table里加: border=“2px”

例如:

	<table border="2px">
		<!-- 第一个通常定义表头 -->
		<tr>
			<th>名字</th>
			<th>年龄</th>
			<th>手机号码</th>
		</tr>
		<tr>
			<td>小米</td>
			<td>23</td>
			<td>15112552344</td>
		</tr>
	</table>

三、HTML块元素和行内元素的使用

1、块元素:div标签

定义和用法：

标签块元素,表示一块内容,div标签可以把文档分割为独立的、不同的部分
可以使用css设置宽高
默认是占用一整快

例如:

	<div style="height:100px;background: red;">哈哈哈哈</div>
	<div style="height:200px;background: yellow;">这是第二块</div>

2、行内元素:span标签,i标签,b标签

定义和用法：

不能设置宽高
设置多个行内元素,一般用于文字显示

例如:

	<span style="height:200px;background: green;width: 500px;">python8888</span>
	<span style="height:200px;background: mediumvioletred;">java7888</span>

3、行内块元素

定义和用法：

将一行内容分为多个快
所有的元素都可以通过css设置为行内块元素
可以看成是一行内分成多个列进显示
通过css设置: display: inline-block

在这里插入图片描述

四、HTML表单的使用

1、 form标签

定义和用法：

form: 标签用于为用户输入创建 HTML 表单,表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等

参数：
1. action: 定义表单数据提交地址（不写默认本地地址)
2. method: 表单提交的方式(常见的有get和post)
例如:
```
	<h1>用户登录</h1>
	<form action="" method="get"></form>
		<div>
			账号:<input type="text">
		</div>
```

form表单中包含的元素：

input标签

input的参数:

value属性: 定义表单元素的值
name属性: 定义表单元素的名称,此名称是提交数据时的键名

input标签的type的属性：

text ------> 定义单行文本输入框

	<div>
		<!-- 文本输入框 -->
		<label for="u">账号:</label>
		<input type="text" name="username" value="henry001" id="u">
	</div>

password ------> 定义密码输入框

	<div>
		<!-- 密码输入框 -->
		密码:<input type="password" name="pwd">
	</div>

radio ------> 定义单选框

	<div>
		<!-- 单选框 -->
		<input type="radio" name="sex" value="nan">男
		<input type="radio" name="sex" value="nu">女
		<input type="radio" name="sex" value="weizhi">未知
	</div>

checkbox ------> 定义复选框

	<div>
		记住密码:<input type="checkbox" name="status" value="1">
	</div>

file ------> 定义上传文件

	<div>
		上传头像:<input type="file" name="pic">
	</div>

date ------> 日期选择器

	<div>
		日期:<input type="date" name="date1">
	</div>

submit ------> 定义提交按钮

	<div>
		<input type="submit">
	</div>

button ------> 定义一个普通按钮

	<div>
		<input type="button" value="普通按钮">
	</div>

reset ------> 定义重置按钮

	<div>
		<input type="reset">
	</div>

image ------> 定义图片作为提交按钮,用src属性定义图片地址

	<div>
		<input type="image" src="./600.jpg">
	</div>

hidden ------> 定义一个隐藏的表单域,用来存储值

label标签

定义和用法:

label 标签为 input 元素定义标注（标记）
label 标签的 for 属性应当与相关元素的 id 属性相同

	<div>
		<!-- 文本输入框 -->
		<label for="u">账号:</label>
		<input type="text" name="username" value="henry001" id="u">
	</div>

textarea标签
定义和用法:
1. textarea标签定义多行的文本输入控件
2. 可以通过 cols 和 rows 属性来规定 textarea 的尺寸
```
	<div>
		个人介绍:
		<textarea cols="30" rows="10"></textarea>
	</div>
```

select标签

定义和用法:

select 元素可创建单选或多选菜单,也可以用于选择数据提交表单

	<div>
		选择城市:
		<select name="city">
			<option value="sh">上海</option>
			<option value="bj">北京</option>
			<option value="sz">深圳</option>
		</select>
	</div>

option标签

定义和用法:

option 元素定义下拉列表中的一个选项。option 元素位于 select 元素内部

	<div>
		选择城市:
		<select name="city">
			<option value="sh">上海</option>
			<option value="bj">北京</option>
			<option value="sz">深圳</option>
		</select>
	</div>

五、iframe的使用

定义和用法:

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

将登陆的页面链接到其他页面

	<div>
		<!-- iframe嵌套 -->
		<iframe src="https://www.baidu.com/" height="1000" width="2000"></iframe>
	</div>