目录
一. 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属性来给按钮起名字
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
