目录
什么是HTML
全名为HyperText Mark-up Language，又叫超文本标记语言。超文本可理解为超越文本限制，如图片、视频、音频、超链接等内容，而超链接则是世界各地的网页链接，标记可理解为标签，在HTML中标签可分为双标签（闭合标签）和单标签（空表示）。整个连起来则可以理解为HTML是一种使用标签制作出超文本的语言（个人理解，可能有误）。学习HTML语言，即是学习标签的用法，常用标签20多种，标签不区分大小写，使用小写即可
HTML的作用
用来制作网页的大致结构的
网页文本的后缀
.html 或者.htm。一个.html文件就是一个网页，使用编译器打开则会显示代码，可以以文本的方式进行编辑，而使用浏览器打开则会按照标签描述的内容将文件渲染成网页。
HTML的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>第一行<!DOCTYPE html>表示文档说明，用来指定页面所使用的html的版本，这里声明的是html5的文档。
<html>..</html>标签是开放人员告诉浏览器，整个网页是从<html>开始，到</html>结束，也就是整个文档的开始和结束标签，<html>后面的lang="en"表示当前网页的语言为英文，默认为en，改成lang="zh"表示中文。
<head>..</head>标签表示定义文档的头部，是负责对网页设置标头、编码格式以及引入css和js文件的，是整个文档的页头部分。
<body>..</body>标签是编写网页上显示的内容，网页上的内容都是在这个标签内部中写，是整个文档的页身部分。
页头中常用的属性
- 指定网页的编码格式
- <meta charset="UTF-8">
- 指定在移动设备时浏览网页页面不缩放
- <meta name="viewport" content="width=divice-width, initial-scale=1.0">
- 指定使用ie浏览器网页时，使用ie的最高版本
- <meta http-equiv="X-UA-Compatitle" content="IE=edge,chrome=1">
常用标签
指定网页标题
- <title>内容</title>
- 需要写在页头部分中，即在<head>..</head>标签内
设置有关页面原信息
- <meta>
-
语法格式：<meta name="参数"content="参数值">。
-
上文提到的页头中常用属性就是使用此标签，
-
这个标签是一个单标签
-
标题标签
- ＜h# align="left|center|right"＞标题文字＜/h#＞。
- 表示设置标题，使用＜h1＞至＜h6＞标签进行定义。＜h1＞定义最大的标题，＜h6＞定义最小的标题。
- align表示参数，可以省略，用来设置标题在网页上的对齐方式，left（左对齐）、center（居中）、right（右对齐）和justify（两端对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。
段落标签
- ＜p align="left|center|right"＞文字＜/p＞。
- 该标签中的文字为一个段落中的文字。
- aalign表示参数，可以省略，用来设置标题在网页上的对齐方式，left（左对齐）、center（居中）、right（右对齐）和justify（两端对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。
列表标签
- 又分为了有序列表和无序列表
无序列表
- <ul type="disc|circle|square">内容</ul>
- type表示符号表示，可以省略，disc表示序号为实心圈，circle表示序号为空心圈，square表示序号为方框，默认表示序号为实心圈，格式中的“|”表示“或者”，即多项选其一。
有序列表
- <ol type="1|a|A|I|i">内容</ol>
- type表示符号表示，可以省略，1表示序号为数字，a表示序号为小写字母，A表示序号为大写字母，I表示序号为大写罗马字母，i表示序号为小写罗马字母,默认表示序号为数字，格式中的“|”表示“或者”，即多项选其一。
- 列表项
- <li type=..>内容</li>
- 定义有序或者无序列表后，列表内的内容需要使用<li>..</li>标签才能为内容加上标签。type表示序号使用什么符号，可以使用上面两种列表中任何参数，表示单独这个内容中的内容使用该序号符号。默认时序号符号根据使用了哪种列表而定
- 这个标签需要放在列表的内容中
- 嵌套标签
- <div align="left|center|right">内容</div>
- align属性表示设置对齐方式，left（左对齐）、center（居中）、right（右对齐）和justify（两端对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。
- 该标签是一个容器标签，其中的内容可以是如何HTML原型
- <div align="left|center|right">内容</div>
插入图片标签
- <img src="图像文件名"alt="替代文字"title="鼠标悬停提示文字"width="图像宽度"height="图像高度"border="边框宽度"align="环绕方式|对齐方式"/＞
- 属性中，只有图形路径是必须的，其他参数都可以省略，省略时都为空
注意：通过img标签的属性width和height来调整图像大小，其目的是通过指定图像的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小。如果不设置width和height属性，浏览器就要等到图像下载完毕才显示网页，因此延缓了其他页面元素的显示。
超链接标签
- 通常＜a＞标签又称为锚。指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
- ＜a href="url"title="指向链接显示的文字"target="窗口名称"＞文本文字＜/a＞
- href属性定义了这个链接所指的目标地址，也就是路径
- target属性设定链接被单击后所要开始窗口的方式，有以下4种方式：
- blank：在新窗口中打开被链接文档。
- self：默认。在相同的框架中打开被链接文档。
- parent：在父框架集中打开被链接文档。
- top：在整个窗口中打开被链接文档。
- title属性表示的是当鼠标放在该链接时显示的文字
- 3个属性中只有href属性即路径是必须要的，其他属性都可以为空
- 文本文字也可以设置为图片标签或者其他的标签，这样就实现了点击图片跳转到别的网页上了
表格标签
- 表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，它是组成表格的最基本单元。
- 使用<table>..</table>标签表示表格，<tr>..</tr>表示表格内的一行，<th>..</th>表示表格内的一列。
-
<table> <tr> <th>姓名</th> <th>性别</th> </tr> <tr> <th>小明</th> <th>男</th> </tr> </table>
表单标签
- 表单可以把来自用户的信息提交给服务器，是网站管理员与浏览者之间沟通的桥梁。一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息。
- 表单使用的＜form＞标签是成对出现的，在开始标签＜form＞和结束标签＜/form＞之间的部分就是一个表单，所有表单元素都要放在＜form＞标签中才会生效。
- <form name=”“action=“URL”method=“get post”>内容</form>
- name属性：表单的名称，该名称可以使用脚本语言引用或控制该表单。
action属性：该属性用于定义将表单数据发送到哪个地方，其值采用URL的方式，即处理表单数据的页面或脚本。
method属性：用于指定表单处理数据的方法，其值可以为get或post，默认方式是get。当需要将数据提交给web服务器时，一般使用post。
表单元素
- input
- 规定用户可输入数据的输入字段，例如，文本域、密码域、复选框、单选按钮、按钮等
- ＜input type="表项类型"name="表项名"value="默认值"size="x"maxlength="y"/＞显示文字
- type属性：指定input元素的类型
- text
- 当type属性为text时，表示为单行文本域
- ＜input type="text"name="文本域名"＞
- 单行文本域适用于输入少量文字，例如页面验证的用户名及文章标题等
- submit
- 当type属性为submit时，表示为提交按钮
- ＜input type="submit"value="按钮名"＞
- 属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。
- 提交按钮的name属性是可以默认的。一般不需要设置
- 在一个表单中必须有提交按钮，否则将无法向服务器传送信息。
- reset
- 当type属性为reset时，表示为重置按钮
- ＜input type="reset"value="按钮名"＞
- 属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“重置”。
- 重置按钮的name属性也是可以默认的
- 使用重置按钮（reset）可以将表单输入框的内容返回初始值。
- password
- 当type属性为password时，表示为密码域
- ＜input type="password"name="密码域名"＞
- 在网页提交的内容中包含密码，用于验证用户身份时就要用到密码域，这是因为提交的密码不能以明文显示。密码域password与单行文本域text使用起来非常相似，所不同的只是当用户在输入内容时，用“*”来代替显示每个输入的字符，以保证密码的安全性。密码域的格式：
- checkbox
- 当type属性为checkbox时，表示为复选框
- ＜input type="checkbox"name="复选框名"value="提交值"checked="checked"＞
- value属性可设置单选按钮的提交值
- 用checked属性表示是否为默认选中项
- name属性是单选按钮的名称
- 复选按钮允许用户从选择列表中选择一个或多个选项的输入字段类型。例如，用户提交的个人兴趣爱好，可以同时选择音乐、旅游和体育等
- radio
- 当type属性为radio时，表示为单选按钮
- ＜input type="radio"name="单选钮名"value="提交值"checked="checked"＞
- value属性可设置单选按钮的提交值
- 用checked属性表示是否为默认选中项
- name属性是单选按钮的名称
- 单选按钮用于在众多选项中只能选取一个。例如填写个人信息的性别
- image
- 当type属性为image时，表示为图片按钮
- ＜input type="image"src="图片来源"＞
- src属性表示图片的路径
- hidden
- 当type属性为hidden时，表示为隐藏域
- ＜input type="hidden"name="隐藏域名"value="提交值"＞
- 在网页的制作过程中，有时需要提交预先设置好的内容，但这些内容又不宜显示给用户，因此隐藏域是一个不错的选择。
- file
- 当type属性为file时，表示为文件域
- 在网站中需要把文件传送到服务端，从而供用户使用，如相册和演示文件等。此时就需要使用文件域，把客户端的文件上传。文件域会在页面中创建一个不能输入内容的地址文本域和一个“浏览”按钮。
- ＜input type="file"name="文件域名"＞
- button
- 当type属性为image时，表示为普通按钮
- ＜input type="button"value="按钮名"＞
- text
- name属性：属性的值是相应程序中的变量名。
- size属性：设置单行文本域可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本域的长度时，用户可以通过移动光标来查看超出的内容。
- maxlength属性：设置单行文本域可以输入的最大字符数。
- checked属性：input元素首次加载时被选中（适用于type="checkbox"或type="radio"）。
- readonly属性：设置输入字段为只读。
- autofocus属性：设置输入字段在页面加载时是否获得焦点（不适用于type="hidden"）。
- disabled属性：input元素加载时禁用此元素（不适用于type="hidden"）。
- value属性：设置默认值，可作为输入用户名等的提示。
- type属性：指定input元素的类型
- keygen
- 规定用于表单的密钥对生成器字段
- object
- 定义一个嵌入的对象
- output
- 定义不同类型的输出，比如脚本的输出
- select
- 如果一个列表选项过长，可以考虑使用下拉框。下拉框可以使用户选择其中的一个选项，在选择列表中仅有一个是可选项，单击右边下拉按钮便可进行选项的选择。
- 定义下拉列表菜单，通过<select>内容</selent>来定义。
- ＜select size="x"name="控制操作名"multiple="multiple"＞
- size：可选项，用于改变下拉框的大小。size属性的值是数字，表示显示在列表中选项的数目，当size属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，size默认值为1。
- name：设定下拉列表名字。
- multiple：如果加上该属性，表示允许用户从列表中选择多项。
- 定义下拉框中的项
- 通过＜option>内容</option＞来定义。＜option＞标签用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个value值。
- ＜option value="可选择的内容"selected="selected"＞…＜/option＞
- selected：用来指定选项的初始状态，表示该选项在初始时被选中。
- value：用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。
- ＜option＞标签必须嵌套在＜select＞标签中使用。一个列表中有多少个选项，就要有多少个＜option＞标签与之相对应。
- 下拉框有两种形式：字段式列表和下拉式菜单。二者的主要区别在于，前者在＜select＞中的size属性值取大于1的值，此值表示在下拉框中不拖动滚动条可以显示的选项的数目。
- 通过＜option>内容</option＞来定义。＜option＞标签用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个value值。
- textarea
- 定义一个多行的文本输入区域
- < textarea name= " 文本区域" rows= "行数" cols="列数"> ..< /textarea>
- name：指定多行文本域的名字。
- rows：设置多行文本域的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。
- cols：设置多行文本域的列数。
- label
- 为其他表单元素定义说明文字
换行标签
- <br>
- 这是一个单标签
水平线标签
- <hr>
- 这是一个单标签
后面可能会继续更新
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
