文档结构: <!-- 定义文档类型 --> <!DOCTYPE html> <!-- 文档 --> <html lang='en'> <!-- 仅仅为了提示浏览器,该翻译我了 --> <head> <meta charset='UTF-8'> <!-- 规定编码格式 --> <title>赵天一</title> <!-- 标题,你的页面上在浏览器上显示的内容 --> </head> <body> 页面内容 </body> </html>
h1~h6
标题标签,一级标题,一个页面中只能存在一个h1
数字越大,标题的级别越小
超过数字6,浏览器不做渲染(浏览器解释你的写的代码之后的结果)
<html lang="en"> <!-- 仅仅为了提示浏览器,该翻译我了 --> <head> <meta charset="UTF-8"> <!-- 规定编码格式 --> <title>赵天一</title> <!-- 标题,你的页面上在浏览器上显示的内容 --> </head> <body> <h1>得劲的第一次</h1> <br>
<h2>得劲的第一次</h2> <p>
<h3>得劲的第一次</h3> <h4>得劲的第一次</h4> <h5>得劲的第一次</h5> <h6>得劲的第一次</h6> <h7>得劲的第一次</h7> 带劲坤的第一次还在吗? </body> </html>
br 换行
p 段落,自带换行,前后自带间隙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张梦书</title> </head> <body> <a name="top"></a> <a href="#dibu" title="鼠标放上来就出来的文字">回到底部</a> <a href="http://www.luffycity.com" target="_blank">昨晚浏览的网站:www.4399.com</a> <p> <h2>得劲的第一次</h2> <h3>得劲的第一次</h3> <h4>得劲的第一次</h4> <h5>得劲的第一次</h5> <h6>得劲的第一次</h6> <h7>得劲的第一次</h7> <h2>得劲的第一次</h2> <h3>得劲的第一次</h3> <h4>得劲的第一次</h4> <h5>得劲的第一次</h5> <h6>得劲的第一次</h6> <h7>得劲的第一次</h7> <h2>得劲的第一次</h2> <h3>得劲的第一次</h3> <h4>得劲的第一次</h4> <h5>得劲的第一次</h5> <h6>得劲的第一次</h6> <h7>得劲的第一次</h7> <h2>得劲的第一次</h2> <h3>得劲的第一次</h3> <h4>得劲的第一次</h4> <h5>得劲的第一次</h5> <h6>得劲的第一次</h6> <h7>得劲的第一次</h7> <h2>得劲的第一次</h2> <h3>得劲的第一次</h3> <h4>得劲的第一次</h4> <h5>得劲的第一次</h5> <h6>得劲的第一次</h6> <h7>得劲的第一次</h7> <a href="http://www.luffycity.com" target="_self">昨晚浏览的网站:www.4399.com</a> <a name="dibu"></a> <a href="#top">回到顶部</a> </body> </html>
a
href属性:指定将要跳转到的地址
地址可以是网络连接,也可以是本地连接
target:
_slef:本页面,默认
_blank:另起页面
锚链接属性:
设置锚点:通过name属性设置锚点名称
通过href:找掉锚点
title:鼠标放上去后显示解释的文字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张梦书</title> </head> <body> <H1>张梦书</H1> <img src="http://p3.pstatp.com/large/pgc-image/50e2d810ee53418fa5b4f4f8a" alt="此图片是一个车模"> <p> <img src="某美女.jpg" alt="" title="鼠标放上去后,显示的文字" align="center"> </body> </html>
img
src:可以连接图片网络地址,也可以连接本地图片的地址.
alt:当图片损坏的时候,提醒用户这是什么东西.
width:宽度,单位是像素
height:高度,单位是像素
title:鼠标放上去后的文字
align:默认靠左,设置成right就可以靠右
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张梦书</title> </head> <body> <ul type="circle"> <li>list</li> <li>append</li> <li>insert</li> <li>pop</li> <li>pop</li> </ul> <ol type="A" start="2"> <li>吃饭</li> <li>学习</li> <li>看书</li> <li>python</li> <li>前端</li> <li>linux</li> <li>Java</li> </ol> <dl> <dt>黑哥</dt> <dd>不爱穿胖次</dd> <dd>天天偷胖次</dd> <dd>再吃</dd> <dd>再偷</dd> <dd>再吃</dd> <dd>没吃饱</dd> </dl> </body> </html>
无序列表ul
只能包裹li
更改无序列表的类型用type:默认是实心圆,可更改为空心圆(circle),及正方块(square)
ol有序列表
只能包裹li
type更改序号的类型,可以是字母,阿拉伯数字,古罗马数字
start:序列从哪开始
dl:定义列表
dt,定义列表的标题
dd:内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张梦书</title> </head> <body> <table border="'5px" bordercolor="red" width="890px" height="1334px" align="center" > <tr> <td>姓名</td> <td>性别</td> <td>爱好</td> <td>年龄</td> <td>职业</td> </tr> <tr> <td>哭加为</td> <td>不详</td> <td>抠脚</td> <td>83</td> <td>职业抠脚</td> </tr> <tr> <td bgcolor="#8a2be2">江老师</td> <td rowspan="2">母</td> <td colspan="2">男</td> <td>16</td> <td>兽医</td> </tr> </table> </body> </html>
table
tr:代表一行
td:代表一行内的一个单元格
table有很多的属性
border:边框,可设置soild,也可以设置成像素单位
bordercolor:边框的颜色
width:宽度,单位是px
height:高度,单位是px
bgcolor:背景颜色
background:背景图片
align:对齐方式
单元格的合并:colspan横向合并,rowspan纵向合并
style="border-collapse: collapse" 它的作用是让表格的线变成一条实心线,但是不能跟单元格合并的操作一起使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张梦书</title> </head> <body> <form> <label for="1">用户名:</label> <input type="text" id="1" name="username" value="车干" height="32px"> <br> <br> <label for="2">密码:</label> <input type="text" id="2" name="password" value="密码" height="32px"> <br> <input type="checkbox"> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="submit" value="提交"> <input type="button" value="提交"> <input type="file" > <input type="date"> <input type="image" width="20px"> <select multiple size="10"> <option value="zhengyanggao" >蒸羊羔</option> <option value="zhengxiongzhang">蒸熊掌</option> <option value="">蒸鹿尾</option> <option value="">烧花鸭</option> <option value="" selected>一盆米饭我够了</option> </select> <textarea></textarea> </form> </body> </html>
type=password的时候是密文输入框 | value属性定义一个要给服务器的值
type=checkbox的时候是选择框
type=radio的时候是单选框
type=submit,提交按钮
type=file,提交文件
type=date日期输入框
type=image图片提交,自带submit
select
option,每一个下拉选项
默认选中:selected
允许多选:multiple
size:下拉框的大小