<HTML>语法规范
<html></html>HTML标签 : 页面中最大的标签,称为根标签
<head></head>文档的头部
<titile></titile>文档标题:让页面拥有自己的网页标题
<body></body>文档的主体:元素包含文档的所有内容,页面内容基本都是放在body里面。
<!DOCTYPE>文档类型声明标签
lang 定义当前文档显示的语言
例子:
<html lang="en">//英文语言网站 zh-CN中文语言网站
<charset set>是多个字符的集合,以便计算机能够识别和存储各种文字。
例子:
<meta charset="UTF-8"/>
chaeset常用值有:GB2312,BLG5,GBK,和UTF-8其中UTF-8也叫万国码,它包含所有国家需要得字符
段落换行标签:
标题 :<h1></h6> 标题一共六级选,文字加粗一行显,从大到小依次减
段落:<p></p> 文本在一个段落中会根据浏览器窗口大小自动换行
换行:<br /> 强制换行 ,换行垂直上下没有空隙
连接通过:<a href=""></a> 标签定义
图像通过:<img src=""/ width="" height=""> 标签定义
文本格式标签:
加粗<strong></strong> 或 <b></b>
倾斜<em></em> 或 <i></i>
删除线<del></del> 或 <s></s>
下划线<ins></ins> 或 <u></u>
<div>盒子标签:
<div>和<span>标签:他们是没有语义的,他们就是一个盒子,用来装内容。
<div>:用来布局,但是一行只能放一个div。大盒子
<span>:用来布局,遗憾可以放多个span。小盒子
图像标签:<img />
<img src=" " />
src:是<img>标签必须属性,它用于指定图像文件的路径和文件名。
alt:文本属性,替换文本,当图片不能显示时候,显示文本文字
title:文本属性,鼠标放在图像上,显示的文字
width:像素属性,设置图像宽度
height:像素属性,设置图像的高度
border:像素属性,设置图像的边框粗细
注意:
图像标签可以拥有多个属性,必须写在标签名后面。
属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开。
路径:
相对路径:以引用文件所在位置为参考,而建立出的目录路径。
同一级路径:图像文件位于HTML文件同一级 如<img src="baidu.gif' />
下一级路径:图像文件位于HTML文件下一级 如<img src="img/baidu.gif" />
上一级路径:图像文件位于HTML文件上一级 如<img src="../baidu.gif" />
绝对路径:指目录下的绝对位置,直接到达目标位置,通常是从盘符开始路径。
超链接标签:
<a></a>标签可以定义超链接,作用是从一个页面链接到另一个页面
<a herf="跳转目标">文本或者图像</a>:用于指定链接目标地址,(必须属性)当为标签应用href属性时,它就具有超链接功能
<a target="目标窗口的弹出方式">文本或者图像</a>:用于指定页面打开方式。_self当前窗口打开页面,_blank新窗口打开方式。
<a href="#"></a>空链接
锚定链接:快速定位页面某个位置
在链接文本中的href属性中,设置属性值为#名字的形式。
如
<a href="#two"></a>
<h3 id="two"></h3>
特殊字符:
空格符:
< 小于号:<
> 大于号:>
& 和号:&
¥ 人民币:¥
版权: ©
注册商标:®
摄氏度:°
正负号:±
乘号:×
除号:÷
平方2(上标2):²
平方3(上标3):³
表格标签:
表格标签作用:
表格标签是显示,展示数据的。
例子:
<table></table>:用于定义表格标签
<tr></tr>:定义表格的行,嵌套在<table></table>标签中
<td></tb>:定义表格的单元格,嵌套在<tr></tr>标签中
表头单元格标签:
表头单元格位于表格第一行第一列,表头单元格内容加粗居中显示
<th></th>
表格属性:属性写在<table>里面
aligh:规定表格相对周围元素的对齐方式。 left 默认的,center 居中的,right 靠右的
border:规定表格单元是否拥有边框,默认为 " " ,表示没有边框。1或 " "
cellpadding:规定单元边沿与其内容之间的空白,默认1像素。
cellspacing:规定单元之间的空白,默认2像素。
width:规定表格的宽度。
<thead></thead>标签:表格的头部区域,包含在表格标签<table></table>中
<tbody></tbody>标签:表格的主体区域,包含在表格标签<table></table>中
合并单元格:
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan ="合并单元格的个数"
目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码
合并单元格三步:
1.先确定是跨行还是跨列合并。
2.找到目标单元格,写上合并方式 = 合并的单元格数量。比如:<td colspan = "2"></td>.
3.删除多余单元格。
列表标签:
无序列表:<ul></ul>
<ul></ul>只能嵌套<li></li>
有序列表:<ol></ol>
<ol></ol>只能嵌套<li></li>
自定义列表:<dl></dl>
<dl></dl>里有<dt></dt>和<dd></dd>
表单标签:收集用户信息
在HTNL中,一个完整的表单通常由表单域,表单控件(也称表单元素)和提示信息3部分构成。
表单域:包含表单元素的区域。
<form sction="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>标签定义表单域
常用属性:
action:url地址,用于指定接收并处理表单数据的服务器程序的url地址
method:get/post,用于设置表单数据提交方式,器取值为get或post。
name:名称,用于指定表单的名称,以区分同一页面中的多个表单域。
表单控件(表单元素):
<input>输入表单元素:
<input type="属性值" />他是单标签
type属性值:
button:定义可点击按钮,后期配合js使用
checkbox:定义复选框
file:定义输入文字段和"浏览"按钮,提供文件上传
hidden:定义隐藏的输入字段
image:定义图像形式的提交按钮
password:定义密码字段,该字段中的字符被掩码
radio:定义单选按钮
reset:定义重置按钮,重置按钮会清除表单的所有数据
submit:定义提交按钮,提交按钮会把表单数据发送给服务器
text:定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符
<input name="" />定义input元素的名称,单选按钮和复框要相同name值,这样就能选这一个值
<input value="" />规定input元素的值
<input checked="" />单选和复选框可以设置,当页面打开的时候就可以默认选中这个按钮
<input maxlength />规定输入字段中的字符的最大长度
<label>标签:
浏览器自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
语法:<label>标签的for属性对应id属性相同
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
<select>下拉表单元素:
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>选项3
</select>
1.<select>中至少包含一对<option>
2.在<option>中定义<selected>="selected"时,当前项即为默认选项
<textarea>文本域元素:
使用场景:当用户输入较多内容时,此时可以使用<textarea>标签
语法:
<textarea rows="3" cols="20">//rows:几行字 cols:几个字
文本内容
</textarea>