基本标签：h1-标题6,hr水平线，文本加粗b,斜体i,字体font,换行br，段落p，color颜色标签，
<body>
<!--
HTML语法:
标签形式 <标签名> </标签名>
全部小写字母
标签中添加属性
<标签名 属性名="属性值" 属性名="属性值">
-->
<!--
标题标签
hn n取值是1-6
数字越小,字体显示越大
-->
<h1>标题h1</h1>
<h3>标题h3</h3>
<h6>标题h6</h6>
<!--
水平线
hr 内部结束
属性: size 粗细 单位是像素
color颜色:
英文方式
十六进制 #00 00 00
noshade 阴影属性,属性值="noshade"
-->
<hr size="5" color="red"/>
<!--
文本加粗,斜体
<b> <i>
-->
<b>文本加粗</b> <i>文本斜体</i> <b><i>加粗和斜体</i></b>
<br />
<!--
字体标签
font
标签属性:
size: 文本大小
color: 文本颜色
face : 字体,使用的是宋体
-->
<font size="7" color="blue" face="宋体">字体标签</font>
<!--
段落标签
p
-->
<p>
这是一个段落标签
</p>
<p>
这是一个段落标签
</p>
</body>
table 表格案例：
<body>
<!--
表格标签:
作用: 页面布局,排版
table: 表格,制表
tr: 行标签
th: 表头标签: 单元格文本,自动居中,加粗
td: 单元格 (列) 写表格中的内容
table标签的属性:
border="像素"
cellpadding="0" 单元格里面内容和单元格的距离
cellspacing="0" 单元格与单元格之间的距离
align 水平对齐属性,取值 left right center
width: 像素,可以写百分比
bgcolor:表格背景色
-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" align="center">
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
</tr>
<tr align="center">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
列表标签：有序列表: ol， 无序列表: ul， 列表项: li
<body>
<!--
列表标签:
有序列表: ol
属性: start="从几开始" type="显示什么形式" 字母,数字,罗马数字
无序列表: ul
属性: type="显示什么形式" disc 原点,circle 空心圆,square 方块
列表项: li
-->
<ol start="260" type="1">
<li>百度</li>
<li>网易</li>
<li>黑马</li>
<li>百合</li>
</ol>
<ul type="square">
<li>百度</li>
<li>网易</li>
<li>黑马</li>
<li>百合</li>
</ul>
</body>
a标签，案列：
<body>
<!--
超链接:
从一个页面,跳转到另一个页面
标签 <a> </a>
属性: href="另一个页面的路径"
属性: target="默认值 _self" 属性值 _blank 从新窗口打开连接
-->
<a href="公司简介.html">点我跳转到公司简介</a>
<ol start="260" type="1">
<li><a target="_blank" href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.163.com">网易</a></li>
<li><a href="http://www.itheima.com">黑马</a></li>
<li><a href="http://www.baihe.com">百合</a></li>
</ol>
</body>
图片标签 img：
<body>
<!--
页面中添加图片
标签 <img />
属性: src="图片的路径"
相对路径
属性: width 宽度 height 高度
title="图片标题"
alt="图片加载失败"
-->
<img src="img/mm.jpg" width="500" height="300"/> <br />
<img src="img/registImg.jpg" title="剁手价格!" alt="图片要是加载失败就显示这段文字?"/>
</body>
合并单元格标签：colspan跨列，rowspan跨行
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" align="center">
<tr>
<!--跨列操作,横向 属性 colspan="几列"-->
<td colspan="3">1-1</td>
<!--<td>1-2</td>
<td>1-3</td>-->
</tr>
<tr >
<!-- 跨行操作,纵向,属性 rowspan="几行" -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
框架标签frameset，框架frame页面引用：
框架页面，不能有body标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
页面进行分割,像素分割
rows:行切 80,*
上面部分80,下面全满
-->
<frameset rows="80,*">
<!--上面部分,a.html -->
<frame name="top" src="a.html">
<!-- 页面进行分割, cols列分，左边150，右边全满 -->
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
</html>
div布局标签，span标签：
<body>
<!--
div标签:
div 块级元素标签
霸占屏幕的一行
就是页面中的一个行
配合CSS样式表
span标签:
span 行级元素标签
不会占屏幕一行
配合CSS样式表
-->
<div>123</div>
<span>我是span标签</span>4
</body>
form表单：
输入标签: input，文本输入框，密码输入框， 单选按钮，复选按钮，文件上传，button按钮,重置按钮(几乎不用)，提交按钮，下拉菜单，多行文本域（几乎不用，都用在线编辑器了，例如:UEidter）,服务器提交方式GET和POST区别
<body>
<!--
表单标签:
作用,客户端浏览器可以让用户进行输入的输入
form标签
属性: action="属性值" 表示用户输入的内容,被发送到服务器端的路径
表单中所有填写的内容,发送到指定的服务器上
属性: method="表单数据发送方式", 提交方式 GET POST
输入标签: input
文本输入框: 属性type="text"
value="文本框的默认值"
placeholder="请输入用户名"
name="文本框定义名字"
密码输入框: 属性type="password"
placeholder="请输入密码"
name="密码框定义名字"
单选按钮: 属性type="radio"
name="定义名字" 同名的单元按钮可以单选
checked="checked" 默认选中属性
注意: 属性很特别,属性名和属性值一样,固定写法
复选按钮: 属性type="checkbox"
checked="checked" 默认选中属性
文件域: 属性type="file"
文件上传服务器
按钮:
普通按钮: 属性 type="button"
value="按钮上显示文本"
配合后面的技术JavaScript
重置按钮: 属性 type="reset"
提交按钮: 表单数据发送到服务器
提交按钮: 属性 type="submit"
图片按钮: 属性 type="image"
下拉菜单: 标签select
菜单中,多个菜单项,标签option
属性: 实现多项选择 multiple="multiple" 固定写法,配合Ctrl键
多行文本域: 标签textarea
cols 列数
rows 行数
服务器提交方式GET和POST区别
GET:
表单提交的参数,放在浏览器地址栏
?user=tom&pass=123&gender=女&hobby=抽烟&hobby=喝酒&x=48&y=20#
数据的格式 k=v 多个键值对使用 & 分割
服务器获取提交的数据,依靠是键
暴露敏感数据
浏览器的地址栏数据有限的,不适合提交过大的数据
POST:
表单提交的参数,不会显示在地址栏上
不会暴露敏感信息
没有数据大小的限制
HTTP协议区别:
GET: 参数放在请求行
POST: 参数放在请求体
-->
<form action="#" method="get">
用户名<input type="text" placeholder="请输入用户名" name="user"/><br />
密啊码<input type="password" placeholder="请输入密码" /> <br />
性别<input type="radio" name="gender" checked="checked"/> 男
<input type="radio" name="gender"/> 女 <br />
爱好<input type="checkbox" checked="checked"/>抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />烫头 <br />
上传头像<input type="file" /><br />
<input type="button" value="注册"/> <input type="reset" /> <input type="submit" value="注册"/><br />
<input type="image" src="img/btn.jpg" /> <br />
<select multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
<option>苏州</option>
</select> <br />
<textarea cols="50" rows="5"></textarea>
</form>
</body>
特殊符号标签：
  , 空格符
© , @符号
< , 小于符号<
> , 大于符号>
" , 双引号“”
¥ , 人民币符号￥
7602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
