HTML基础总结(笔记)

最新推荐文章于 2022-06-04 14:09:40 发布

ly86501814

最新推荐文章于 2022-06-04 14:09:40 发布

阅读量395

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/ly86501814/article/details/106278467

版权

什么是HTML

HTML(Hypertext Markup Language)，超文本标记语言
HTML是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点和存在媒体文件（也就是超越了普通文本文件）。

HTML发展历史

HTML于1990年出现，web之父 Tim Berners-Lee 发布了《HTML标签》的论文，借用SGML的标记语法。
IETF（互联网工程任务组）推出HTML2.0，并且在逐步的完善过程，不同的组织对于HTML的语法标
记等，都有不同的处理模式，出现百家争鸣的现象。
之后，W3C 组织代替IETF组织成为了新的HTML标准，后续HTML有了迅速的发展。至1999年，HTML4.01标准的发布，成为了HTML发展非常重要的一个里程碑，在web中大量使用，沿用至今。
此后，W3C组织发布XHTML1.0，Opera、Apple、Mozilla自发组织WAHTWG组织，开始就HTML的新标准进行自行维护，开始研发HTML5的语法标准。
W3C在XHTML的道路上坎坷不断，终于在2010年前后，W3C颁布发表停止了XHTML2的继续维护。开始以WAHTWG的研究为基础，开发研发HTML 5语法标准。
发展至今，HTML 5已经被大部分浏览器兼容，并且大量应用于web网站中。

开发环境

前期使用记事本工具（如：EditPlus、sublime、vscode）就足够了，可以方便新手练习。
主流的编程IDE绝大多数都是支持HTML的开发的，如：eclipse、IntelliJ IDEA、pycharm等，当然也有专门前端开发的IDE–WebStorm、Hbuilder等。

运行环境

运行环境选择主流的浏览器。建议使用Google的Chrome浏览器，也可以使用irefox浏览器、Edge浏览器。

HTML的常用标签

h1 ~ h6：标题标签

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

在这里插入图片描述
p：段落标签
b/strong：加粗效果
i/em：加斜
u：下划线
del：删除

<p>
	5月6日，<i>中国科学家</i>在<em>国际顶级学术期刊</em><strong>《科学》</strong>（Science）上率先发表了<b>新冠病毒疫苗</b>的<u>动物实验</u>结果。
</p>
<p>
	由于新病例的迅速增加，2019年冠状病毒病（<del>COVID-19</del>）很快引起了全球关注，病原体被鉴定为SARS-CoV-2。由于该病毒的新颖性，目前没有SARS-CoV-2特异的治疗方法或疫苗。因此，迫切需要快速开发针对SARS-CoV-2的有效疫苗。
</p>

在这里插入图片描述
a：实现了超链接，href 属性用来明确链接的目标文件，target 属性用来明确目标文件的打开方
式，target="_blank"时表示在新窗口中打开目标文件，省略时表示在原窗口中打开目标文件。

div：标准块标签，主要用来布局
span：标准行内标签，主要用来修饰文本

行内标签：b、i、u、del这些标签，只占据内容部分，没有宽高，标准行内标签 - span
块标签：p、h1都是块标签，占据一行，即便是内容占不满如标签块标签 - div

br：换行标签
hr：分割线标签

pre：原样输出标签
sup：指数显示，上标
sub：下标显示

注：h5新增了语义化标签，列举如下了几个常用的语义化标签
article：文章
aside：边缘部分
header：页面的顶部内容
section：正文部分
footer：页面尾部
这些语义化标签本质上就是div标签，只是声明的标签名称不一样，这是为了对应的标签干对应的事。

多媒体标签

在网页中插入图片，可以使用img标签
img标签用来引入图片到页面中，src是一个必须的属性，该属性表示图片的地址
如下面的就是表示在当前文件夹下有个img文件夹，里面有个图片，名称叫做timg.jpg，这种叫做相对路径寻找法(推荐使用)

<img src="img/timg.jpg">

在这里插入图片描述

路径是网络路径也可以

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3817047296,2020815373&fm=26&gp=0.jpg">

在HTML5之前，要在页面上播放视频或者音频麻烦，因为不同的浏览器对于这个支持不同，所以在
h5之后，w3c专门为HTML5提供了两个标签，视频标签video和音频标签audio。src属性用法与img标签一样。

<h1>视频标签</h1>
	<video src="img\06.常见的标签02.mp4" controls="1" width="500px;"></video>
<h2>音频标签</h2>
	<audio src="img/Ken Arai - NEXT TO YOU.mp3" controls autoplay muted></audio>

在这里插入图片描述

表格标签

表格在网页制作中主要的作用是用来描述具有二维结构的数据。包括的标签有table、thead、
tbody、tfoot、tr、td

table标签：用于定义一个表格
thead标签：定义头
tr标签：用于定义一行
td标签：用于定义一列。td也叫做单元格，必须放在tr中
tbody元素：定义主干
tfoot元素：定义尾

<table border="1">
		<thead>
			<td>姓名</td>
			<td>年龄</td>
			<td>电话</td>
		</thead>
		<tbody>
			<tr>
				<td>小明</td>
				<td>20</td>
				<td>231351646</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>21</td>
				<td>2213216511</td>
			</tr>
			<tr>
				<td>小强</td>
				<td>19</td>
				<td>12121511812</td>
			</tr>
		</tbody>
	</table>

在这里插入图片描述

列表标签

有序列表 - ol
无序列表 - ul

<h4>有序列表</h4>
	<ol>
		<li>小红</li>
		<li>小明</li>
		<li>小强</li>
		<li>小光</li>
	</ol>
	<h4>无序列表</h4>
	<ul>
		<li>小红</li>
		<li>小明</li>
		<li>小强</li>
		<li>小光</li>
	</ul>

在这里插入图片描述

表单标签

之前学习的所有标签都是用来展示数据的，但是我们页面有时候也需要和后端程序进行交互，
这样就需要一些能够交互的标签，常见可以交互的标签有我们之前学习的a标签，当然最主要的交
互标签则是表单标签。表单是网页制作中非常重要的内容，用户通过表单可以在网页中录入数据，
例如登录，注册用户等。

表单是用form标签来定义的。f
form标签类似于一个容器标签，3 个重要的属性：
action 文件路径表单提交后，处理表单的文件
method 请求方式 method 属性用来明确表单的提交方式
name 字符串表单的名称

input标签素，type 是非常重要的属性，type 不同的值表现为不同的元素类型：
在这里插入图片描述

<h1>用户注册</h1>
	<form action="#" method="get">
	<div>
		<label for="username">用户名称</label>
		<input type="text" name="username" value="">
	</div>
	<div>
		<label for="passwd">用户密码</label>
		<input type="password" name="passwd"> 
	</div>
	<div>
		<label for="gender">用户性别</label>
		<input type="radio" name="gender" value="male" checked /> 男
  		<input type="radio" name="gender" value="female" /> 女
	</div>
	<div>
		<label for="file">用户头像</label>
		<input type="file" name="file">
	</div>
	<div>
		<label for="favorite">用户爱好</label>
		<input type="checkbox" name="fav" value="王者荣耀">王者荣耀
		<input type="checkbox" name="fav" value="英雄联盟">英雄联盟
		<input type="checkbox" name="fav" value="和平精英">和平精英
		<input type="checkbox" name="fav" value="绝地求生">绝地求生
	</div>
	<div>
		<label for="address">用户地址</label>
		<select name="address" id="addr">
			<option value="">西安</option>
			<option value="">兰州</option>
			<option value="">北京</option>
			<option value="">银川</option>
			<option value="">郑州</option>
		</select>
	</div>
	<div>
		<label for="proposal">用户建议</label><br/>
		<textarea name="proposal" id="suggest" cols="50" rows="20"></textarea>
	</div>
	<div>
		<input type="submit" value="注册">
		<input type="reset" value="重置">
	</div>
	</form>

在这里插入图片描述

ly86501814

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础总结(笔记)

什么是HTMLHTML(Hypertext Markup Language)，超文本标记语言HTML是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点和存在媒体文件（也就是超越了普通文本文件）。HTML发展历史HTML于1990年出现，web之父 Tim Berners-Lee 发布了《HTML标签》的论文，借用SGML的标记语法。IETF（互联网工程任务组）推出HTML2.0，并且在逐步的完善过
复制链接

扫一扫