初步认识HTML

一. 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>

</ol>

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ol>

(2)无序列表

<ul>

</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 超链接

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/1.png" width="100" height="300" border="1"/>

但一般不建议设置宽度和高度还有边框,一般图片都是想要多大,就在设置的时候设置多大即可

四. 特殊符号转义

有一些符号在HTML语言中无法被浏览器区分,比如<(小于号) >(大于号)因为我们的标签也是<>所以我们在表示这些符号时必须使用转义字符,下面是一些常用的转义字符

小于号<	&lt
大于号>	&gt
空格	&nbsp
版权(C)	&copy
商标(TM)	&trade
注册商标(R)	&reg

五. 表格

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比较安全