博客介绍了Web标准，包括结构、表现和行为三部分及优点。详细讲解HTML，如文档类型、页面语言、字符集等基础知识，还介绍开发工具、各类标签（文本、图像、表格等）、路径、超链接，重点阐述表单标签，含表单域、控件等内容。
一、认识WEB
1、Web标准
主要有结构、表现、和行为三部分
结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现：表现用于设置网页元素的板式，颜色，大小等外观样式，只要是指CSS
行为：行为是指网页魔性的定义及交互的编写，现阶段主要学的是js
2.Web标准的优点
易于维护：只需更改CSS文件，就可以改变整站的样式
页面响应快：HTML文档体积变小，响应时间短
可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名
二、HTML初识
1、初识HTML
「HTML」(Hyper Text Markup Language):超文本标记语言
所谓超文本，有2层含义：
因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
「HTML骨架格式」
<!-- 页面中最大的标签 根标签 -->
<html>
<!-- 头部标签 -->
<head>
<!-- 标题标签 -->
<title></title>
</head>
<!-- 文档的主体 -->
<body>
</body>
</html>（1）.文档类型<!DOCTYPE >
「文档类型」用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。
这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.
注意：
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
<!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签。
（2）.页面语言lang
lang指定该html标签内容所用的语言
<html lang="en">
en 定义语言为英语 zh-CN定义语言为中文en 定义语言为英语
zh-CN 定义语言为中文
「lang的作用」
根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
（3）字符集
在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset = "UTF-8" />（4）总结
2、开发工具
3、标签
1.文本格式化标签
为文字设置粗体、斜体、下划线等效果
语义 | 标签 |
加粗 | <strong></strong> |
倾斜 | <em><em> |
删除线 | <del></del> |
下划线 | <ins></ins> |
2.图像标签
<img src="pink1.jpg" alt="我是林晓" title="我是林晓" />属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本（当图片不能显示时候显示的文字） |
title | 文本 | 提示文本（鼠标放到图像上，显示的文字） |
4、路径🔥
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录：打开目录文件夹的第一层就是根目录。
- 相对路径
以引用文件所在的位置为参考基础,而建立出的目录路径。这里简单的的说，图片相对于HTML页面的位置
相对路径分类 | 符号 | 说明 |
同一级路径 | 图形文件位于 HTML 文件同一级 如<img src="1.png"> | |
下一级路径 | / | 图形文件位于 HTML 文件下一级 如 <img src="images/1.png"> |
上一级路径 | …/ | 图形文件位于 HTML 文件上一级 如 <img src="../1.png"> |
2.、绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
5、超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>属性 | 作用 |
href | 用于指定链接目标的url地址。必须属性 |
target | 用于指定连接页面的打开方式。_self为默认值，_blank为在新窗口中打开 |
如果 href 里面地址是一个文件或者压缩包，会下载这个文件
<a href="img.zip"></a>5.1、锚点链接
作用：点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为 #名字
找到目标位置标签，里面添加一个 id属性=刚才的名字
<a href = "#two">第二季</a>
<h3 id = "two">第二季介绍</h3>6、特殊字符
重点记住：空格、大于号、小于号 这三个，其余的使用的很少，如果需要使用回头查阅即可
7表格标签
<table align=center border="1" cellpadding="20" cellspacing="0" width="500">7.1、表格结构标签
为了更好的表示表格的语义，可以将表格分割成 表格头部 和表格主体两大部分
用 <thead></thead> 标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行
用<tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
以上标签都是放在<table></table>标签中
7.2、合并单元格
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数"
<td colspan = "2"></td>8列表标签
无序列表：<ul>
有序列表：<ol>
自定义列表：<dl>
标签名 | 定义 | 说明 |
<ul></ul> | 无序列表 | 里面只能包含li，没有顺序。li里面可以包含任何标签 |
<ol></ol> | 有序列表 | 里面只能包含li，有顺序 |
<dl></dl> | 自定义列表 | 里面只能包含dt和dd，dt和dd里面可以放任何标签 |
自定义列表：<dl>
<dt>/dt>
<dt></dt>
</dl>
9、表单标签
一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成
9.1表单域
表单域是一个包含表单元素的区域
<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式，其取值为get或post |
name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
<form action="url地址" method="提交方式" name="表单域的名称">
</form>9.2、表单控件(表单元素)
①input输入表单元素🔥
input输入表单元素
input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)
type 属性的属性值及描述如下：
属性值 | 描述 |
button | 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览"按钮，供文件上传。 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清楚表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：
属性 | 属性值 | 描述 |
name | 由用户自定义 | 定义 input 元素的名称 |
value | 由用户自定义 | 规定 input 元素的值 |
checked | checked | 规定此 input 元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中字符的最大长度 |
name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
name 是表单元素的名字，要求 单选框和复选框要有相同的name值
name若果是单选框必须是同一个name，那么只能选一个
value值是为了提供给后台的，value值与内容相同
checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
②文本框与密码框🔥
type 属性设置为 text 是文本框
type 属性设置为 password 是密码框
<body>
<form>
用户名：<input type="text"> <br/>
密码：<input type="password">
</form>
</body>③单选框和复选框🔥
type 属性设置为 radio 是单选框
type 属性设置为 checkbox 是复选框
name 是表单元素的名字，要求 单选框和复选框要有相同的name值
<form>
用户名：<input type="text"> <br>
密码：<input type="password"> <br>
<!-- radio是单选框，可以多选一 -->
性别：男<input type="radio"> 女 <input type="radio">
<!-- checkbox是多选框，可以多选 -->
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打游戏<input type="checkbox">
</form>④name和value属性🔥
name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，name的主要作用就是用于区别不同的表单
<form>
用户名：<input type="text" value="请输入用户名"> <br>
密码：<input type="password"> <br>
<!-- radio是单选框，可以多选一 -->
<!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
<!-- checkbox是多选框，可以多选 -->
爱好：吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏">
</form>注意：单选框和复选框name必须一致，value可以不一样
⑤checked和maxlength🔥
单选按钮和复选框可以设置checked 属性
当页面打开时候就可以默认选中这个按钮
单选框只能给其中一个加checked，复选框可以多加
maxlength:规定最多输入多少个字符
⑥submit和reset🔥
type 属性设置为submit：提交按钮会把表单数据发送到服务器
``type` 属性设置为reset：重置按钮会清除表单中的所有数据
⑦button和文件域🔥
type 属性设置为button：是一个按钮
type 属性设置为file：是一个文件域，可以上传文件
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域：上传文件使用的 -->
上传头像：<input type="file">⑧label🔥
label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
label标签的 for属性 应当与相关元素的id 属性相同
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />9.3、select下拉表单元素🔥
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我么可以使用<select>标签控件定义下拉列表
下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项。
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>9.4、textarea文本域元素
使用场景：当用户输入内容较多时，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。
用于定义多行文本输入的控件
<textarea>
文本内容
</textarea>cols = “每行中的字符数” ， rows = “显示的函数”，我们在实际开发中不会使用，都是用CSS来改变大小
10.表单元素总结
input 输入表单元素
select 下拉表单元素
textarea 文本域表单元素
这三组表单元素都应该包含在 form 表单域里面，并且有 name 属性
扫一扫
3809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
