两种标签:一般标签 & 自闭合标签 (无结束符号) 两种元素:块元素 (独占一行)& 行内元素
<!DOCTYPE HTML> <!-- 文档声明 -->
01 head
<!-- 定义一些特殊内容,浏览器不可见 -->
<title> 定义网页标题 <meta> 定义网页的基本信息(供搜索引擎) <style> 定义CSS样式 <link> 链接外部CSS文件或脚本文件 <script> 定义脚本语言 <base> 定义页面所有链接的基础定位
02 body
2.1 段落与文字
标签语义对照表
<h1>~<h6> header 标题 <p> paragraph 段落 <br> break 换行 <hr> horizontal rule 水平线 <div> division 分割 <span> span 区域
<strong> strong 加粗 <em> emphasized 斜体 <cite> cite 斜体 <sup> superscripted 上标 <sub> subscripted 下标
2.2 列表
列表type属性
< ol type = " 列表项符号" >
< li> 有序列表项</ li>
< li> 有序列表项</ li>
< li> 有序列表项</ li>
</ ol>
< ul type = " 列表项符号" >
< li> 无序列表项</ li>
< li> 无序列表项</ li>
< li> 无序列表项</ li>
</ ul>
< dl>
< dt> 定义名词</ dt>
< dd> 定义描述</ dd>
< dd> 定义描述</ dd>
</ dl>
2.3 表格
< table>
< caption> Hello Hell</ caption>
< thead>
< th> < strong> header1</ strong> </ th>
< th> < strong> header2</ strong> </ th>
</ thead>
< tbody>
< tr>
< td> 1</ td>
< td> 2</ td>
</ tr>
</ tbody>
< tfoot>
< tr>
< td> 1</ td>
< td> 2</ td>
</ tr>
</ tfoot>
</ table>
< table>
< caption> Hello Hell</ caption>
< thead>
< th colspan = " 2" > < strong> header1</ strong> </ th>
</ thead>
< tbody>
< tr>
< td rowspan = " 2" > (1,1)</ td>
< td> (1,2)</ td>
</ tr>
< tr>
< td> (2,1)</ td>
</ tr>
</ tbody>
</ table>
<table> table 表格 <tr> table row 行 <td> table data cell 表格单元格
<thead> table head 标头 <tbody> table body 表身 <tfoot> table foot 表教 <th> table header 表头单元格
2.4 图像
< img src = " 图片地址" alt = " 图片描述" title = " 图片描述" >
src 图片的文件地址 alt 图片显示不出来时的提示文字 title 鼠标移到图片上的提示文字
.JPG 可以很好处理大面积色调的图像,如相片、网页一般的图片。 .PNG 格式图片体积小,而且无损压缩,能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。 .GIF 图片图像效果很差,但是可以制作动画。
2.5 链接
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" />
< title> </ title>
</ head>
< body>
< div>
< a href = " #music" target = " _blank" > Music</ a> < br />
< a href = " #movie" target = " _blank" > Movie</ a> < br />
< a href = " #article" target = " _self" > Article</ a> < br />
</ div>
< br />
< div id = " music" >
< h1> My Music</ h1>
< ul>
< li> To the moon</ li>
< li> GRIS</ li>
</ ul>
</ div>
< br />
< div id = " movie" >
< h1> My Movie</ h1>
< ul>
< li> Kill Bill</ li>
< li> Circle of life</ li>
</ ul>
</ div>
< br />
< div id = " article" >
< h1> Article</ h1>
< ul>
< li> 《stm32》</ li>
< li> 《电子技术》</ li>
</ ul>
</ div>
</ body>
</ html>
_self 默认方式,即在当前窗口打开链接 _blank 在一个全新的空白窗口中打开链接
2.6 表单
<! DOCTYPE html >
< html>
< head>
< meta charset = " utf-8" />
< title> Sign In</ title>
</ head>
< body>
昵称:< input type = " text" name = " name" />
< div>
密码:< input type = " password" name = " pwd" />
</ div>
邮箱:< input type = " text" name = " mail" />
< select type = " multiple" size = " 1" >
< option value = " 1" > @qq.com</ option>
< option value = " 2" > @163.com</ option>
< option value = " 3" > jQuery</ option>
< option value = " 4" > Java</ option>
< option value = " 5" > Ajax</ option>
< option value = " 6" > JavaScript</ option>
< option value = " 7" > C++</ option>
< option value = " 8" > Python</ option>
</ select>
< div>
性别:
< input type = " radio" name = " sex" value = " male" checked = " checked" /> male
< input type = " radio" name = " sex" value = " female" /> female
</ div>
兴趣:
< input type = " checkbox" value = " 1" /> 旅游
< input type = " checkbox" value = " 2" /> 摄影
< input type = " checkbox" value = " 3" /> 运动
< div>
个人介绍:< br />
< textarea rows = " 6" cols = " 43" name = " intro" > More power!</ textarea>
</ div>
< div style = " text-align : center; width : 8cm; " >
< input type = " button" value = " 注册" id = " sign" />
< br />
</ div>
上传个人照片:< br />
< input type = " file" value = " 选择照片" />
</ body>
</ html>
text 单行文本框 password 密码文本框 button 按钮 reset 重置按钮 image 图像形式的提交按钮 radio 单选按钮 checkbox 复选框 hidden 隐藏字段 file 文件上传