HTML5基础学习

最新推荐文章于 2022-02-26 20:51:42 发布

MeatLoveJK

最新推荐文章于 2022-02-26 20:51:42 发布

阅读量257

点赞数 1

分类专栏：学习文章标签： HTML5

本文链接：https://blog.csdn.net/meatlovejk/article/details/97274188

版权

学习专栏收录该内容

45 篇文章 1 订阅

订阅专栏

一、什么是HTML
1.HTML是用来描述网页的一种语言
2.HTML：超文本标记语言（注：不是编程语言）

二、HTML5的自动生成格式解析

<!DOCTYPE html>  声明为HTML5文档
<html>元素是 HTML 页面的根元素
<head>元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<meta charset="UTF-8">
<title></title>设置文档（网页）的标题
</head>
<body></body>表示了文档（网页）的可见内容
</html>

三、HTML标签
1.HTML标签是由尖括号包起来的关键字，如< html>
2.HTML标签通常是成对出现的，如< h1>< /h1>
< h1>:开始标签 -->开放标签
< h2>:结束标签 -->闭合标签
<标签>内容</标签>
HTML标签==HTML元素

四、HTML元素
1.空元素：没有内容的HTML元素是空HTML元素。
但是语法规定所有的元素必须有始有终
如：
空元素，表示换行，执行后关闭。
2.HTML标签对大小写不敏感
3.属性：可以在开始标签里面设置标签的属性如
< p name=“xx” id=“55”>
属性值通常使用双引号括起来。

五、HTML标题
使用< h1>~< h6>
1~6表示大小递减

六、HTML连接
使用HTML元素< a>

<a href="../img/12.jpg/" target="_blank" >
			<p>这是一个奥特曼图片</p>
		</a>
		href 表示将去的连接
		target = "_blank"表示开启一个新页面

注：一定要在连接后添加 / !这样提高效率

六、HTML图片
定义图像的语法是：
< img src="…/img/apple.png/" alt=“这是一个图片” />
URL 指存储图像的位置。
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
表示，若图片失效则使用文字替换。
HTML 图像- 设置图像的高度与宽度
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
< img src="…/img/apple.png" alt=“这是一个图片” width=“304” height=“228”/>

七、HTML表格

//<table>定义了一张表
//border属性是显示边框  width是宽度和浏览器宽度一致
<table border="1" width="100%">
//<thead> <th>用来表示这是表头
		<thead align="center">
			<th>id</th>
			<th>姓名</th>
		</thead>
	//tbody表示这是表的数据体	
		<tbody align="center">
		//tr用来控制行
			<tr>
			//td用来控制数据数量---列
				<td>1</td>
				<td>小周</td>
			</tr>
		</tbody>
		
	</table>

表格的表头使用 < thead> 和< th> 标签进行定义。
表格的内容用tbody和tr ,td来定义

表头或数据的属性
跨行：colspan = “2”;表示该数据可以占两列
跨列：rowspan = “2”;表示该数据可以占两行
这些都是HTML标签的属性。

表的属性：
Cellpadding 单元格内容与其边框之间的间距
Cellspacing 单元格之间的距离

八、HTML列表
1.HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用

标签
< ul>
< li>Coffee< /li>
< li>Milk< /li>
< /ul>

2.HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。
列表项使用数字来标记。
< ol>
< li>Coffee< /li>
< li>Milk< /li>
< /ol>

九、HTML的内联元素和块级元素
1.块级元素：
在浏览器显示的时候会以新行开始。
2.内联元素
在浏览器显示时不会以新行开始。

< div>元素，没有特别的用法，通常配和CSS来分配属性，控制格式
< span>元素，没有特别的用法，通常作为文本容器，配合input使用

十、表单元素和表单控件
一张表单对应一个对象，我们input元素后跟的值就是要赋给那个对象的。
比如男
就是将名为sex的属性赋值为男
1.以< from>元素开头
案例一

<span>姓名</span>
<input type="text" placeholder="请输入名字"/>

样式：
在这里插入图片描述
案例二

案列三

案例四

案例五

案例六
按钮

十一、内嵌框架IFrame
语法：
< iframe src=“URL”>< /iframe>
URL代表另一个网页的链接。
使用 ifram的width和height属性可以控制另外窗口的格式。
使用属性frameborder="0"可以移除边框

总结：
空标签：
定义换行

-

定义标题定义链接 --target属性：打开新窗口注：始终添加正斜杠空标签：

table的属性：
border,cellpadding:内容与边框距离
cellspacing：单元格距离

无序列表
1. 有序列表
2. 列表元素

块级元素：

,
,

,,
,
,
(画一条横线) 内联元素: (加粗),
,,,

表单：

表单内容各种表单 radio单选 checkbox复选 selection下拉 text文本 password密码

iframe框架

表示内部显示新的网页

MeatLoveJK

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础学习

一、什么是HTML1.HTML是用来描述网页的一种语言2.HTML：超文本标记语言（注：不是编程语言）二、HTML5的自动生成格式解析<!DOCTYPE html> 声明为HTML5文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码...
复制链接

扫一扫