前端三大件之HTML篇

Posted 2021-06-19 LL.LEBRON

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端三大件之HTML篇相关的知识，希望对你有一定的参考价值。

文章目录

HTML常用标签

这里推荐B站pink老师的课程我觉得他是B站前端三大件讲的最好的老师点这里😏

html常用标签

HTML基本结构标签

<html> 
    <head>
       <title></title>
    </head>
    <body>
        
    </body>
</html>

其他标签

文档声明标签
<html lang="en"> 语言种类，en定义为英文，zh-CN定义语言为中文
<meta charset="utf-8"> 字符集,规定HTML文档使用哪种字符编码

head标签

title:标题标签，定义显示在网页左上角的标题。
meta：一般定义一些当前网页的特殊属性。通过meta标签的属性定义页面的特征。
1. charset属性
2. name属性
link
script

标题标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>老北京</h1>
		<h2>詹姆斯</h2>
		<h3>戴维斯</h3>
		<h4>小皮皮</h4>
		<h5>哪里多</h5>
		<h6\\>hello world！</h6>
	</body>
</html>

段落和换行标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<p>上面的例子在大多数<br />浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。</p>
		<p>我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。尝试一下</p>
	</body>
</html>

文本格式化标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<!--1.加粗标签-->
		<strong>小皮皮加粗</strong>
		<b>勒布朗哈哈哈</b>
		<!--2.倾斜标签-->
		<em>倾斜小皮皮</em>
		<i>勒布朗倾斜</i>
		<!--3.删除线标签-->
		<del>删除线老北京</del>
		<s>删除美滋滋啊</s>
		<!--4.下划线标签-->
		<ins>湖人总冠军</ins>
		<u>湖人总冠军</u>
		
		<!--注意：以上标签均推荐第一种-->
		
	</body>
</html>

特殊标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<!--<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的，布局-->
		<div>一个div标签单独占一行</div></div>
		<div>大盒子</div></div>
		<span>跨度</span></span>
		<span>小盒子</span></span>
	</body>
</html>

图像标签

在这里插入图片描述

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>图像标签：</h1>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" />
		<h2>alt 替换文本，图像显示不出来的时候用文字替换</h2>
		<img src="cc9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" />
		<h3>title 提示文本</h3>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" title="我是小皮皮啊哈哈!" />
		<h4>width 给图像设定宽度，height 给图像设定高度</h4>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" title="我是小皮皮啊哈哈!" width="500" height="300" />
		<h5>给图像设定边框</h5>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" title="我是小皮皮啊哈哈!" width="500" height="300" border="15" />
		
	</body>
</html>

在这里插入图片描述

超链接标签

在这里插入图片描述

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h4>1.外部链接：</h1>
		<!--target:打开窗口的方式。默认是-self 当前窗口打开页面 _blank 新窗口打开页面-->
		<a href="https://www.bilibili.com/ " target="_blank"> Bilili</a>
		<h4>2.内部链接：</h4>
		<a href="gongshi.html">内部链接</a>
		<h4>3.空链接</h4>
		<a href="#">空连接</a>
		<h4>4.下载链接 文件</h4>
		<a href="images/c9d3deb2880411ebb6edd017c2d2eca2.rar">下载文件</a>
		<h4>5.网页元素的链接</h4>
		<a href="https://www.bilibili.com/"><img src="images/c9d3deb2880411ebb6edd017c2d2eca2.jpg " width="500" height="300"/></a>
	</body> 
</html>

HTML中的特殊字符

在这里插入图片描述

表格标签

表格的基本语法
1.<table></table>是用于定义表格的标签
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
3.<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中-

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>湖人总冠军</title>
		<meta charset="utf-8">
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>
	</body> 
</html>

<!--注释:
	1.<table></table>是用于定义表格的标签
	2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
	3.<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中-->

表头单元格标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>湖人总冠军</title>
		<meta charset="utf-8">
	</head>
	<body>
	   <table>
	   	<tr>
	   		<th> fdfsd</th>
	   	</tr>
	   	<tr>
	   		<td>cdf</td>
	   	</tr>
	   </table>
	</body> 
</html>
<!--<th></th>标签表示HTML表格的表头部分(table head)-->

表格属性

表格标签这部分属性我们实际开发不常用，后面通过CSS来设置
在这里插入图片描述

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>湖人总冠军</title>
		<meta charset="utf-8">
	</head>
	<body>
	   <table align="center" border="1" cellpadding="12" cellspacing="12" width="12">
	   	<tr><th> 湖人总冠军</th><th>我去</th></tr>
	   	<tr><td>小皮皮哈哈哈</td><td>tql</td></tr>
	   </table>
	</body> 
</html>

表格结构标签
在这里插入图片描述

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>湖人总冠军</title>
		<meta charset="utf-8">
	</head>
	<body>
	   <table border="1" cellspacing="1" cellpadding="3">
		<thead>
			<tr>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
			</tr>
		</tbody>
	   </table>
	</body> 
</html>

合并单元格
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"

列表标签

无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

<ul>中只能嵌套<li>，直接在<ul>标签中输入嵌套标签或者文字是不允许的。

<li>相当于一个容器，可以容纳所有元素。

基本语法格式：
```
<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>湖人总冠军</title>
		<meta charset="utf-8">
	</head>
	<body>
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>
	</body> 
</html>
```

有序列表

在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并使用<li>标签来定义列表项。

<ol>中只能嵌套<li>，直接在<ol>标签中输入嵌套标签或者文字是不允许的。

<li>相当于一个容器，可以容纳所有元素。

基本语法格式：

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>湖人总冠军</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>小皮皮哈哈哈</h1>
		<ol>
			<li>列表项1</li〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形
 〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景
 VS Code配置snippets代码片段快速生成html模板，提高前端编写效率
 Web应用的组件化进阶篇
 [vscode]--HTML代码片段（基础版，reactvuejquery）
 markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发