body内标签
基本标签
特殊符号
常用标签
列表标签
表格标签
form表单(********):前后端数据交互
基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
<p>段落标签</p>
加粗 | 斜体 | 下划线 | 删除线 | h1~h6标题 | 换行 | 水平线
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
1、你是无意穿堂风,偏偏孤踞引山洪 <!--正常文本-->
<b>2、你是无意穿堂风,偏偏孤踞引山洪</b> <!--加粗-->
<i>3、你是无意穿堂风,偏偏孤踞引山洪</i> <!--斜体-->
<br> <!--这是换行符-->
<u>4、你是无意穿堂风,偏偏孤踞引山洪</u> <!--下划线-->
<br> <!--这是换行符-->
<s>5、你是无意穿堂风,偏偏孤踞引山洪</s> <!--删除线-->
<hr> <!--这是水平线-->
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
</body>
</html>
段落标签
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<p>
1、你是无意穿堂风,偏偏孤踞引山洪 <!--正常文本-->
</p>
<p>
<b>2、你是无意穿堂风,偏偏孤踞引山洪</b> <!--加粗-->
</p>
<p>
<i>3、你是无意穿堂风,偏偏孤踞引山洪</i> <!--斜体-->
</p>
</body>
</html>
可以看到各个段落间是有分隔空间的
特殊符号
特殊符号 对应表 (代码后都应以 ; 结尾)
空格 |   |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | © |
注册 | ® |
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<p>
©®你是 无意>穿堂风,偏偏<孤踞&引山洪¥
</p>
</body>
</html>
常用标签
div标签 和 span标签
div标签用来定义一个块元素,并无实际的意义,主要通过CSS样式为其赋予不同的表现
span标签用来定义内联(行内)元素,并无实际的意义,主要通过CSS样式为其赋予不同的表现
标签分类(1)
双标签 h1~h6, p, a
<h1></h1>
自闭合标签 img br hr # 自动闭合
<br> | <hr> | <img>
标签分类(2)
块儿级标签 div h1~h6 p hr br
独占一行
块儿级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块儿级标签能够设置长宽
行内标签 span a img i s b u
自身的内容有多大就占多大
行内标签不能设置长宽
块级元素与行内元素的区别:
块元素,是以另起一行开始渲染的元素
行内元素,则不需另起一行。
如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意:关于标签嵌套
通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
p标签可以被其他块标签所包含,但是p标签不能包含其他块标签,p标签也不能包含p标签
a 标签:超连接 标签
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
URL:统一资源定位符
URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分:为协议:http://、ftp://等
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。
href属性指定目标网页地址时,该地址可以有以下几种类型:
1、绝对URL - 指向另一个站点 (比如 href="http://www.jd.com")
2、相对URL - 指向当前站点中确切的路径 (href="index.htm")
3、锚URL - 指向当前页面中的锚 (href="#top")
<!--可以通过href跳转到指定网站-->
<a href="http://www.baidu.com"</a>
<!--默认在当前页面打开指定网站-->
<a href="http://www.baidu.com" target="_self">click me</a>
<!--更改'tatget'参数值为 _blank 可以使其 新建页面 打开指定网站-->
<a href="http://www.baidu.com" target="_blank">click me</a>
<!--导入外部文件中的a标签指定网站-->
????
<!--
target:
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
-->
<!--锚点功能-->
<!--回到顶部-->
<a href="" id="a1">top</a> <!--这里是创建锚点位置-->
<a href="#a1">回到顶部</a> <!--这里是创建回到锚点位置按钮位置-->
所有的html标签都应该有一个id属性,用来唯一标识当前标签,为后续的DOM操作提供基础,也就意味着同一份html中标签的id不能重复,不过不写id属性也是可以的
img标签
<img src="图片的路径" alt="图片加载失败时的提示信息" title="鼠标悬浮时提示信息" whdth="宽" height="高(宽高属性只要定义一个即可,会自动等比缩放的)">
列表标签
无序列表
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
</ul>
<ul type="square">
<li>第一项</li>
<li>第二项</li>
</ul>
<ul type="none">
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
</html>
type属性:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
有序列表
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<ol type="1">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="a">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="A">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="i">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="I">
<li>第一项</li>
<li>第二项</li>
</ol>
</body>
</html>
type属性:
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<table border=1 cellpadding=1 cellspacing=1>
<thead>
<!--一个tr表示一行-->
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>egon</td>
<td >18</td>
<td rowspan="2">read</td>
</tr>
<tr>
<td>owen</td>
<td>21</td>
<!--<td>read</td>-->
</tr>
<tr>
<td>tank</td>
<td colspan="2">22</td>
<!--<td>eat</td>-->
</tr>
</tbody>
</table>
</body>
</html>
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.(最好通过css来设置长宽)
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列的表现,比如 文本字段,复选框,单选框,提交按钮等等
表单还可以包含textarea, select, fieldset, label标签
表单属性表
accept_charset | 规定在被提交表单中的字符集(默认:页面字符集) |
action | 规定向何处提交表单的地址(URL)(提交页面) |
autocomplete | 规定浏览器应该自动完成表单 |
enctype | 规定提交的数据的编码(默认:url-encode) |
mothod | 规定在提交表单是所用的HTTP方法(默认:GET) |
name | 规定识别表单的名称(对于DOM使用:document.forms.name) |
novalidate | 规定浏览器不验证表单 |
target | 规定action属性中地址的目标(默认:_self) |
表单元素
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合、因此它是制作动态网站很重要的内容
表单工作原理:
访问者在浏览有表单的网页是,可填写必须的信息,然后按某个按钮提交,这些信息通过internet传送到服务器上
服务器上专门有程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误,当数据完整无误后服务器反馈一个输入完成的信息
text | 单行输入文本 | |
password | 密文密码输入框 | |
date | 日历选择框 | |
checkbox | 复选框 | |
radio | 单选框 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
button | 普通按钮 | |
hidden | 隐藏输入框 | |
file | 文本选择框 | |
属性说明:
name:表单提交时的"键",注意和id的区别
value:表单提交时对应项的值
type="button","reset","submit",为按钮上显示的文本内容
type="text","password","hidden",为输入框的初始值
type="checkbox","radio","file",为输入相关联的值
check:设定radio和checkbox默认被选中的项
readonly:text和password设置为只读
disabled:所有的input均适用
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<tltle>输诚</tltle>
</head>
<body>
<form action="127.0.0.1" method="post" enctype="multipart/form-data">
<p>username:
<input type="text" name="username" value="zdc">
</p>
<p>password:
<input type="password" name="password">
</p>
<p>birth:
<input type="date" name="birthaday">
</p>
<p>gender:
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
其他<input type="radio" name="gender" value="2">
</p>
<p>hobby:
唱<input type="checkbox" name="hobby" value="sing">
跳<input type="checkbox" name="hobby" value="dump">
rap<input type="checkbox" name="hobby" value="rap">
篮球<input type="checkbox" name="hobby" value="baskertball">
</p>
<p>file:
<input type="file" name="filename" value="aaa ">
</p>
<input type="submit" value="提交按钮">
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<button> <!--此按钮与submit功能相同-->
按钮
</button>
</form>
</body>
</html
label 标签
定义:<label>标签为input元素定义标注(标记)
说明:
1、label元素不会向用户呈现任何特殊效果
2、<label>标签的for属性值应当与相关元素的id属性值相同
<form action="127.0.0.1" method="post" enctype="multipart/form-data">
<label for="i1">
username:<input type="text" id="i1" name="username" value="zdc">
</label>
</form>
select标签
<!--select标签默认是单选的-->
<form action="" method="post">
<P>选择城市
<select name="city1" id="city1">
<option value="1">北京</option>
<option selected value="2">上海</option>
<option value="3">深圳</option>
</select>
</P>
</form>
<!--多选select标签则是加上multiple参数-->
<form action="" method="post">
<p>选择城市
<select name="city2" id="city2" multiple>
<option value="1">北京</option>
<option selected value="2">上海</option>
<option value="3">深圳</option>
</select>
</p>
</form>
<form action="" method="post">
<p>选择城市
<select name="city3" id="city3">
<optgroup label="北京">
<option value="1">朝阳区</option>
<option value="2">海淀区</option>
</optgroup>
<optgroup label="上海">
<option value="3">静安区</option>
<option value="4">徐汇区</option>
</optgroup>
<optgroup label="深圳">
<option value="5">南山区</option>
<option value="6">宝安区</option>
</optgroup>
</select>
</p>
</form>
属性说明:
multiple: 布尔属性,设置后为多选,否则默认单选
disabled:禁用
selected:默认选中该项
value:定义提交时字典中的选项值
textarea多行文本
<textarea name="info" id="info" cols="40" rows="10">
# 请输入个人信息
</textarea>
属性说明:
name:名称
rows:输入框y轴方向的长度(宽)|行数
cols:输入框x轴方向的长度(长)|列数
dicabled:禁用