<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
<!--
h1 标题 :
h后面数字 取值范围: 1~6
-->
<h1> 标题1 </h1>
<h2> 标题2 </h2>
<h3> 标题3 </h3>
<h4> 标题4 </h4>
<h5> 标题5 </h5>
<h6> 标题6 </h6>
<h77> 标题h77 </h77>
普通文本
<!--水平分割线-->
<hr />
<p> 段落1 </p>
<p> 段落1 </p>
<p> 段落1 </p>
<hr />
<!--
font 标签常用属性
color: 颜色
size : 改变字体大小 范围:1~7
face : 字体
<标签 属性的名称="属性的值">
-->
我要<font color="red" size="1">回家 !!!</font> <br />
我要<font color="red" size="2">回家 !!!</font> <br />
我要<font color="red" size="3">回家 !!!</font> <br />
我要<font color="red" size="4">回家 !!!</font> <br />
我要<font color="red" size="5">回家 !!!</font> <br />
我要<font color="red" size="6">回家 !!!</font> <br />
我要<font color="red" size="7" face="仿宋">回家 !!!</font> <br />
我要<font color="red" size="77">回家 !!!</font> <br />
<p>
<font>大家好,唔喺<b><i>渣渣辉</i></b>,<strong>汤王懒月</strong>给你不一样的<em>床新体验</em></font>
</p>
</body>
</html>
- <!DOCTYPE html>:声明页面类型
- <html>:根标签
- <head>:头部分,主要是用来放置一些页面信息
- <body>:体部分 :,主要来放置我们的HTML页面内容
- <meta>:元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
- <title>:网页标题
- <h1>:标题标签,数字(1-6)控制标题大小,数字越大标题越小
- <hr>:水平线分隔段落
- <font>:字体标签,color: 颜色; size : 改变字体大小,范围:1~7 ; face : 字体
- <p>:标记一个段落
- <b>:加粗
- <i>:斜体
- <strong>:标签和 <em>标签一样,用于强调文本,但它强调的程度更强一些,加粗显示。
- <em>:强调文本,斜体显示
<img src="../img/小黄图.jpg" width="500px" alt="这张图片可能加载问题" />
- <img>:图片标签。
常用属性:src:图片路径
width : 指定图片宽度 height : 图片高度
alt : 文件加载失败时的提示信息
相对路径:./代表的是当前路径
../ 代表的上一级路径
../../ 上上一级路径
<!--无序列表
ul
li 列表项
type属性 . 小圆圈, 小方块, 默认小黑点
-->
<ul type="square">
<li>百合网</li>
<li>世纪佳缘</li>
<li>珍爱网</li>
</ul>
<hr />
<!--
有序列表
常用属性:
type : 指定序号的类型
start : 从几开始,必须得写数字
-->
<ol type="a" start="2">
<li>百合网</li>
<li>世纪佳缘</li>
<li>珍爱网</li>
</ol>
<ul>
<li style="display: inline;"><a href="http://www.baihe.com" target="_blank">百合网</a></li>
<li style="display: inline;"><a href="http://www.jiayuan.com">世纪家园</a></li>
<li style="display: inline;">珍爱网</li>
<li style="display: inline;">非诚勿扰</li>
</ul>
- <ul>:无序列表,type:指定序号类型,可以指定为小圆圈,小方块,默认是小黑点
- <ol>:有序列表,列表项前有数字 start:指定从何开始
- <li>:列表项
- <a>:超链接,
herf:链接地址,如果是网络地址需要加上http协议 ,如果访问的是本网站的html文件,可以直接写文件路径
target : 以什么方式打开
_self: 默认打开方式,在当前窗口打开
_blank: 新起一个标签页打开页面
<table width="100%" >
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
</td>
<td>
<img src="../image/header.jpg" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1px" width="400px">
<tr>
<td colspan="2">11</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td rowspan="2">44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
</tr>
</table>
- <table>:表格
常用的属性:
bgcolor : 背景色
width : 宽度
height : 高度
align : 对齐方式
- <tr>:标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
- <td>::标签定义 HTML 表格中的标准单元格。
- <th>:定义表格内的表头单元格。th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。
- 单元格合并:
colspan : 跨列
rowspan : 跨行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单标签
action : 直接提交的地址
method :
get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
post 方式 会将参数封装在请求体中, 没有这样的限制
input :
type: 指定输入项的类型
text : 文本
password : 密码框
radio : 单选按钮
checkbox : 复选框
file : 上传文件
submit : 提交按钮
button : 普通按钮
reset : 重置按钮
hidden : 隐藏域
date : 日期类型
tel : 手机号
number : 只允许输入数字
placeholder : 指定默认的提示信息
name : 在表单提交的时候,当作参数的名称
id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
textarea : 文本域, 可以输入一段文本
cols : 指定宽度
rows : 指定的是高度
select : 下拉列表
option : 选择项
-->
<form action="../index.html" method="post" >
<!--隐藏域
主要是用来存放页面上一些ID信息
-->
<input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/>
<!--文本输入框-->
用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
<!--密码框-->
密码: <input type="password" placeholder="请输入密码" /> <br />
确认密码: <input type="password" /> <br />
邮箱: <input type="text" /> <br />
手机号码: <input type="tel" /> <br />
靓照: <input type="file" /> <br />
性别: <input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<input type="radio" name="sex" />妖 <br />
爱好:
<input type="checkbox" />抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />烫头
<input type="checkbox" />撸代码
<input type="checkbox" />大宝剑
<br />
择偶要求:
<textarea cols="40" rows="4"></textarea><br />
籍贯 :
<select>
<option>--请选择--</option>
<option>湖北</option>
<option>内蒙古</option>
<option>火星</option>
</select>
<br />
出生日期:
<input type="datetime-local" /> <br />
验证码: <input type="text" /><br />
<input type="submit" value="注册"/>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
</form>
</body>
</html>
- 表单标签:
action : 直接提交的地址
method :
get 方式 默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
post 方式 会将参数封装在请求体中, 没有这样的限制
- input :
type: 指定输入项的类型
text : 文本
password : 密码框
radio : 单选按钮
checkbox : 复选框
file : 上传文件
submit : 提交按钮
button : 普通按钮
reset : 重置按钮
hidden : 隐藏域
date : 日期类型
tel : 手机号
number : 只允许输入数字
placeholder : 指定默认的提示信息
name : 在表单提交的时候,当作参数的名称
id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
- textarea : 文本域, 可以输入一段文本
cols : 指定宽度
rows : 指定的是高度
- select : 下拉列表
option : 选择项
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
- <framset>:框架标签
注意: 使用了frameset必须将body删掉,否则页面会有问题
常用属性:
src: 引入的html文件路径
name: 指定框架的名称