HTML: 超文本标签语言,用来描述网页的一种语言
1 <HTML> 2 <head> 3 <title></title> 4 </head> 5 <body> 6 </body> 7 </HTML>
作用所有HTML中标签的根节点,最大的标签
文档的头部标签,描述了文档的各种属性信息,包括文档的标题、样式等
文档的标题
文档的主体
<标签名>内容</标签名>
<标签名/>
<head> <title> </title> </head>
<head></head>
<body></body>
1)<!DOCTYPE>标签位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范,必须在开头使用
2)<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析
1) utf-8 : 目前最常用的字符集编码方式,包含全世界所有国家需要用到的字符
2) GBK : 包含全部中文字符(简体中文和繁体中文),是gb2312的扩展
3) gb2312 : 简体中文,包括6753个汉字
4)BIG5 : 繁体中文,港澳台等用
h1-h6 : 六级标题,依据重要性递减
注意:h1标签很重要,一般一个页面只有一个h1标签
<p>文本内容</p>
默认文本在一个段落中会根据浏览器窗口的大小自动换行
<hr/> : 在网页中显示默认样式的水平线
<br /> :文本格式化标签
1)加粗 :<b></b>
<strong></strong>
2)斜体:<i></i>
<em></em>
3)加删除线:<s></s>
<del></del>
4)加下划线: <u></u>
<ins></ins>
5)上标 :<sup></sup>
6)下标:<sub></sub>
<img src="" />
1)src:图象的路径
2)alt:图象不能显示是的替换文本
3)title:鼠标悬停是显示的内容
4)width:设置图象的宽度(XHTML不支持%页面百分比)
5)height:设置图象的高度(XHTML不支持%页面百分比)
6)border:设置图象边框的宽度
1)标签可以拥有多个属性,必须写在开始标签中,位于标签名后面
2)属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
3)任何标签的属性都有默认值,省略该属性则取默认值
4)采用键值对的格式 key="value"
5)尽量不适用样式属性
<a href=""转跳目标"" target=""目标窗口的弹出方式"" >文本或图象</a>
1)href:用于指定链接的目标的url地址
2)target:用于指定链接页面的打开方式
3)_self:在本窗口中打开
4)_blank:在新窗口中打开
1.外部链接需要添加http://
2.内部链接直接链接内部页面名称即可,比如:<a href=""index.html"">首页</a>
3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href=""#""),表示该链接暂时为一个空链接
4.在网页中各种网页元素如图象、表格、音频、视频等都可以添加超链接
1)用来设置整个页面链接的打开方式
2)位于<head></head>之间
3)<base target=""_blank""/> 将所有链接默认打开方式均为在新窗口中打开
1)使用相应的id名标注专挑目标的位置,如<h3 id=""two"">第二集</h3>
2)使用 a href=""#id名"">链接文本</a>,如:<a href=""#two"">
<!--注释语句-->
<div></div>: 没有语义,是网页布局的盒子,用来组合网页,独占一行
<span></span>:没有语义,是网页布局的盒子,多个span标签在一行显示
<ul> <li>列表项1</li> <li>列表项2</li> ...... </ul>
1.<ul></ul>中只能嵌套<li></li>,不可以直接在<ul></ul>标签中输入其他标签或者文字
2.<li></li>中可以使用所有标签
3.无序列表会带有自己的样式属性,可以用CSS更改样式
<ol> <li>列表项1</li> <li>列表项2</li> ...... </ol>
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>
dt自定义列表的小标题,dd自定义列表的解释项
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
1)table 用于定义一个表格
2)tr用于定义表格中的一行,必须嵌套在table标签中
3)td用于定义表格中的单元格,必须嵌套在tr中
4)tr中只能嵌套<td></td><th></th>
5)td标签可以容纳所有标签
6)th 为表头标签,只需用表头标签th代替相应的单元格标签td即可,一般位于表格的第一行或第一列
1.border : 设置表格的边框默认为0
2.cellspacing : 设置单元格与单元格边框之间的空白间距
3.cellpadding :设置单元格内容与单元格边框之间的空白间距
4.width : 设置表格的宽度
5.height : 设置表格的高度
6.align :设置表格在网页中的水平对齐方式 left | center | right
1)<thead></thead> 用于定义表头,一般包含网页的logo和导航等头部信息
2)<tbody></tbody> 用于定义表格的主体,一般包含网页中除头部和底部之外的其他内容
<caption>我是表格标题</caption> : caption标签必须紧随table标签之后
1)rowspan 跨行合并(垂直方向的合并)
2)colspan 跨列合并(水平方向的合并)
a)maxlength 输入字符长度最大值
b)name 表单控件的名称
c)size 控制表单长度(几乎用不到 ,用css)
a)想实现单选效果,必须把name值设为相同
b)checked=""checked"" 设置默认选项
a)checked=""checked"" 设置默认选项
1)rows 控制输入的行数
2)cols 控制一行可以输入的字符长度
selected=""selected""设置下拉菜单默认选项
格式:
<select> <option>1993</option> <option>1994</option> <option selected=""selected"">1995</option> </select>
1)将label把后面input绑定起来,当点击label里文字时,绑定的表单元素会获取光标焦点
2) label的for值=input设置的id值
<form action=""url地址"" method=""提交方式"" name=""表单名称""> 各种表单控件 </form>
1)action : action属性用于指定接收并处理表单数据的服务器程序的url地址
2)method : 用于设置表单数据的提交方式,其取值为get(默认)或post。
3)name : 用于指定表单的名称,以区分同一个页面中的多个表单
1)相对路径以当前文件的路径出发
2)当前文档和目标文档在同一个目录(文件夹),直接写文件名,如:<img src=""01.jpg"" "">
3)目标文档在当前文档的下一级,文件夹名+/+文件名,如:<img src=""image/02.jpg"" "">
4)目标文档在当前文档的下一级的下一集,文件夹名+/+文件夹名+/+文件名,如:<img src=""images/photo/03.jpg"" "">
5)目标文档在当前文档的上一级,../+文件名,如:<img src=""../04.jpg"" "">
6)目标文档在当前文档的上一级的上一级,../+../+文件名,如:<img src=""../../05.jpg"" "">
1)从根目录出发
2)电脑的绝对路径 从盘符出发 绝对不能用
<img src=""E:\image\2.jpg"" "">
3)互联网的绝对路径 从服务器出发
<img src=""http://www.baidu.cn/images/logo.gif"" "">
原文:https://www.cnblogs.com/zySun622/p/10852616.html