本文详细介绍了HTML的基础概念，包括其作为标记语言的作用、文档结构、语法规范、标签的使用（如字体、标题、图片、链接等）、表格和表单元素，以及常用的input、select和textarea等。
1.什么是HTML
超⽂本标记语⾔(Hyper Text Markup Language)，标准通⽤标记语⾔下的⼀个应⽤。HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔，是⽹⻚制作所必备的。超⽂本标记语⾔：功能⽐⽂本强⼤, 就是指⻚⾯内可以包含图⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。超⽂本标记语⾔: 语法由标签组成
2.标记语言
设计页面，做网页
3.HTML的结构
<!DOCTYPE html> //文档声明
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HEllo</title>
</head> //文档头部配置
<body>
<h1>Hello，world!</h1>
</body> //文档头部配置
</html> //html 根标签4.HTML语法规范
(1) 扩展名的html或者htm （2）html标签不区分大小写 （3）html由头(head)和体(body)组成 （4）标签是可以嵌套的,标签⾥⾯可以放标签 （5）标签⼀般由起始标签开始，结束标签终⽌(成对出现)。但是如果标签不修饰内容，可以在标签⾥结束。
<p id="1">hello</p>
<br/>5.标签属性
（1）属性是属于标签的，修饰标签，让标签有更多的效果 （2）属性⼀般定义在起始标签⾥⾯。
<font color='red'>hello</ font>
（3）属性⼀般以 属性=属性值的形式存在 （4）属性值⼀般⽤ '' 或者“ ” 括起来。 不加引号也是可以的
6.HTML常用的标签
6.1排版标签
(1) 字体标签
<font color="字体颜⾊" size="字体⼤⼩(1~7)"
face="字体⻛格">哈哈</font>(2) 标题标签：<hn>标题<hn> n取值1~6, 1是⼀级标题, 2是⼆级标题...
(3) 段落标签：<p>段落</p>
(4) 粗体标签：<b>内容</b>
(5) 斜体标签：<i>内容</i>
(6) 下划线标签：<hr/>
(7) 换⾏标签：<br/> Ctrl+Shift+/: 注释快捷键
7.图片标签
img标签中的img其实是英⽂image的缩写, img标签的作⽤, 就是告诉浏览器我们需要显示⼀张图⽚
语法:
< img src="图⽚路径" width="宽" height="⾼"
alt="图⽚描述" title="⽤于告诉浏览器, 当⿏标悬停在图
⽚上时, 需要弹出的描述框中显示什么内容"/>
示例代码
<!--掌握: src属性: 图⽚的路径; width属性:指定图
⽚的宽度 ; height属性: 指定图⽚的⾼度;
了解: alt属性: 图⽚的描述(只有图⽚显示错误的
时候才有效果); title属性: ⿏标放上去显示的标题-->
< img src="../img/b.jpg" width="400px"
height="200px" alt="美⼥" title="哈哈哈哈"/>
8.无序列表和有序列表
(1).无序列表
<ul type="类型">
<li>需要显示的条⽬内容</li>
...
</ul>(2).有序列表
<ol type="类型">
<li>需要显示的条⽬内容</li>
...
</ol>(3).超链接标签
⽂本 target取值: _self 当前窗⼝打开【默认】 _blank 新开⼀个窗⼝
9.表格标签
语法
<table border="边框" width="宽度" height="⾼度"
align="居左,中,右" bgcolor="背景⾊">
<tr bgcolor="背景⾊">
<td bgcolor="背景⾊" rowspan='⾏合并'
colspan='列合并'></td>
</tr>
</table>
<form>
//1.input类型
//2.select类型
//3.textarea类型
</form>格子合并口诀
(1) 删除要合并的格⼦, 只留⼀个【最前⾯的那⼀个】. (2) 如果是⾏合并就是设置rowspan, 如果是列合并就设置
colspan, ⼏个合并值就是⼏
9.1 表格内容
常⽤属性
action:提交路径,默认是当前⻚⾯,#
method:提交⽅式,常⽤的是get和post. 默认就是get
get和post区别
1. 携带数据的位置:get是在地址栏后⾯携带的，post是在http协议的请求体中携带的
2. 携带数据的类型:get只能携带字符串不能携带⽂件，post可以携带任意类型的数据，所以如果是⽂件上传那么只能选择使⽤post⽅式
3. 携带数据的⼤⼩:get携带数据的⼤⼩⼀般不超过4kb,post携带数据的⼤⼩是没有限制的(但是⼀般服务器都会做限制)
4. 安全性:post⽐get更安全
9.2 form的常见子标签
input:输⼊域, 通过type属性来指定类型
select :选择列表
textarea：⽂本域
input：输⼊类型
<input type="xxx" />
type 属性,类型是由属性（type）定义的
1. text(默认类型) ⽂本框
2. password 密码框
3. radio 单选框 只有当name属性相同的单选框，才是同⼀组单选框才能够实现单选效果
4. checkbox 复选框 同⼀组多选框，也应该具备相同的name属性
5. file ⽂件选择框
6. date ⽇期选择框
7. hidden 隐藏域：向服务器提交数据，但是不在⻚⾯上展示出来
8. submit 提交按钮：内置提交表单的功能
9. button 普通按钮：不内置任何功能，我们需要在学习js之后再给他绑定点击事件
10. reset重置按钮：内置重置表单的功能
select 选择菜单
option: 选择菜单的选项
<select name="">
<option value="">显示的内容</option>
</select>textarea 文本域
<select name="">
<option value="">显示的内容</option>
</select>
属性： （1） cols列 （2）rows行
9.3 通⽤属性
1.nam
（1）. 如果表单项的数据需要提交给服务器，那么他就必须具备name属性（2）同⼀组单选、多选框需要具备相同的name
2.value
1. 按钮的value属性就是按钮上的⽂字
2. 输⼊框、密码框、⽂件选择框、⽇期选择框等等的value属性的值，就是你所输⼊的值
3. 单选和多选框都需要指定value
设置默认值
(1)text,password:通过value属性
⽤户名: <input type="text" name="username"
value="zs"/>
(2)radio checkbox:通过checked属性
性别: <input type="radio" name="sex" value="1"/>
男
<input type="radio" name="sex" value="0"
checked="checked" />⼥ (3)select :在option上通过selected属性
籍贯: <select name="address">
<option value="sz">深圳</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">
上海</option>
</select><br/>(4)textarea:直接在标签体中写
⾃我介绍: <textarea rows="5" cols="20"
name="introduce">hhh</textarea><br/>9.4 其他属性
readonly属性:是否只读,可以让⽤户不修改这个输⼊框的值,就使⽤value属性设置默认值
disabled属性: 是否可⽤,如果某个输⼊框有disabled那么它的数据不能提交到服务器通常是使⽤在有的⻚⾯中，让⼀些按钮不能点击
placeholder属性: 输⼊框中的提示信息单选和多选框也可以设置默认选中，通过checked属性
option标签通过selected属性设置默认选中
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
