HTML

最新推荐文章于 2024-07-02 22:34:09 发布

静安书以沫

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/whatname123/article/details/116242353

前端专栏收录该内容

7 篇文章

订阅专栏

什么是HTML

HTML : 超文本标记语言(hypertext markup language)
超文本：在网页中显示的内容不仅局限于文本，还可以显示图片、视频、音频、超链接、列表等内容！
标记：是html语言的特点，核心表示符号就是<>，而<>在html语言中的内容呈现就是标签！

前端的技术俗称三剑客：HTML、CSS、JavaScript

HTML构成了网页的内容与结构
CSS构成了网页的外观及样式, 即给页面化妆
JavaScript构成了网页的行为及动作

网页根据内容分为：静态网页、动态网页。
静态网页：编写之后网页内容和显示效果不再改变；
动态网页：根据不同的情况展示不同的内容；

静态网页与动态网页的区别是什么？
静态与动态的区别不是由是否存在动态效果、动画效果决定的！
而是由数据决定的！一个网站是否能够动态的显示数据、动态的进行更新才是衡量动态网页的标准！

HTML语言的特点

1、HTML文件扩展名为 *.html 或者 *.htm, 在浏览器中运行；
2、HTML结构分为两大部分：头部和主体部分；
3、HTML标签都是预先定义好的，我们只需要了解每一个标签的功能即可；
4、标签名称不区分大小写，语法不严谨，一般使用小写；
5、标签在html中有两种：双标签(围堵标签)、单标签(自闭和标签)
双标签一对，有开标签、关标签组成，其中，关标签内要有斜杠！一对标签中间位置就是标签生效的范围
单标签没有开关之分，但是规范下，也要书写斜杠！
6、HTML文档是一个树状结构，有根标签但是不唯一；
7、HTML标签要正确嵌套。

HTML中的常用标签

学习标签，学哪些东西？
标签名称、作用用途、标签属性特点、双单区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
	</head>
	<body>
		<!--1、标题标签  双标签 h1-h6 -->		
			
		<!--特点：文本自带加粗效果，自成一行 h1字体最大
		7以后是正常文字大x小，无加粗，字号同h4-->
		<h1>标题1</h1>
		<h6>标题6</h6>
		<h7>标题7</h7>
		
		<!--2、段落标签，p-->
		<!--特点：用于表示网页中的正文内容，双标签。
		不会像标题标签一样有自带的加粗效果，
		就是正常的文本显示！p标签中的数据自成一段, 
		段落与段落之间有间隔-->
		<p>我家...</p>
		<p>不必说...</p>
		<!--3、换行标签，br-->
		<br />
		<!--4、分割线标签，hr-->
		<hr />
		<!--5、字体标签，font-->
		<!--特点：用于承载不同样式的文本，双标签。-->
		<font></font>
		<!--7. 图片标签，img-->
		<!--标签属性:-->
		<!--
			src：图片的路径，可以是相对路径，也可以是绝对路径
			width：图片的宽度
			height：图片的高度
			width与height同时给定，按照给定的值显示，如果只给一边另一边也会等比缩放！
			alt：图片由于某些原因加载失败时，为了增强用户体验，显示的占位文本
		-->
		<img src="img/1.jpg" width="150px" height="100px" alt="图片未加载" title="鼠标悬停"/>
		<!--8. 超链接标签，a-->
		<!--超链接标签点击完成后，可以进行路径跳转！-->
		<!--
			href：超链接的链接地址，可以是相对路径，也可以是绝对路径，但是注意绝对路径在书写时出了域名还需要加上网络传输协议！	
			target：链接的打开方式、位置，默认值为_self刷新自身，我们改值为_blank之后，可以让链接在新窗口打开！
		-->
		<a href="http://www.baidu.com">百度</a>
		<!--9. 列表：有序列表、无序列表-->
		<!--
			有序列表：ol li
			无序列表：ul li
		-->
		<!--
			无序列表ul的type属性值：默认为disc小黑点，circle圆圈，square黑方块
			有序列表ol的type属性值：默认为1代表有序数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字！
		-->
		<ol type="a">
			<li>1</li>
			<li>1</li>
			<li>1</li>
		</ol>
		<ul type="circle">
			<li>1</li>
			<li>1</li>
			<li>1</li>
		</ul>
		<!--10. 实体字符还有html注释-->
		<!--html注释的形式：<!-- 注释内容 -->-->
		<!--11. 特殊字符-->
		<!--
			空格：&nbsp;  小于符号：&lt;  大于符号：&gt;  双引号：&quot;   版权符号：&copy;
		-->
		&nbsp;&lt;&gt;&quot;&copy;
		<!--12、表格table->
		<!--
			最外层是table
			表格标题caption
			行tr标签
			单元格：th表头单元格、td内容单元格
			th表头单元格默认字体加粗以及字体居中！
		-->
		<table border="2px" width="300px" height="200px" cellspacing="0" cellpadding="5px"
			align="center" bgcolor="bisque">
			<tr>
				<th>作者</th>
				<th>作品</th>
			</tr>
			<tr align="center" bgcolor="aqua">
				<td>曹雪芹</td>
				<td>红楼梦</td>
			</tr>
			<tr>
				<td bgcolor="green">路遥</td>
				<td align="center">平凡的生活</td>
			</tr>
		</table>

	</body>
</html>

表格属性的解析：

border：设置给table标签，让表格产生边框，并让单元格之间有分割线！必须存在的属性，可以不给值！
cellspacing：设置给table标签，单元格与单元格之间的间隙
cellpadding：设置给table标签，单元格与自身内容之间的间隙
width：设置给table表格整体变宽，不能设置给tr，设置给th或者td后，此单元格所在这一列的整体宽度都会发生变化，因为表格默认是对齐的！
height：设置给table表格整体变高，设置给tr这一行变高，设置给th或者td后，此单元格所在这一行整体高度都会发生变化，因为表格默认是对齐的！
align：表示横向的水平位置,取值left、center、right。
设置给table影响表格在页面的整体位置
设置给tr影响这一行中所有单元格中内容的位置
设置给th或者td只影响这个单元格中内容的位置
bgcolor：颜色的英文单词、十六进制代码。
设置给table整个表格变色
设置给tr这一行变色
设置给th或者td此单元格变色
colspan：列合并，设置给单元格,设置给th或者td，然后从当前这一个单元格开始合并给定数量的单元格！为了保证合并完成后表格的对齐，需要将当前这个单元格所在这一行后面合并的单元格删除！
rowspan：行合并，设置给单元格, th或者td，然后从当前这一个单元格开始合并给定数量的单元格！为了保证合并完成后表格的对齐，需要将当前这个单元格所在这一列同一位置上合并的单元格删除！