1. 结构元素顺序
|- 文档版本声明
|-html 标签
- |-head
- |-meta
- |-title
- |-link
- |-style
- |-script
- |-body
|-style,script, 其它语义标签
块级元素: 占满一行
行内元素: 在一行内一个挨着一个
注释:
行注释:
<!-- -->
注释掉不在页面显示
段落注释
- <!-- 页面开始 -->
- <!-- 页面结束 -->
主要用来区分这部分代码以及介绍
条件注释
<!-- [if IE 8]>
<div > 是 ie8</div>
<![endif]-->
条件注释只在 IE10 以下版本的浏览器中生效, 兼容性检查必备
2.1 标题
块级元素
- <h1>
- 一级标题, 32px
- </h1>
- <h2>
- 二级标题, 24px
- </h2>
- <h3>
- 三级标题, 18px
- </h3>
- <h4>
- 四级标题, 16px
- </h4>
- <h5>
- 五级标题, 14px
- </h5>
- <h6>
- 六级标题, 12px
- </h6>
2.2 段落标签
块级元素
<p > 段落内容 </p>
2.3font 标签
格式化文本, 只能控制字体, 大小, 颜色, 不建议使用 (已过时)
<font size face color > 文字内容 </font>
颜色的三种表示方法 颜色名 16 进制 rgb 颜色 (red,#ffaabb,rgb(185,125,33))
2.4 链接标签
- <a href="" target="">
- </a>
- href:(正确读音 ref)
"javascript:;", 禁止跳转 (可通过 JS 跳转)
"http://www.imooc.com/", 跳转指定链接
"元素选择器", 页内锚点
target:
"_blank", 新窗口打开
"_self", 本窗口打开 (默认)
使用 CSS 对 a 标签的样式修饰
- a{
- text-decoration:none;/* 删除下划线 */
- cursor:none;/* 删除光标悬浮小手 */
- }
- a:visited{
- color:#333333;/* 改变链接访问过的默认颜色 */
- }
2.5 图像
支持格式: PNG jepg gif PDF
<img/>
src: 图片路径
alt: 加载失败时提示
非标签方式插入图片
- .imooc-logo {
- background: url(img/logo.PNG);
- width: 200px;
- height: 80px;
- }
- <p class="imooc-logo"></p>
2.6 列表
无序列表, type 属性不建议使用
- <ul type=''>
- <li > 苹果 </li>
- <li > 水蜜桃 </li>
- </ul>
- type:
disk 小圆点
circle 空心圆
square 正方形
有序列表
- <ol>
- <li > 烤冷面 </li>
- <li > 麻辣烫 </li>
- </ol>
自定义列表
- <dl>
- <dt > 正数 </dt>
- <dd > 大于 0 的数 </dd>
- <dt > 负数 </dt>
- <dd > 小于 0 的数 </dd>
- </dl>
2.7div 标签
div 块, 用来布局, 很常用, 很重要
3. 带格式作用的标签
3.1 文本格式化
加粗 < b> <Strong>
强调 (斜体)<em>
大号字体 < big>
小号字体 < small>
下标 < sub>
上标 < sup>
一般不使用这些标签, 可能在不同的浏览器下表现形式不一致, 直接用 CSS 修饰
预格式文本
pre 自带缩进, 主要用来包括代码
引用
<blockquote> 不常使用
删除线
删除线 < del>
下划线 < ins>
兼容性不好, 一般用 CSS 模拟
3.2 表格
表格头 [可选]
表格体 [可选]
表格行 [必选]
单元格 [必选]
- <table>
- 表格体, 表格容器
- <thead>
- 表格头
- <tbody>
- 表格体
- <tfoot>
- 表格尾
- <tr>
- 行
- <th>
- 表格头 (加粗)
- <td>
- 列
表格属性
border 边框 值影响 table 的粗细
cellspacing 单元格边距
cellpadding 单元格内边距
colspan 单元格跨列 (左右合并, 从左到右合并)
rowspan 单元格跨行 (上下合并, 从上到下合并)
align 对齐方式
3.3HTML 表单
<form action method name autocomplete enctype></form>
autocomplete: 浏览器是否可以自动填充
enctype: 指定表单内容编码, 默认 UTF-8
- input(text,password,radio,checkbox,button)
- <input type="text" value="默认值" maxlength="限制输入字符个数"/>
- <input type="password" value="默认值"/>
- <!--checked 默认选中 -->
- <input type="radio" name="sex"/><input type="radio" name="sex"/><!-- 同一 name 为一组 -->
- <input type="checkbox" checked/><input type="checkbox"/><!-- 同一 name 为一组 -->
- <input type="button" value="注册"></input>
- <input type="number"><!--h5 中新加入的属性 -->
- <input type="date"><!--h5 中新加入的属性 -->
- <input type="color">
- <input type="range" min="0" max="100"><!-- 拖动条 -->
- <input type="email"><!-- 引入邮件的格式校验 -->
- <input type="url"><!-- 引入 url 的格式校验 -->
- <input type="file" multiple="multiple"><!--multiple 多文件选择 -->
- <input type="submit">
- select
- <select name="">
- <option value=""></option>
- <option value="" selected></option>
- </select>
- textarea
- <textarea rows="几行高度" cols="几个字符宽度"></textarea>
- <!-- 使用 css 禁止拖拽大小 -->
- textarea{
- resize:none;
- }
- button
- <button type="submit" form="表单名"></button>
- <!-- 当类型为 submit, 但不在 form 中时, 用 form 属性指定表单名 -->
- type:
submit 提交表单
reset 重置表单输入
HTML
来源: http://www.bubuko.com/infodetail-3123813.html