HTML超文本标记语言概述
一、HTML概述
1、 HTMl是什么
HTML（Hyper Text Markup Language）超文本标记语言
超文本： 超级文本 、超过文本（其中可以包括除了文本以外的其他数据，例如图片，音频、视频等各种格式）
标记：也叫标签、元素、节点等、就是用尖括号（<>）扣起来的一组内容：例如
等
HTML是最基础的开发网页的语言。
HTML由W3C组织提供(CSS/xml)
关于HTML的细节：
1.使用HTML开发的网页设计通常以.html或.htm为后缀
2.使用HTMl开的的网页文件由浏览器负责显示并解析（浏览器就是一个html解析器）
3.HTML是文档的一种（txt/word/ppt/pdf等）
总结：HTML就是用于开发网页的一种语言！！
2、HTML的结构
2.1 案例：编写我的第一个HTML网页，并用浏览器打开
新建一个txt文档，将后缀名改为.html，代码实现如下
网页的标题 Hello ...
2.2 HTML结构详解
文档声明, 用来声明HTML文档所遵循的HTML规范和版本
上面是html5.0的声明, 也是目前最常用的版本
头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载. 体部分, 用来存放网页可视化数据. 即真正的网页数据
3、HTML语法(了解)
3.1 html标签
标签：也叫做标记、元素等，标签分为开始标签，例如：
、
和结束标签，例如:
、
开始标签和结束标签之间还可以包含其他内容。
有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：
![]()
等
3.2 html属性
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)
标签上可以声明多个属性，多个属性之间用空格分隔
标签上的属性的值可以使用单引号或者双引号引起来
3.3 html注释
格式:
注释的作用:
(1)为代码添加解释说明
(2)将一些暂时不需要执行的代码注释
浏览器对于注释中的内容不会解析，也不会显示！
3.4 html空格和换行
在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：
如何在网页中做一个换行：可以使用
标签做换行
如何在网页中做一个空格：可以使用 或 做空格
补充: HTML中是不区分大小写的！
HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。
二、HTML标签
1、图像标签
通过img标签可以在网页中插入一副图像
其中：
src：属性用于指定图片的路径
width：属性用于指定图片的宽度
height：属性用于指定图片的高度
2、超链接标签
超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接
点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:
01-第一个网页.html
百度一下，你就不知道
其中：
href：属性用于指定点击超链接后将要跳转到的URL地址
target：属性用于指定以何种方式打开超链接
_self：默认值, 表示在当前窗口中打开超链接
_blank：表示在新的窗口中打开超链接
3、表格标签
3.1 案例：在网页中插入一个3*3的表格
案例：在网页中插入一个3*3的表格
表头1 表头2 表头3 11 12 13 21 22 23 31 32 33
在浏览器中显示效果如下：
在head标签内添加如下内容：
再次刷新浏览器显示效果为：
3.2 表格标签介绍
table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）
3.3 练习：使用表格标签在网页中生成一个表格，如下图：
要求如下：
(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题
4、表单标签
4.1 表单的作用: 用于向服务器提交数据
向服务器提交数据的两种方式：
**(1)通过表单向服务器提交数据**
表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器。
(2)通过超链接向服务器提交数据
http://www.baidu.com?username=张三&pwd=123&like=篮球
在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。
4.2 表单标签
其中action属性用于指定表单的提交地址， 例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。
method=“GET/POST” 属性是用于指定表单的提交方式，常用的就是GET和POST提交。
5、表单项标签
5.1 input元素：
(1) 普通文本输入框(比如:用户名/昵称/邮箱/验证码等)
(2) 密码输入框(比如:密码/确认密码等)
(3) 单选框(比如:性别/部门等)
男
(4)复选框/多选框(比如:爱好/岗位等)
(5) 普通按钮(比如:换一张图片)
普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为
(6) 提交按钮(比如:提交/注册/登录)
提交按钮用于提交表单中的数据到服务器中!
5.2 select、option标签：
select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置当前option选项默认被选中
5.3 textarea多行文本输入区域：
cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提示消息!
6、表单细节问题
6.1 提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会别忽略。例如：
6.2 如何让多个单选框只能有一个被选中？
要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！\
性别:
男女
6.3 为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。
因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：
男
女
6.4 如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：
男
女
篮球
足球
排球
6.5 如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：
6.6 下拉选框中option选项上的value属性的作用是什么？
如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。
如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容
三、注册表单案例
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style>
/* style标签内只能书写css注释和css代码 */
table {border: 2px solid red; /* 为表格添加边框 */border-collapse: collapse; /* 设置边框合并 */background-color: lightgrey; /* 为表格设置背景颜色 *//* margin-left: 15%; *//* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */margin-left: auto;margin-right: auto;
}td, th {border: 2px solid red; /* 为单元格添加边框 */border-collapse: collapse; /* 设置边框合并 */padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}h1 {/* border: 2px solid blue; */text-align: center; /* 设置元素中的内容水平居中 */
}
style>
head>
<body><h1>欢迎注册h1><form action="#"><table><tr><td>用户名:td><td><input type="text" name="username" />td>tr><tr><td>密码:td><td><input type="password" name="pwd" />td>tr><tr><td>性别:td><td><input type="radio" checked="checked" name="gender"value="male" />男 <input type="radio" name="gender" value="female" />女td>tr><tr><td>爱好:td><td><input type="checkbox" name="like" value="basketball" />篮球<input type="checkbox" checked="checked" name="like"value="football" />足球 <input type="checkbox" name="like"value="volleyball" />排球td>tr><tr><td>城市:td><td><select name="city"><option value="beijing">北京option><option value="shanghai">上海option><option selected="selected">广州option><option>深圳option>select>td>tr><tr><td>自我描述:td><td><textarea name="description" cols="30" rows="5"placeholder="请输入描述信息...">textarea>td>tr><tr><td colspan="2" style="text-align: center;"><inputtype="submit" value="提交" />td>tr>table>form>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
