HTML:
超文本标记语言(Hyper Text Markup Language)
Html基本结构 <!DOCTYPE html> <html> <!-- 定义HTML文档 --> <!-- 注释 --> <head> <meta charset="UTF-8"> <title>helloworld</title> </head> <body> <!-- 定义文档主题 --> <h1>标题1</h1> <h2>标题2</h2> <h6>标题6</h6> <br><br/> <!-- 插入折行, 换行 --> <hr> <!-- 插入水平线 --> <p>定义段落</p> <p>曲曲折折的荷塘上面弥漫着甜甜的叶子</p> <p>曲曲折折的荷塘上面弥漫着甜甜的叶子</p> <p>曲曲折折的荷塘<br>上面弥漫着甜甜的叶子</br></p> </body> </html>
基本标签
字符实体 (区分大小写)
格式化标签
标题标签: <h1>标题</h1> (h1--h6)
段落标签:<p>段落</p>
定义水平线: <hr/>
字体标签: <font color=red size="1">Python</font> (size范围 1--7)
<b>加粗</b><br/>
<strong>强调</strong><br/>
<h1>标题</h1><small>小标题</small><br/>
下标:水的化学式:H<sub>2</sub>O<br/>
上标:X的平方:X<sup>2</sup><br/>
<pre>
保持原格式不变
静 夜 诗
床前明月光,疑似地上霜;
举头望明月,低头思故乡;
</pre>
有序列表,无序列表
有序列表 <ol>
type属性:指定列表类型。它的值可以是:1、a、A、i、I
无序列表 <ul>
type属性:指定列表类型
disc: 点
square: 方块
circle: 圆圈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 无序列表 type属性:指定列表类型 disc: 点 square: 方块 circle: 圆圈 --> 你喜欢的菜: <ul type="circle"> <li>宫保鸡丁</li> <li>黄焖鸡</li> <li>包角</li> </ul><br/> <!-- 有序列表 type属性:指定列表类型。它的值可以是:1、a、A、i、I --> 你喜欢的明人: <ol type="A"> <li>刘德华</li> <li>刘明星</li> <li>凤姐</li> </ol><br/> <!-- 定义标签 --> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html>
列表
<body> <dl> <dt>car</dt> <dd>玛莎拉蒂</dd> <dd>本田</dd> <dd>奔驰</dd> <dt>tea</dt> <dd>普洱</dd> <dd>龙井</dd> </dl> </body>
超链接标签
<a href="https://www.baidu.com" target="_self">百度一下</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- a标签:超链接标签 工作原理: 1)如果a标签的href属性是以http开头,那么浏览器就会启用http协议解析该网址内容; 2)如果a标签的href属性是以其他协议开头,那么浏览器就会检查注册表中是否存在处理该协议的软件。 如果存在就打开软件处理该协议。 3)如果a标签是以file协议开头,那么浏览器就会在当前目录下查找是否存在指定资源; target:指定网页的打开方式 _self:在当前窗口中打开 _blank: 在新窗口中打开 --> <a href="http://www.oldboyedu.com" target="_blank">老男孩</a> </body> </html>
锚点定位
<body> <pre> type <a href="#aa">CorruptInputError</a> <!-- 定义锚点 name: 指定锚点名字 --> <a name="aa">type CorruptInputError</a>
.....很多正文
</pre> </body>
图像
<body> <a href="http://www.jd.com"><img src="img/time2.jpg" alt="这是美女"/></a> </body>
图像由<img>标签定义
src属性用于指定图像的位置
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。
表格
<thead>定义表格头,可以没有;<tfoot>定义表格底部,也是可以没有;<tbody>定义表格体,至少有一个
<table border="1" width="400" height="200" cellspacing="0" >
cellspacing:设置每一个单元格之间的空白
border: 设置边框的宽度
<caption>学员成绩表</caption> 表格的标题
rowspan:跨行,即指定单元格向下合并;
colspan:跨列,即指定单元格向右合并

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<h1>学员成绩表</h1>--> <!-- border: 设置表格边框的宽度 表格的宽度,以像素为单位 height:设置表格的最小高度 cellspacing:设置每一个单元格之间的空白 --> <table border="1" width="500" height="200" cellspacing="0" align="left"> <!-- 表格标题 --> <caption>学员成绩表</caption> <thead> <!-- align: 设置行或列的对其方式,它的值可以是: left左对齐、center居中、right右对齐、justify两边对齐 --> <tr align="left"> <!-- 表格头 --> <th>姓名</th> <th>性别</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td align="center">小宝</td> <td rowspan="3">男</td> <td>100</td> </tr> <tr align="center"> <td>大宝</td> <!--<td>男</td>--> <td>90</td> </tr> <tr> <td>大大宝</td> <!--<td>男</td>--> <td>95</td> </tr> <tr> <td>平均成绩:</td> <td colspan="2">95</td> <!--<td></td>--> </tr> </tbody> </table> </body> </html>
框架标签