前端（一）HTLM
目录
a.div标签和span标签 b.a标签 c.列表 d.表格 e.form标签 f.input标签 g.select标签 h.label标签 i.textarea多行文本
1.1HTML文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。
HTML注释：<!--注释内容-->
HTML标签分类
行内标签：包含a、span、em、strong、b、i、u、label、br；
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！
a标签：主要用来链接一个其他的网页；
span标签：主要用来对行内的文字进行一些样式以及其他的操作；
em标签：一般用来对文字进行强调，使用斜体体现出来；
strong标签：一般用来对文字进行强调，使用加粗字体体现出来；
img标签：图片引用标签，其中 src属性中写入图片的地址；
var标签：JavaScript中命名变量的标签。
块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
p标签：段落标签，段落文字使用，默认格式：段尾进行换行；
div标签：划分块的主要使用标签；
ul标签：无序列表的主标签，后面的标号为圆点（黑色）；
ol标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5...；
li标签：列表中的主体使用标签
dl标签：自定义标签的主标签；
dt标签：自定义标签的表头；
dd标签：自定义标签的表头的解释（描述）信息；
h1~h6：6级标题标签、字体的大小依次变小。
行内块标签：img,input,textarea
特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
+++++++++++++++++++++++++++++++++++++++++
各种标签之间的转换
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;
各个标签之间的区别
块标签：独自占领一行、可以进行宽高的数值的设定；
行标签：在一行内显示、不可以进行宽高的数值设定；
行内块标签：能和其他元素待在一行，能设置宽高；
嵌套规则
块标签可以套行标签，行标签不可以套块标签。
P标签不要套块属性标签，可以套a，span，文本。。。
嵌套的时候注意代码的缩进
---------------------
作者：StoneAir18
来源：CSDN
原文：https://blog.csdn.net/zilaiye1314/article/details/78060952
版权声明：本文为博主原创文章，转载请附上博文链接！1.2head常用标签
<title>我的第一个HTML页面</title>
<style>
a {
color: green;
}
</style>
<link rel="stylesheet" href="test.css">
<meta charset="UTF-8">
name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人
查找信息和分类信息用的
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="百度">
<!-- 2秒后刷新-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">1.3body常用标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
标题大小
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
<img id="标识名字" src="图片地址" alt="文件丢失后显示的名字" title="图片名字" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)>特殊字符
a.div标签和span标签
div标签用来定义一个块级元素
span标签用来定义内联(行内)元素
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
<div>我是div标签</div>
<div>我是div标签</div>
<span>我是span标签</span>
<span>我是span标签</span>
我是div标签
我是div标签
我是span标签 我是span标签b.a标签
超链接标签：从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://网址" target="_blank" >点击</a>
<a href="#a2">a1跳a2</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页c.列表
1.无序列表
<ul type="none">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）2.有序列表
<ol type="A" start="2">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
start:初始位置3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>d.表格
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
tr 元素定义表格行，th 元素定义表头（thead里面的列），td 元素定义表格单元（tbody tfoot里面的列）.
属性:
border: 表格边框.
cellpadding: 内边距，文字与表边的距离
cellspacing: 外边距.表边与表边的距离
width: 像素 百分比.（最好通过css来设置长宽）
style="border-collapse:collapse;" //实线
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）<table border="1" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">小明</td>
<td rowspan="2">跑步</td>
</tr>
<tr>
<td>小红</td>
<td>18</td>
</tr>
</tbody>
</table>
e.form标签
表单属性
f.input标签
属性说明:
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button"（普通按钮）, "reset"（重置）, "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
text：<input name="name" type="text" placeholder="小强" disabled> 输入框里的默认值：placeholder 不影响出入 ，values='小强'确实存在
number：只允许输入数字g.select标签
下拉菜单
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
分组：optgroup--label
<form action="" method="post">
<select name="city" id="city">
<optgroup label="北京">
<option value="cp">昌平</option>
<option value="cy">朝阳</option>
<option value="hd">海淀</option>
<option value="ft">丰台</option>
</optgroup>
<optgroup label="上海">
<option value="pdxq">浦东新区</option>
<option value="mhq">闵行区</option>
<option value="hpq">黄浦区</option>
</optgroup>
</select>
</form>
多选ctrl+
<select name="from1" id="s11" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sc">四川</option>
</select>h.label标签
定义：<label> 标签为 input 元素定义标注（标记）。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
//for 与 id 关联
//性别选项，用label可以点击文字i.textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
