前端开发学习笔记（一）：HTML

最新推荐文章于 2024-04-06 15:57:03 发布

熊宝宝爱学习

最新推荐文章于 2024-04-06 15:57:03 发布

阅读量5.6k

点赞数 3

分类专栏：项目开发前端文章标签： html5

本文链接：https://blog.csdn.net/sinat_36831051/article/details/107940840

版权

项目开发同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

前端开发学习笔记（一）：HTML

文章目录

前端开发学习笔记（一）：HTML

HTML+CSS+javascript前端开发：

HTML 定义了网页的内容；
CSS 描述了网页的布局；
JavaScript 网页的行为。

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

HTML是一种标识性语言，不是编程语言。
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

一、 HTML的文档结构

 <html> 与 </html> 之间的文本描述网页，定义整个HTML文档。
 <head> 与 </head> 之间的文本主要完成网页的相关设置。
 <body> 与 </body> 之间的文本是可见的页面内容，定义HTML文档的主体。

基本的 HTML 标签

<HTML>
<!--1. 头部，主要完成网页的相关设置-->
<head>
 <!--meta：元，主要用来完成对应设置的-->
	<meta charset="ustf-8"> <!--汉字编码-->
	<meta name="keywords" content=""> <!--设置网站的搜索关键词-->
	<meta name="description" content=""> <!--设置网站的描述内容-->
	<title>...</title> <!--标题-->
</head> 
<!--2. 主体部分-->			
<body>...</body>	
</HTML>

<!-- 这一行代码的意思是下面的文档标签将以html5规范去解析-->
<!DOCTYPE html> 
<HTML>
<!--1. 头部，主要完成网页的相关设置-->
<head>  
	<!-- meta：元，主要用来完成对应设置的 -->
	<meta charset="ustf-8"> 					<!--汉字编码-->
	<meta name="keywords" content=""> 			<!--设置网站的搜索关键词-->
	<meta name="description" content=""> 		<!--设置网站的描述内容-->
	<title>我的网页</title> <!--标题-->
	<link rel="shortcut icon" href="../img/1.jpg">	<!--设置网站小图标-->
		
	<style type="text/css">
	/*书写样式*/
	</style>
	<link rel="stylesheet"  href="../css/style.css"/>	<!--用来引入外部样式文件-->
</head>
	
<!--2.主体部分-->
<body>
	<!--1.div：用来布局的，没有具体含义，可理解为层。-->
	<div>
		abc
		<div>
			def
		</div>
	</div>
	
	<!--2.hx：标题，从1级到6级，会自动加粗，有默认字体字号-->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	
	<!--3.p：表示一个完整的段落，相当于一个回车。-->
	<p>这是第一段。</p>
	<p>这是第二段</p>
	
	<!--4.br：换行符，单标签-->
	<p>这是第一行，<br>这是第二行。</p>
	
	<!--5.hr：生成一个水平线，起分隔作用，单标签-->
	<hr width="70%" align="center" color="red" height="2px">
	
	<!--6.a：超链接，实现连接跳转。target:_blank/_self/_parent/_top-->
	<a href="https://www.baidu.com" title="百度">百度</a>
	<a href="1 blank" target="_blank">blank</a>				<!--新页面跳转-->
	<a href="1 blank" target="_self">self</a>				<!--本页面跳转-->
	
	<!--7.img：加载图片。alt：图片加载不成功时，显示其内容，否则不显示。-->
	<img src="../img/10.jpg" title="图1" alt="图1">
	
	<!--8.span：作用与div一样，用来行列布局。不同点：div会单独占一行而span不会，span用于行内布局，没实际意义-->
	<div> div1</div>
	<div> div2</div>
	
	<span>span1</span>
	<span>span2</span>
	<!--9.ul/ol：列表。ul无序列表，ol有序列表。列表内容都用li标签。-->
	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
	<ol>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ol>
</body>
	
<script type="text/javascript">
	# 脚本写这里
</script>

</HTML>

单标签和双标签：
单标签有：

<br/> <hr/> <img/> <input/> <link/> <meta/>

行级标签与块级标签：
在这里插入图片描述

1. 块级标签：

div、p、h1-h6、ul、ol、pre、table、address

行级标签：
```
span a b strong i em sup sub
```

二、标签属性

2.1. 标签属性

<body>
	<!-- 标签属性 
		1.通常由属性名=“属性值”组成；
		2.起到附加信息的作用；
		3.不是所有标签都有属性，比如br标签。-->
	<p title="段落" class="content" id="content">标签属性展示</p>
</body>

在这里插入图片描述
使用小写标签，使用小写属性，始终为属性值加引号。
style 属性的作用：
1. 提供了一种改变所有 HTML 元素的样式的通用方法。
2. 可以使用CSS文件进行网页的样式定义。

2.2. 文字格式化标签

2.3. html实体转义

在这里插入图片描述

三. table表格标签

3.1. table表格标签

必须是先行后列
在这里插入图片描述

	<body>
		<table border="1" width="400" cellspacing="0" cellpadding="10" align="center">
			<tr>
				<th>表头1</th>
				<th>表头2</th>
				<th>表头3</th>
			</tr>
			<tr>
				<td rowspan="2" align="center">(0,0)</td>
				<td>(0,1)</td>
				<td rowspan="2" align="center" >(0,2)</td>
			</tr> 				<!-- 第1行 -->
			<tr>
				<!-- <td>(1,0)</td> -->
				<td>(1,1)</td>
				<!-- <td>(1,2)</td> -->
			</tr> 				<!-- 第2行 -->
		</table>	
	</body>