HTML
一、HTML 介绍
1. 什么是 HTML？
超文本标记语言（Hyper Text Markup Language）：
超文本：比普通文本功能更加强大,页面内可以包含图片、链接等非文字内容。
标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！例如：<a>www.baidu.com</a>
2. HTML 怎么使用？
语法和规范：
· HTML文件不需要编译，直接使用浏览器阅读即可
· HTML文件的扩展名是*.html或*.htm（推荐使用html）
· HTML结果都是由标签组成
· 标签名预先定义好的，我们只需要了解其功能即可。
· 标签名不区分大小写
· 通常情况下标签由开始标签和结束标签组成。例如：<a></a>
· 如果没有结束标签，建议以/结尾。例如：<img />
· HTML结构包括两部分：头head和体body
3. HTML相关标签的学习
3.1标题标签
标题标签使用<hn></hn>,n 从 1 到 6 逐渐变小。超过 6 的按 6 的进行显示
特点：加粗加黑显示，单独占用一行。与其它行有一定的行间距。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>公司简介</h1><br />
<h2>公司简介</h2><br />
<h3>公司简介</h3><br />
<h4>公司简介</h4><br />
<h5>公司简介</h5><br />
<h6>公司简介</h6><br />
<h100>公司简介</h100>
</body>
</html>
注释和换行：
<!--注释内容-->
快捷键：ctrl+/
<br /> 插入单个换行
3.2水平线标签
水平线标签：<hr />
size属性：水平线的高度，单位像素
noshade属性：没有阴影，取值：noshade，表示显示纯色
3.3 段落标签
段落标签：<p></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落标签</title>
</head>
<body>
<p>
加油，程序员。
</p>
<p>
这是段落标签！
</p>
</body>
</html>
3.4 字体标签
字体标签使用<font></font>
必须结合其属性才能具备一定的样式效果。
设置颜色：color(可以是英文单词也可以是十六进制)
设置字体：face(那些字体必须是你本机已经有的)
设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体标签</title>
</head>
<body>
<font color="#0000FF" size="1" >大小为1的蓝色字体</font><br />
<font color="#0000FF" size="3">大小为3的蓝色字体</font><br />
<font color="#0000FF" size="4">大小为4的蓝色字体</font><br />
</body>
</html>
3.5格式化标签
<b> 粗体
<i> 斜体
实例：网站信息显示页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站信息显示页面</title>
</head>
<body>
<!--1.创建一个标题标签-->
<h2>个人简介</h2>
<!--2.创建一条水平线标签-->
<hr />
<!--3.分别创建4个段落标签-->
<p><font color="red">“oneboy”</font>你好，<b>我是onesun</b>，很高兴认识你。<i>Hello</i>,I am onesun,nice to meet you.</p>
</body>
</html>
3.6图片标签
<img> 在html页面中引用一张图片
· src ：指定需要显示图片的URL（路径）。
· alt ：图片无法显示时的替代文本。
· width ：设置图像的宽度。
· height ：设置图像的高度。
3.7列表标签
· <ol> 定义有序列表
type 列表类型，取值:A、a、I、i、1 等
· <ul> 定义无序列表
type 符号的类型，取值：disc实心圆、square方块、circle空心圆
· <li> 定义列表项，是<ol>或<ul>的子标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol start="1" reversed="reversed" type="a">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ul>
</body>
</html>
3.8超链接标签
<a> 是超链接标签，是在html页面提供一种可以访问其他位置的实现方式，
属性：
· href ：用于确定需要显示页面的路径(URL)
· target ：确定以何种方式打开href所设置的页面，常用取值：_blank、_self等
_blank 在新窗口中打开href确定的页面
_self 默认。使用href确定的页面替换当前页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a href="www.baidu.com" target="_blank">百度一下！</a>
</body>
</html>
3.9表格标签
HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。
· <table> 是父标签，相当于整个表格的容器
border 表格边框的宽度
width 表格的宽度
cellpadding 单元边沿与其内容之间的空白
cellspacing 单元格之间的空白
bgcolor 表格的背景颜色
· <tr> 标签用于定义行
· <td> 标签用于定义表格的单元格（一个列）
colspan 单元格可横跨的列数
rowspan 单元格可横跨的行数
align 单元格内容的水平对齐方式，取值：left左、right右、center居中
nowrap 单元格中的内容是否折行
· <th> 标签用于定义表头。单元格内的内容默认居中、加粗。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的操作</title>
</head>
<body>
<!--cellspacing:设置边框与边框的间距，cellpadding:设置的是边框与内容的间距-->
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="2" align="center" width="250px" height="50px">
<img src="../../img/1.jpg" height="100%" width="100%"/>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">
<table border="1px" align="center" width="100%" height="100%">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
3.10框架标签
<frameset> 标签，是多个窗口页面整合在一起在一个集合（框架集）。每一个页面（框架）都是单独文档，
需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，
使用 cols 确定列数，使用 rows 确定行数。多个<frameset>可以嵌套使用。
· <frameset>和<body>两个不能共存
· rows 属性和 cols 属性的取值：值1,值2,值3,... 一个值表示一行（列），多值使用逗号隔开，
值可以是10px、10% 等，最后一个值如果不想计算可以使用 * 匹配剩余量。
<frame>标签，用于设置<frameset>框架集中的一个页面（框架）
· src 属性：确定页面的路径
· noresize 属性：框架分隔先不能移动
· target 属性：确定需要显示的页面在何处显示
实例：网站后台系统显示页面.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站后台系统显示页面</title>
</head>
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="right" />
</frameset>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="7">欢迎XXXX进入后台管理系统</font>
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a>
</body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
所有用户信息、
</body>
</html>
3.11 表单标签
<from> 表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。
如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内容。
· action 属性：请求路径，确定表单提交到服务器的地址（路径）
· method 属性：请求方式，常用的取值：GET、POST
GET ：默认值
》提交的数据追加在请求路径上。例如：/1.html?username=jack&password=1234，数据格式k/v，追加是使用?连接，之后每一对数据使用&连接。
》因为请求路径长度有限，所有GET请求提交的数据有限。
POST ：提交的数据不再请求路径上追加（即不显示在地址栏上）。
3.12 输入域标签
<input>标签用于获得用户输入信息，type 属性值不同，搜集方式不同。最常用的标签
· type 属性：
text ：文本框，单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。
password ：密码框，密码字段。该字段中的字符以黑圆显示。
radio ：单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
CheckBox ：复选框
submit ：提交按钮，提交按钮会把表单数据发送到服务器。一般不写name属性，
否则将“提交”两个字段提交到服务器。因为不同项目注册需要的字段不同，需要完成的案例中没有覆盖所有的表单元素。
file ：文件上传组件，提供“浏览”按下可以选择需要上传的文件。
hidden ：隐藏字段，数据会发送给服务器，但浏览器不进行显示。
reset ：重置按钮，将表单回复到默认值。
image ：图形提交按钮，通过src给按钮设置图片。
button ：普通按钮，常用于与JavaScript结合使用。
· name 属性：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获取提交的数据。
· value 属性：设置input标签的默认值，submit和reset为按钮显示数据
· size 属性：大小
· checked 属性：单选框或复选框项默认被选中。
· readonly 属性：是否只读。
· disabied 属性：是否可用。
· maxlength 属性：允许输入的最大长度。
· placeholder 属性：规定帮助用户填写输入字段的提示。
· required 属性：规定此文本区域是必填的。
3.13下拉列表标签
<select> 下拉列表，可以进行单选或多选。需要使用子标签<option>指定列表项
· name 属性：发送给服务器的名称
· multiple 属性：不写默认单选，取值为"multiple"表示多选
· size 属性：多选时，可见选项的数目
· <option> 子标签：下拉列表中的一个选项（一个条目）
selected ：默认勾选当前列表项
value ：发送给服务器的选项值。
3.14按钮标签
<button type="button|reset|submit"> 按钮标签一般很少使用，
提供“普通|重置|提交”功能。不同的浏览器默认值不同。
3.15文本域标签
<textarea> 文本域标签，多行的文本输入控件。
· cols 属性：文本域的列数
· rows 属性：文本域的行数
实例：网页注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签属性介绍</title>
</head>
<body>
<form action="#" method="get">
隐藏字段:<input type="hidden" name="id" value="" /><br />
用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
密码：<input type="password" name="password" required="required"/><br />
确认密码：<input type="password" name="repassword"/><br />
性别：<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女<br />
爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动"/>打电动
<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
头像：<input type="file" name="file"/><br />
籍贯：<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍：
<textarea name="zwjs">
</textarea><br />
提交按钮：<input type="submit" value="注册"/><br />
普通按钮：<input type="button" value="zhuce"/><br />
重置按钮：<input type="reset" />
</form>
</body>
</html>
本文来自博客园，作者：早晨9点，转载请注明原文链接：https://www.cnblogs.com/onesun/p/15234488.html
浙公网安备 33010602011771号