文章目录
HTML 标签参考手册 (w3school.com.cn)
html
常见浏览器内核
浏览器内核
-
IE等常规国产浏览器：Trident
-
firefox：Gecko
-
Safari：Webkit
-
chrome/Opera等国产浏览器：Blink（Webkit分支）
标题标签
h1~h6
段落标签
<p>根据浏览器大小自动换行，段落间有距离</p>
<br/> 换行标签
文本格式化标签
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除</del>
<s>删除</s>
<ins>下划线</ins>
<u>下划线</u>
盒子布局
<div>
大盒子，一个占一行
</div>
<span>
小盒子，可以在同一行
</span>
图像标签
路径
根目录：
打开目录文件夹
相对路径：
相对于当前文件的位置，同级路径直接写图片名
下一级路径 同级文件名（图片在该文件内）/menu.png
上一级路径…/menu.png
绝对路径
通常从盘符开始
注意：绝对路径斜杠方向为”\“
标签
<img src="image/menu.png" title="鼠标放上时显示的文字"
alt="图片显示不出来时显示"
width="100" height="100">
border="15"/><!--border通常用css设置-->
超链接标签
下载链接
<a href="压缩包名">下载文件</a>
<!--当遇到txt,png,jpg等浏览器支持打开的文件时
使用<a href="文件路径" downloda="文件名">点击下载</a>-->
外部链接
target设置打开新界面或本界面打开
<a href="http://www.qq.com" target="_blank">腾讯</a>
内部链接
链接文档内部文件
<a href="1-2.html" target="_blank">1-2</a>
锚点
锚点链接将指向锚点内容
<h3 id="maodian">锚点内容</h3>
<a href="#maodian">锚点链接</a>
其他符号
空格
小于号<大于号>
等等等等…
表格标签
标签
表格其他属性一般使用css
align对齐:left\center\right
border边框:1或默认无
cellpadding单元格与内容间隙:默认为1
cellspacing单元格之间的间隙:默认为2
width height表格的宽高:像素或百分比
<table>整体
<tr>行
<td>单元格或 <th>表头单元格
</td> </th>
</tr>
</table>
<table>
<thead>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td> <td>男</td> <td>18</td></tr>
</tbody>
</table>
合并单元格
rowspan跨行合并
colspan跨列合并
合并后要删除多余单元格
<table border="1px" cellspacing="0" width="300" height="300">
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
效果为
列表标签
主要用于布局
css去掉li前面的项目符号
list-style:none;
无序列表
<ul>
<li></li>
<li></li>
</ul>
注意：
- 标签中只能嵌套
- ，
- 可以随意嵌套
有序列表
<ol>
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
-
中只能包含
和
表单标签
表单为了汇总用户信息
含有表单域、表单控件、提示信息
<form action="url地址（后台）" method="提交方式" name="表单域名称">
-
除了type属性外还有name定义名称，单选和复选框必须有相同的name
-
value规定值
对于不同类型的 input 元素，value 属性的用法也不同：
对于 “button”, “reset”, “submit” 类型 - 定义按钮上的文本；
对于 “text”, “password”, “hidden” 类型 - 定义输入字段的初始（默认）值；
对于 “checkbox”, “radio”, “image” 类型 - 定义与 input 元素相关的值。该值会发送到表单的 action URL；
-
checked规定input首次加载时被选中
-
maxlength规定最大长度
<form>
用户名：<input type="text" name="username" value="请输入用户名"><br>
密码：<input type="password"><br>
<!--radio单选按钮 性别起相同的名字实现多选一-->
性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女">
<br>
<!--checkbox复选按钮-->
爱好：吃饭<input type="checkbox" name="fun"> 睡觉<input type="checkbox" name="fun">
<!--点击提交后可以将表单域中的值提交到后台服务器-->
<input type="submit" value="注册">
<input type="reset" value="重置">
<!--button主要用于与js交互-->
<input type="button" value="获取短信验证码">
<!--文件域 上传文件-->
上传头像<input type="file">
<!--label标签点击文本自动将光标转到对应表单元素，优化用-->
<input type="radio" id="se"/>
<label for="se">男</label>
<!--select下拉表单-->
籍贯：
<select>
<option selected="selected">山西</option>
<option>北京</option>
</select>
<!--textarea文本域-->
<textarea rows="3" cols="20">文本内容</textarea>
</form>
效果为
用户名：密码：
性别：男 女
爱好：吃饭 睡觉 上传头像 籍贯： 山西 北京 文本内容
demo1(附注意事项)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格布局注册页</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<table width="500">
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"> <label for="nv">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
<select>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<select>
<option>北京</option>
<option>上海</option>
</select>
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
未婚<input type="radio" name="qingkuang">
已婚<input type="radio" name="qingkuang">
离婚<input type="radio" name="qingkuang">
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select>
<option>专科</option>
<option>本科</option>
</select>
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="like">妩媚的
<input type="checkbox" name="like">可爱的
<input type="checkbox" name="like">小鲜肉
<input type="checkbox" name="like">都喜欢
</td>
</tr>
<tr>
<td>个人介绍</td>
<td><textarea rows="3" value="自我介绍">自我介绍</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" checked="checked" value="同意条款">我同意注册条款</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<li>年满18岁</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</td>
</tr>
</table>
</body>
</html>
<!--在使用div布局前，表格布局是最好的-->
<!--
注意：不能直接使用tr，必须嵌套td使用
1.块级元素
div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、
noscript、ol、p、pre、table、ul ...
特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，宽度缺省是它的容器的100%，除非设定一个宽度
功能：主要用来搭建网站架构、页面布局、承载内容
2.行内元素
span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、
samp、select、small、strike、strong、sub、sup、textarea、tt、u、var ...
特点：和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变
功能：用于加强内容显示,控制细节，例如：加粗、斜体等等
嵌套时要注意：
1.块级元素与块级元素平级、内嵌元素与内嵌元素平级
2.块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素
3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素
h1、h2、h3、h4、h5、h6、p、dt
4.块级元素不能放在标签p里面
5.li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器
html元素显示优先级
帧元素>HTML元素优先，表单元素总>非表单元素优先
即为有窗口的总是优先于无窗口的
-->
效果图
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
