-
HTML常见元素
-
编码
<meta charset="utf-8"> -
适配移动端界面：视口，让显示内容按照设备宽度适配。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
a[href, target]
-
img[src, alt]
-
table td[colspan, rowspan]
-
form[target, method, enctype, action]
-
input[type, value]
-
button[type]
-
select>option[value]
-
label[for(同指定元素做关联)]
-
example
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Demo</title> </head> <body> <section> <h1>链接</h1> <a href="http://www.qq.com">腾讯网</a> <a href="http://www.taobao.com" target="_blank">淘宝网</a> </section> <section> <h1>表格</h1> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td colspan="2">数据1</td> <td>数据3</td> </tr> <tr> <td rowspan="2">数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据2</td> <td>数据3</td> </tr> </tbody> </table> </section> <section> <h1>表单</h1> <form method="GET" action="http://www.qq.com"> <p> <select name="select1"> <option value="1">一</option> <option value="2" selected>二</option> </select> </p> <p> <input type="text" name="text1" /> </p> <p> <input type="password" name="password" /> </p> <p> <input type="radio" name="radio1" id="radio1-1" /> <label >选项一</label> <input type="radio" name="radio1" id="radio1-2" /> <label for="radio1-2">选项二</label> </p> <p> <button type="button">普通按钮</button> <button type="submit">提交按钮一</button> <input type="submit" value="提交按钮二"/> <button type="reset">重置按钮</button> </p> </form> </section> </body> </html>
-
-
如何理解HTML
- HTML文档
- 描述文档的结构
- 有区块和大纲
-
可以使用H5O工具对页面进行大纲的显示
-
检查HTML正确性
-
分类
-
按照默认样式分类
- 块级block
- 独占一行
- 有规则的形状
- 可以设置长宽
- 行内inline
- 不用独占一行
- 没有规则的形状，比如span内部是一长串文字，太长的情况下可以换到下一行。
- 不可以设置长宽
- inline-block
- 不用独占一行
- 但是必须是方形，如果宽度不够自己的内容不会换行。
- 可以设置长宽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>default style</title> </head> <body> <div>DIV元素</div> <p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p> <p><select><option>下拉框</option></select><span>你猜左边是什么元素</span></p> </body> </html> - 块级block
-
按内容分类（html5新增的分类方式）
参考https://www.w3.org/TR/html5/dom.html中3.2.4.2. Kinds of content节
-
-
HTML默认样式
- 默认样式的意义
- 省事
- 但是每个浏览器都会有默认样式，这个带来不统一的问题！
- 使用CSS Reset来统一
- 默认样式的意义