HTML
定义：HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂ 字元素，如：图⽚、链接、⾳乐等等。
基础语法
标签
HTML 标记是由"<“和”>"所括住的指令标记，⽤于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由"<起始标记>“＋内容＋”</结束标记>"构成）
整体结构
HTML的内容都是由⼀对⼀对的标签组成，标签不能混乱，⻚⾯有⻚⾯的整体架构和规则，标签和标签 之间有需要正确嵌套。
<!-- 声明当前HTML的版本是HTML5 -->
<DOCTYPE html>
<html> <!--标志⽤于 HTML ⽂档的最前边，⽤来标识 HTML ⽂档的开始。-->
<head> <!--head 构成 HTML ⽂档的开头部分。-->
<meta charset="UTF-8"> <!--meta：⽤来提供关于⽂档的信息，起始属性为：charset="utf8"。-->
<title>HTML⽂档的基本结构</title> <!--title 定义⽂档的标题。-->
<script></script> <!--⽤来引⼊ js ⽂件或编写js代码-->
<link rel="stylesheet" type="text/css" href=""/> <!--link：⽤来引⼊ css ⽂件。-->
<style></style>
</head>
<body>
<!--主体内容-->
</body>
</html> <!--标志放在HTML⽂档的最后边，⽤来标识 HTML ⽂档的结束-->
常用标签
标题标签:
h1 - h6 标签可定义标题，标题依次递减水平线标签:
属性: align=“center/left/right” 的对⻬⽅式
size 高度 width 宽度
段落标签:
p标签定义段落。p 元素会⾃动在其前后创建⼀些空⽩。属性:align=“left/right/center/justify(两边对齐)”
换行标签:
无序列表标签:
<ul>
<li></li>
<li></li>
......
</ul>
属性:type=“disc/circle/square” 实心圆/空心圆/方块
有序列表标签:
<ol>
<li></li>
<li></li>
......
</ol>
属性: type=“1/a/A/i/I”
div标签: div是⼀个块级元素，通常与css配合使⽤，⽤于布局。
<div>content</div>
span标签:span标签被⽤来组合⽂档中的⾏内元素 ，span 没有固定的格式表现。
<span>content</span>
格式化标签
font
规定⽂本的字体、字体尺⼨、字体颜⾊
pre (原模原样标签)
定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。
b（粗⽂本）、i（斜体⽂本）、u（下划线⽂本）、
del （中划线⽂本）、sub（下标⽂本）、sup（上标⽂本）
a标签 :a标签定义超链接，⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。
<a href="http://www.baidu.com">百度</a>
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 连接所要跳转的位置，可能是其他或当前⻚⾯。 |
| target | blank parent self top | blank：开启新⻚⾯显示⻚⾯； self：当前⻚⾯显示跳转到⻚⾯，默认值。 _top：⽤于有frameset布局的⻚⾯，想要覆盖整个⻚⾯显示。 |
锚点的实现
利⽤a标签的name属性：
<a name="top"></a>
⼀般标签的id属性：div id=""、a id="" 等：
<div id="top"></div>、<a id="top"></a>
锚点定位
<a href="#top">返回⾸部</a>
图片标签
<img src="" alt="" >
属性: alt 规定图像的替代⽂本，⼀般在图⽚⽆法正常显示占位的⽂字。(提示信息)
src 规定显示图像的地址
表格标签
| Month | Savings |
|---|---|
| January | $100 |
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
td 属性的colspan和rowspan分别规定单元格横跨的列数和⾏数
cellpadding 规定表格边框的宽度。
cellspacing 规定单元格之间的空白。
表单标签
form 标签⽤于为⽤户输⼊创建 HTML 表单。
表单能够包含 input 元素，⽐如⽂本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元 素。
表单⽤于向服务器传输数据。form 元素是块级元素，其前后会产⽣折⾏
属性: action 规定当提交表单时向何处发送表单数据
method: 表单提交⽅式：get、post
input标签
input 标签⽤于搜集⽤户信息。 根据不同的 type 属性值，输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、单选按钮、 按钮等等。
属性: alt 定义图像输⼊的替代⽂本
checked 规定此 input 元素⾸次加载时应当被选中
disabled 当 input 元素加载时禁⽤此元素
readonly 规定输⼊字段为只读
maxlength 规定输⼊字段中的字符的最⼤⻓度
value 规定 input 元素的值
type : button 按钮 checkbox 多选框
file 文件 hidden 隐藏 password 密码框
radio 单选框 reset 重置按钮 submit 提交按钮
text 文本框 image 图像形式的提交按钮
注意：
-
没有name属性的属性是⽆法提交到后台的
-
Radio单选按钮以name相同为⼀组。
-
Checkbox复选按钮以name相同为⼀组。
button标签
<button>按钮</button>
属性: disabled 禁用该按钮
type=“button/submit/reset” 规定按钮的类型
value 规定按钮的初始值
name 规定按钮的名称
select标签
<select name="color" >
<option value="red">红⾊</option>
<option value="green">绿⾊</option>
<option value="blue">蓝⾊</option>
</select>
标签的分类
HTML中标签元素三种不同类型：块级元素，⾏内元素，⾏内块状元素。
块级元素:元素都从新的⼀⾏开始，并且其后的元素也另起⼀⾏；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置元素宽度在不设置的情况下，是它本身⽗容器的100%（和⽗元素的宽度⼀致），除⾮设定⼀个宽 度。
行内元素:和其他元素都在⼀⾏上；元素的⾼度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的⽂字或图⽚的宽度，不可改变。
⾏内块状元素:和其他元素都在⼀⾏上；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。
扫一扫
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
