【HTML 5】基础学习小结

Yannick_H

已于 2022-04-22 00:39:45 修改

阅读量485

点赞数

分类专栏： Y-Y滴前端日志基本概念（笔记）文章标签： html5

于 2022-04-14 17:45:38 首次发布

本文链接：https://blog.csdn.net/yannick_h/article/details/124174860

版权

Y-Y滴前端日志同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

基本概念（笔记）

31 篇文章 0 订阅

订阅专栏

本文概述了HTML5的基础概念，如http和https协议，以及关键元素如HTML文件结构、HTML5新增特性（如语义标签和表单控件）。深入讲解了表格的创建、属性设置和表格布局，还有表单的设计与表单控件的使用。

摘要由CSDN通过智能技术生成

一、web的基本概念

1.http协议：超文本传输控制协议

2.https协议：SSL+https协议

6.语义标签：表示某种含义，没有具体的显示效果

一、web的基本概念

1.http协议：超文本传输控制协议

2.https协议：SSL+https协议

3.web页面的组成

html	超文本标签语言用于显示内容，搭建网页的结构
CSS	层叠样式表，用于美化页面
Javascript（js）	脚本语言，用于页面的行为（表单验证，用户的交互）

二、HTML5（H5）

HTML5是HTML的版本号，是HTML前期版本的升级。

1.web页面的开发环境

（1）普通的文本编辑器

（2）vscode软件

2.HTML文件的组成：扩展名是HTML

<！DOCTYPE html>---支持html5的html文件

<html lang="en"---页面的起始根标签

<head>---页面头部信息的起始标签

<mealcharset="UTF-8">

<meal name="viewport" content= "width=device-width,initial-scale=1.0">

<title>Document</title>---网页的标题

</head>---页面头部信息的结束标签

<body>---页面的主体

页面内容

</body>

</html>---页面结束的根标签

3.标签

双标签	<起始标签>内容</结束标签>
单标签	<标签名/>

4.常用标签

（1）常用标签

<hr/>	水平分割线
<br/>	换行
<hn></hn>	标题标签（n取值为1-6，数字越大字体越小）
<p></p>	段落标签，会自动换行
<span></span>	块级标签，不会自动换行，小盒子，跨距
<div></div>	块级标签，独占一行，大盒子
<font></font>	字体标签，设置字体的字型、字号、颜色

（2）文本格式化标签

斜体字体	<i>内容</i>或者<em>内容</em>
字体加粗	<b>内容</b>或者<strong>内容<strong>
下划线	<u>内容</u>或者<ins>内容</ins>
删除线	<s>内容</s>或者<del>内容</del>

（3）特殊字符

空格	＆nbsp	版权符号	＆copy
乘号	＆times	注册商标	＆reg
除号	＆divide	摄氏温度	＆deg
大于号	＆gt	正负号	＆plusmn
小于号	＆lt	注释符	<！--注释内容---> ctrl+/

（4）图像格式

A.图像格式：

.jpg	体积大，不利于网络传输（256）种真色彩
.png	体积小，支持透明，利于网络传输
.gif	小动画，支持透明，体积小，利于网络传输

B.图像标签

<body>

<img src="图片路径" alt="提示信息">

</body>

图像标签属性

src 表示图像的全路径（属性） alt 当图像加载异常时，给出的提示信息（替换文本） width 图像的宽度 height 图像的高度 border 给图像设置边框 title 提示文本，鼠标放在图片上显示的文字

C.路径

绝对路径	从根目录开始的路径
相对路径	从当前目录开始的路径
.	代表当前目录
..	代表当前目录的上一级路径

（10）列表标签

A.无序列表

<ul type =“项目符号的类型”>---disc、circle、square

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ul>

B.有序列表

<ol type =“项目符号的类型” start =“项目符号的起始值>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ol>

C.自定义列表

<dl>

<dt>名词1</dt>

<dd>名词1解释1</dd>

<dd>名词1解释2</dd>

</dl>

（11）超链接

<body>

<a href="链接路径" >

文本/图像/多媒体

</a>

</body>

<a>属性：target =“blank”打开新页面

＃：空链接，代表某链接

＃+id：锚点链接（定位）

<body>

<a href="#文本">文本</a>

<p id="文本">内容</p>

</body>

5.标签的属性

放在起始标签中，以键值对“键=值”的方式出现

6.颜色的使用

（1）使用颜色名：red、blue、green

（2）十六进制颜色：＃rrggbb（＃rgb），每位上取值最大是f

（3）颜色函数：rgb（r，g，b） rgba（r，g，b，a） a代表透明度，取值范围区间[0,1]

7.设置页面的背景色或者背景图像

背景图像	<body background =“图像的全路径名称”>
背景色	<body bgcolor =“颜色值”>

8.音频标签

<audio src =“音频的路径” controls autoplay width =“宽度” height =“高度”>

<source>

</audio>

9.视频标签

<video src =“视频的路径” controls autopaly width =“宽度” height =“高度”>

</video>

三、表格

<table>

<tr>---表示行

<th></th>---表格的列标题

</tr>

<tr>---表示行

<td></td>---表示单元格

</tr>

</table>

1.表格的属性

border	边框线，默认为0	background	背景图像
width	宽度	bgcolor	表格背景色
height	高度	cellspacing	单元格之间的距离
align	表格在网页中的对齐方式（不包括表格内容）	cellpadding	单元格边线与单元格内容之间的距离（表格内边距）

2.<tr>标签的属性

height

表示行高

bgcolor

表格背景色

background

背景图像

align

水平对齐方式

（left、center、right）

valign

垂直对齐方式

（top、center、bottom）

3.<td>标签的属性

height

表示行高

bgcolor

表格背景色

background

背景图像

weight

单元格宽度

valign

垂直对齐方式

（top、center、bottom）

align

水平对齐方式

（left、center、right）

4.合并单元格的属性

跨列合并	colspan =“跨的列数”
跨行合并	rowspan =“跨的行数”

5.表格标题

<caption>表格标题</caption>

6.语义标签：表示某种含义，没有具体的显示效果

<thead></thead>	表格头部
<tbody></tbody>	表格主体
<tfoot></tfoot>	表格页脚

ps：一个表格只能定义一对<thead></thead>、一对<tfoot></tfoot>、多对<tbody></tbody>

必须按<thead></thead><tfoot></tfoot><tbody></tbody>顺序

四、表单

1.什么是表单

（1）用于收集用户的信息（登陆、调查问卷、注册等）

（2）将信息发送给后台服务器

2.表单的组成

<form name= “名称” action = “远程服务器的URL” method =“提交信息方式”>

表单控件

</form>

3.表单控件的种类

（1）表单控件属性

name	控件的名称，可通过名称来获得控件中的值	placeholder	提示信息，用户输入时会自动消失
id	控件中的唯一标识，不能重复	readonly	只读属性，不能修改
value	控件中的值	disabled	控件是否可用
size	标识文本框的宽度	maxlength	可用输入的最多字符数
checked	用于单、复选按钮，表示默认按钮被选中

（2）input控件

A.单行文本框

<input type =“text” name =username” id =“username” />

B.密码框

<input type =“password” />

C.单选按钮

<input type =“radio” />

加name =“ ”表示互斥

D.数字框

<input type =“number” />

加min =“ ”、max=“ ”表示输入区间

E.日期时间

<input type =“datetime-local” />

日期

<input type =“date” />

F.复选框

<input type =“checkbox” />

加name =“ ”表示为一组、checked表示默认选中

G.颜色框

<input type="color" />

加name =“ ”表示提交选值

H.文件选择框

<input type="file" />

I.隐藏文本框：可向服务器传递数据，页面不显示该数据

<input type="hidden" />

J.电子邮箱

<input type="email" />

K.提交按钮：将表单控件的值提交给“action”属性给定的远程服务器

<input type="submit"  value="按钮上的文字" />

或者

<button type="submit">按钮文字</button>

L.重置按钮：将表单控件中的值恢复到初始状态

<input type="reset"  value="按钮上的文字" />

或者

<button type="reset">按钮文字</button>

N.普通按钮

<input type="button"  value="按钮上的文字" />

或者

<button type="button">按钮文字</button>

（3）textarea控件：文本区，可以编辑多行、多列数据

<textarea cols="列数" rows="行数">

</textarea>

（4）select控件：下拉列表框

<select>

<option value="值">列表文字</option>

</select>

加multiple属性表示多选，select =“select”属性表示默认选定

五、HTML5的标签

1.语义标签

语义标签只是表达某种含义，没有特殊的显示效果

<header>头部</header>	表示页面的头部信息
<footer>尾部</footer>	表示页面的尾部信息
<nav>导航栏</nav>	表示页面的导航部分
<section>具体的内容</section>	表示页面主体内容
<article>文章</article>
<aside>内容的侧边栏</aside>

2.新增的表单控件属性

placeholder	提示信息，提示用户如何输入，不是控件的value属性
required	表示必须要填的信息，使用该属性的控件，要放在<form>中，当编辑<form>中的submit按钮时，该属性才起作用
autofocus	自动获得鼠标焦点，一个页面只能有一个控件具有该属性
pattern	对用户输入的值进行验证，对应的是正则表达式
multiple	表示可以输入多个，常用于email控件
movalidate	取消验证，required属性失效
maxlength	输入的最大长度
minlength	输入的最小长度
max	最大值
min	最小值
step	数据间隔