目录
一. HTML概述
二. HTML基本语法
1. HTML的基本框架
2. 标签
2.1 标签分类
2.2 标签属性
三. 基本常用标签
3.1 标题标签
3.2 段落标签
3.3 换行标签
3.4 列表
3.5 超链接
四. 特殊符号转义
五. 表格
5.1 表格的基本构成标签
5.2 表格的基本结构
5.3 表格属性
六. 表单
6.1 form标签
6.2 文本框
6.2.1 标准文本框
6.2.2 密码框
6.2.3 单选框
6.2.4 复选框
6.2.5 文件选择框
七. 下拉框
八. 多行文本域
九. 按钮
9.1 提交表单按钮
9.2 重置表单按钮
9.3 普通按钮
一. HTML概述
HTML(HyperText Markup Language)是超文本标记语言
超文本:指的是页面内容可以包含图片,视频,链接,声音等内容
标记:标签,通过一系列标签告诉浏览器该如何显示内容
二. HTML基本语法
1. HTML的基本框架
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>1.<!DOCTYPE html> 声明html语言的版本信息,为html5版本 告诉浏览器以html5标准解释运行
2.<html> </html> html标签是网页中的根标签,所有的内容都应该写在此标签中
3.<head> </head> 头标签,主要是对网页进行设置,其中又可以包含以下标签
- <meta>位于<head>标签的头部,可提供有关页面的信息,让搜索引擎去查找
- <title> </title> 设置网页的标题
- <link rel="icon" href="ico地址"> 给网页标题处添加图标,注意只能是.icon格式的图片
当然还可以包含其他许多标签
4.<body></body>身体标签,我们网页的内容都写在此标签中
2. 标签
HTML中的标记指的就是标签,HTML使用标记标签来描述网页.
2.1 标签分类
<标签名>标签内容</标签名> 称为闭合标签(有标签内容)
<标签名/> 称为闭合标签(没有标签内容)
2.2 标签属性
标签属性进一步说明了该标签的显示以及使用特性,如<body text="red">表示将网页内的文字都设置为红色
- 属性的格式:属性名="属性值"
- 属性的位置:<标签名 属性名="属性值">xxx</标签名>
- 添加多个属性:<标签名 属性名="属性值" 属性名="属性值" 属性名="属性值">xxx</标签名>
三. 基本常用标签
3.1 标题标签
标题标签 <h1></h1>.....<h6></h6>,设置一级到六级标题
<!--标题标签 h1...h6一个标签独占一行align="left" 控制内容在本行内的水平对齐方式
--><h1 align="left">一级标题</h1><h2 align="center">二级标题</h2><h3 align=right>三级标题</h3>align是标签属性可以设置对齐方式
3.2 段落标签
段落标签 <p>....</p>,设置段落,段落与段落之间有空隙
<!--p段落标签一个p标签,表示一个独立的段落段落与段落之间有间隔--><p align="center">当“AI质检师”在纺织车间给产品“找茬”，结果是“瑕疵识别准确率达95％以上，检出个数也从人工的每百米10个到AI的40个”。在福建东龙针纺有限公司的纺织车间内，几台率先试点数字化智能化的经编机都逐一配上了“AI质检师”，在新生产的经编花边上寻找瑕疵点，并发出网格位置预警和提示。</p><p align="right">当“AI质检师”在纺织车间给产品“找茬”，结果是“瑕疵识别准确率达95％以上，检出个数也从人工的每百米10个到AI的40个”。在福建东龙针纺有限公司的纺织车间内，几台率先试点数字化智能化的经编机都逐一配上了“AI质检师”，在新生产的经编花边上寻找瑕疵点，并发出网格位置预警和提示。</p><p align="left">当“AI质检师”在纺织车间给产品“找茬”，结果是“瑕疵识别准确率达95％以上，检出个数也从人工的每百米10个到AI的40个”。在福建东龙针纺有限公司的纺织车间内，几台率先试点数字化智能化的经编机都逐一配上了“AI质检师”，在新生产的经编花边上寻找瑕疵点，并发出网格位置预警和提示。</p>3.3 换行标签
换行标签 </br> 换到下一行
3.4 列表
列表有两种
(1)有序列表:
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ol>(2)无序列表
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
<!--无序列表<ul><li>列表项1</li><li>列表项2</li></ur>--><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ul>可以根据type属性设置有序列表的有序方式
<!--规定以大写字母显示顺序-->
<ol type="A"><li>列表项1</li><li>列表项2</li><li>列表项3</li>li>列表项4</li>
</ol><!--以罗马数字显示顺序-->
<ol type="I"><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ol>3.5 超链接
<a href="要跳转的网页地址" target="以什么方式打开另一个网页">链接内容</a>
target:
默认在当前页面打开另一个网页(_self)
也可以设置打开一个新的网页显示该内容(_blank)
<!--超链接标签href="链接地址" URL-- 文件的地址target="打开的位置" _self(默认) 在自己本窗口打开一个新的网页
--><a href="http://www.baidu.com" target="_self">百度</a><a href="http://www.baidu.com" target="_blank">百度</a><a href="index.html">首页</a>超链接有两个作用
- 可以跳转到另一个页面
- 可以实现锚点(跳转到当前页面的任意位置)
3.6 图像标签
<img src="img/图片路径" width="宽度" height="高度" border="1(图像边框)">
<img src="img/1.png" width="100" height="300" border="1"/>但一般不建议设置宽度和高度还有边框,一般图片都是想要多大,就在设置的时候设置多大即可
四. 特殊符号转义
有一些符号在HTML语言中无法被浏览器区分,比如<(小于号) >(大于号)因为我们的标签也是<>所以我们在表示这些符号时必须使用转义字符,下面是一些常用的转义字符
| 小于号< | < |
| 大于号> | > |
| 空格 |   |
| 版权(C) | © |
| 商标(TM) | &trade |
| 注册商标(R) | ® |
五. 表格
5.1 表格的基本构成标签
| table标签 | 定义表格的标签 |
| tr标签 | 表格中的行 |
| td标签 | 表格中的列 |
| th标签 | 表格中的行 |
5.2 表格的基本结构
<table>定义表格<tr>定义表行<th>定义表头</th></tr><tr><td>定义单元格</td></tr></table>5.3 表格属性
| width | 设置表格宽度 |
| height | 设置表格高度 |
| cellspacing | 设置单元格之间的外边距 |
| cellpadding | 设置内容到单元格的内边距 |
| align | 设置水平对齐方式,默认左对齐 |
| valign | 设置垂直对齐方式,默认居中对齐 |
| cospan | 合并列单元格 |
| rowspan | 合并行单元格 |
注意:
align:有 left,center(居中),right三种对齐方式
vlign:有top,middle(居中),bottom三种对齐方式
六. 表单
网页表单中有很多组件可以输入,可以选择,由用户进行选择和填写,最终将信息从客户端发送到服务器端
6.1 form标签
form标签就是将客户端填好的表单发到服务器端
<form action="server.html" method="get">action属性:服务器端地址
method:指定向服务器提交的方法,一般为post或get,post比较安全
6.2 文本框
6.2.1 标准文本框
<input 属性=属性值 属性=属性值.....>
账号:<input type="text" name="account" value="" placeholder="请输入用户名/"><br/>type:表示文本框的类型
name:定义组件的名字,向后端提交用的,便于后端知道是哪个组件传来的
value:组件的值,是后端具体拿到的值
6.2.2 密码框
密码:<input type="password" name="password"/> <br/>6.2.3 单选框
性别:<input type="radio" name="gender" value="男"> 男<input type="radio" name="gender" value="女"checked/> 女<br/>6.2.4 复选框
课程: <input type="checkbox" name="course" value="java" checked/>java<input type="checkbox" name="course" value="C"/>C<input type="checkbox" name="course" value="sql"/>sql<input type="checkbox" name="course" value="html"/>java6.2.5 文件选择框
<input type="file" name="file"/> <br/>注意:
- checked表示不选时的默认值
- 单选框是按照name分组来实现选择的,没有name属性不能实现单选
- 单选框和复选框不能输入内容,所以必须指定value告诉后端接收到的值是什么
- 以上文本框是用type来区分的
七. 下拉框
<select name="province"><option>请选择</option><option value="101">北京</option><option value="102" selected>上海</option><option value="103">陕西</option></select> <br/>注意:下拉框的name等属性要在select后面定义,而具体的value值是在option后面定义
八. 多行文本域
<textarea rows="5" cols="30" name="address">文本域显示一些提示信息</textarea>九. 按钮
9.1 提交表单按钮
<input type="submit" value="保存"/><br/>9.2 重置表单按钮
<input type="reset"/>9.3 普通按钮
普通按钮,用来触发事件
<input type="button" value="登录" onclick="alert('你好');"/>注意:
- 按钮也是根据type属性区分不同的按钮
- 可以根据value属性来给按钮起名字