HTML学习笔记
#HTML学习笔记
基本框架
标记
<!DOCTYPE html>
<html lang =“ zh_CN”>
<头>
<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>标题</ title>
</ head>
<身体>
</ body>
</ html>
可打开.html
文件,直接输入html:5
调出
语句
一些规范:
1.标签使用小写,元素必须封闭
2.空元素要加斜杠以闭合 <br />
3.不使用语义化,所有样式都存放于CSS中,内容与样式分离
标记
<!DOCTYPE html>
<html lang =“ zh_CN”>
<头>
<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>标题</ title>
</ head>
<身体>
<h1>一级标题</ h1>
<h2>二级标题</ h2>
<p>起点</ p>
<!-换行符->
<br />
<!-分割线->
<hr />
<!-列表,可嵌套->
<!-有序列表->
<ol>
<li>第一项</ li>
<li>第二项</ li>
</ ol>
<!-无序列表->
<ul>
<li>第一项</ li>
<li>第二项</ li>
</ ul>
<!-链接->
<a href="https://www.google.com/">链接显示的文本</a>
<!-链接到页面特定位置,使用ID特性->
<a href="#top">返回顶部</a>
<p id =“ top”>顶部</ p>
<!-链接到其他页面的特定位置->
<a href="http://wiki-power.com/#top">导航到站外页面的某个位置</a>
<!-图像->
<img src =“ / xx.png” alt =“无法加载时的文字说明” />
<!-表格->
<表格>
<!-第一行->
<tr>
<!-第一列->
<th> </ th>
<!-第二列->
<th scope =“ col”>周六</ th>
<!-第三列->
<th scope =“ col”>周日</ th>
</ tr>
<!-第二行->
<tr>
<th scope =“ row”>数量</ th>
<td> 120 </ td>
<td> 135 </ td>
</ tr>
<!-第三行->
<tr>
<th scope =“ row”>收益</ th>
<!-跨列colspan,跨行rowpan->
<td colspan =“ 2”> 500 </ td>
</ tr>
</ table>
<!-表单,待补充->
<!-iframe,待补充->
<!-flash /视频/音频,待补充->
</ body>
</ html>
参考与致谢
- [HTML教程\ | 菜鸟教程](http://www.runoob.com/html/html-tutorial.html)
- [HTML 30分钟入门教程](http://deerchao.net/tutorials/html/html.htm)
- [HTML-头颅浅析](https://www.tielemao.com/831.html)
不使用语义化,所有样式都存放于CSS中,内容与样式分离
一级标题
二级标题
段落
- 第一项
- 第二项
- 第一项
- 第二项
顶部
跳转到站外页面的某个位置
周六 | 周日 | |
---|---|---|
数量 | 120 | 135 |
收益 | 500 |