html :
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等
<!DOCTYPE html>:声明
标准的html5网页声明,全称为Document Type HyperText Mark-up Language
声明文档类型为超文本标记语言或超文本链接标示语言,支持html5标准的主流
浏览器都认识这个声明,表示网页采用html5规范标准,声明位于最顶部,
此标签可告知浏览器文档使用那种规范,是html5还是xhtml
doctype不区分大小写以下几种方式均可:
<!DOCTYPE html>
<!DOCTYPE HTML>
<html></html>:web开始
<html>标签限定了文档的开始点与结束点,是页面元素的第一个标签
html标签是由尖括号括起来的 通常都是成对出现的 第一个是开始标签 第二个是结束标签
<!DOCTYPE html>
<html>
</html>
<head></head>:web头部
head标签用于定义文档的头部,是所有头部元素的容器
head标签中的元素可以引用脚本,指示浏览器在哪里找到样式表,提供元信息等
文档的头部描述了文档的各种属性和信息,包括文档标题,在web中的位置以及和其他文档的关系等
绝大多数文档头部包含的数据都不会真正作为内容显示给读者
以下标签可以用在<head>标签部分
<meta>,<base>,<title>,<script>,<style>,<link>
<!DOCTYPE html>
<html>
<head>
</head>
</html>
<body></body>:web主体
body标签定义文档的主体内容
body元素包含文档所有显示的内容 例如文本,超链接,图像,表格和列表等
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<meta charset="utf-8"> : 编码格式
使用在头部的标签
是一种字符编码,charset="utf-8"告知浏览器此页面属于什么字符编码格式,浏览器做好翻译工作
常见的字符集编码格式有:
gb2312:代表国家标准第2312条 不包含繁体
gbk:国家标准扩展版
unicode:万国码
utf-8:unicode中的其中一种编码格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
</head>
</html>
<h1>-<h6>:html内容标题
<h1>-<h6>标签可定义html内容标题
<h1>定义最大标签
<h6>定义最小标题
由于一些浏览器会默认的把<h1>标签元素显示为很大的字体
因此会有一些web开发者使用<h2>元素代替<h1>元素来显示
最上层的标题,这样做不会对读者产生影响,但是会让试图
理解'网页结构'的搜索引擎和其他软件感到迷惑,所以请确保
<h1>用于最顶层的标题,<h2>和<h3>用于较低的层级
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<h1>我是最大的标题标签</h1>
<h2>我排行第二</h2>
<h3>我排行第三</h3>
<h4>我排行第四</h4>
<h5>我排行第五</h5>
<h6>我排行第六</h6>
</body>
</html>
<p></p>:段落标签
p元素会自动在其前后创建一些空白
浏览器会自动添加这些空间
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<p>我是一个段落</p>
<p>我是另外一个段落</p>
</body>
</html>
 :空格元素
一个 表示一个空格
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<p>我是一个段落</p>
<p></p>
<p></p>
<p></p> <--让段落看的出效果效果-->
<p>我是另外 一个段落</p>
</body>
</html>
<em></em>:斜体标签
em标签定义的文本会呈现特殊样式
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<em>我是一个斜体</em>
<em>我是另外 一个斜体</em>
</body>
</html>
<strong></strong>加粗标签
与em标签一样定义的文本会呈现特殊样式
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<strong>加粗显示</strong>
</body>
</html>
<i></i>:斜体标签
<i>标签与<em>标签相似定义的文本会呈现特殊样式
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<i>我是一个斜体</i>
<i>我是另外 一个斜体</i>
</body>
</html>
<b></b>:粗体标签
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<b>我是一个粗体</b>
</body>
</html>
<font></font>:规定字体,颜色,大小标签
front标签有三个属性
size 设置字体大小 数值为1至7
face 设置字体 宋体 微软雅黑等
color 设置字体颜色
当face与color同时存在 color会覆盖face
也可以与其他标签一起使用 利用其特性 例如p标签与h1标签
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<font size="4" color="blue">我是来举例的</font>
<h1><font size="4" color="red">我也是来举例的</font></h1>
<p>我是来划一个空格的</p>
<font face=”微软雅黑“ size=”4“>我还是来举例的</font>
</body>
</html>
<br />换行标签
<br>简单的换行符
<br>标签是空标签 它没有结束标签 直接把结束标签放在<br />中
请注意:<br> 标签只是简单地开始新的一行,而<p>标签会在相邻的段落之间插入一些垂直的间距
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<font size="4" color="blue">我是来举例的</font><br /> <--我是来换个行的-->
<h1><font size="4" color="red">我也是来举例的</font></h1>
<p>我是来划一个空格的</p>
<font face=”微软雅黑“ size=”4“>我还是来举例的</font>
</body>
</html>
<img>:图片标签
src属性:规定显示图片的url 或 img本地图片的路径
alt/title属性:规定显示图片的文本名称
height属性:定义图像的高度 单位px
width属性:定义图像的宽度 单位px
align属性:定义图像位置
left:左对齐
right:右对齐
center :居中
border属性:定义图像周围的边框 单位px
vspace属性:定义图像的顶部于底部空白 单位px
hspace属性:定义图像的左侧和右侧的空白 单位px
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<img src="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26"
title="112"
height="400px"
width="600px"
align="right"
border="20px"
/>
<img src="img/宝安05期毕业留念.jpg"/>
</body>
</html>
<a></a>:链接标签
href属性:规定指向页面的url
点击时,默认在原有的窗口打开新链接
href='#':死链接
target属性:
_blank在新窗口打开链接
download属性:规定被下载的url
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<a href="www.baidu.com" target="_blank" download="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26">点击图片进入百度
<img src="/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26"
title="yifachen"
height="400px"
width="600px"
align="right"
border="20px" />
</a>
</body>
</html>
<ol></ol>:有序列表
<ol>定义有序列表
<li>定义列表的开始
reversed属性:规定列表顺序为降序(9,8,7...)
值:reversed
start属性:规定有序列表的起始值
值:number(随意定义数字)
type属性:规定在列表中使用的标记类型
值:1,a,A,i,I(大写的i)
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<ol>
<li>python</li>
<li>java</li>
<li>C++</li>
</ol>
<ol reversed="reversed" start="10">
<li>python</li>
<li>java</li>
<li>c++</li>
</ol>
<ol type="I">
<li>python</li>
<li>java</li>
<li>c++</li>
</ol>
</body>
</html>
<ul></ul>:无序列表
可使用css样式
ul:
设置列表样式类型为没有删除列表项标记
设置填充和边距0px(浏览器兼容性)
ul中所有li:
设置图像的URL,并设置它只显示一次(无重复)
您需要的定位图像位置(左0px和上下5px)
用padding-left属性把文本置于列表中
<html>
<head>
<mate charset='utf-8' />
<style type="text/css">
ul{
list-style-type: none;
padding: 0px;
margin: 0px;}
ul li
{
background-image: url(/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1454783519,2870582753&fm=26);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; }
</style>
<title>
yifachen
</title>
</head>
<body>
<ul>
<li>python</li>
<li>java</li>
<li>c++</li>
</ul>
</body>
</html>
<table></table>:表格标签
<table>标签定义html表格
表格由tr th td组成
tr:元素定义表格行
th:元素定义表头
td:元素定义表格单元
table标签有以下属性:
border属性:定义表格边框的宽度 单位px
cellspacing属性:定义单元格之间的空白 单位px
cellpadding属性:定义边沿与内容之间的空白 单位px
width属性:定义表格宽度
height属性:定义表格高度
tr th td 标签有以下属性:
colspan属性:number(随意定义数字) 定义横跨列数(左右合并)
rowspan属性:number(随意定义数字) 合并横跨行数(上下合并)
快速生成表格 tr*3 按tab
<html>
<head>
<mate charset='utf-8' />
<title>
yifachen
</title>
</head>
<body>
<table border="" cellspacing="0px" cellpadding="10px" width="10px" height="10px">
<tr>
<th rowspan="2">dcs</th>
<th>姓名</th> <!--th*3 按tab 快速生成-->
<th>年龄</th>
<th>性别</th>
<th>语言</th>
</tr>
<tr>
<td>youzi</td>
<td>28</td>
<td>男</td>
<td>python</td>
</tr>
</table>
</body>
</html>
<form></form>:表单标签
action属性:规定当提交表单时向何处发送表单数据
method属性:规定请求以get还是post的方式发送
type属性:text为明文 password为密文
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
yifachen
</title>
</head>
<body>
<form action="http://www.baidu.com">User name:<br />
<input type="text" name='username' id='usrid'/><br />
Pass word:<br />
<input type="password" id="pwdid" /><br /><br />
<button>提交</button>
</form>
</body>
</html>
<label></label>:input元素定义标签
type属性:定义input标签 等于radio时为单选框 等于checkbox为复选框 等于file时为上传文件
name属性:等于sex时可避免同时选择两个值
checked属性:表示默认选择的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
yifachen
</title>
</head>
<body>
<form action="http://www.baidu.com" method="post" >User name:<br />
<input type="text" name='username' id='usrid'/><br />
Pass word:<br />
<input type="password" id="pwdid" /><br /><br />
<label><input type="radio" name="sex" />男</label>
<label><input type="radio" name="sex" checked=""/>女</label><br /><br />
你喜欢的游戏是?<br />
<label><input type="checkbox" />LOL</label>
<label><input type="checkbox" />PUBG</label>
<label><input type="checkbox" checked=""/>DNF</label><br />
<label><input type="file" /></label><br />
<button>提交</button>
</form>
</body>
</html>
<textarea></textarea>:标签定义多行的文本输入控件 文本域
cols属性:传输number类型数据 规定文本域内可见宽度
rows属性:传入number数据类型 规定文本域内可见行数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
yifachen
</title>
</head>
<body>
<form action="http://www.baidu.com" method="post" >User name:<br />
<input type="text" name='username' id='usrid'/><br />
Pass word:<br />
<input type="password" id="pwdid" /><br /><br />
<label><input type="radio" name="sex" />男</label>
<label><input type="radio" name="sex" checked=""/>女</label><br /><br />
你喜欢的游戏是?<br />
<label><input type="checkbox" />LOL</label>
<label><input type="checkbox" />PUBG</label>
<label><input type="checkbox" checked=""/>DNF</label><br />
<label><input type="file" /></label><br />
<textarea name="textarea" rows="5" cols="50" >我是一个文本域</textarea><br />
<button>提交</button>
</form>
</body>
</html>
<select></select>下拉框标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
yifachen
</title>
</head>
<body>
<form action="http://www.baidu.com" method="post" >User name:<br />
<input type="text" name='username' id='usrid'/><br />
Pass word:<br />
<input type="password" id="pwdid" /><br /><br />
<label><input type="radio" name="sex" />男</label>
<label><input type="radio" name="sex" checked=""/>女</label><br /><br />
你喜欢的游戏是?<br />
<label><input type="checkbox" />LOL</label>
<label><input type="checkbox" />PUBG</label>
<label><input type="checkbox" checked=""/>DNF</label><br />
<label><input type="file" /></label><br />
<textarea name="textarea" rows="5" cols="50" >我是一个文本域</textarea><br />
<select >
<option value="iphone">iphone</option>
<option value="andriod">andriod</option>
<option value="ios">ios</option>
</select><br />
<button>提交</button>
</form>
</body>
</html>
<button></button>标签
type属性 等于submit时为提交 等于reset为重置 等于button时只是单纯的一个可点击的按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
yifachen
</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" >User name:<br />
<input type="text" name='username' id='usrid'/><br />
Pass word:<br />
<input type="password" id="pwdid" /><br /><br />
<label><input type="radio" name="sex" />男</label>
<label><input type="radio" name="sex" checked=""/>女</label><br /><br />
你喜欢的游戏是?<br />
<label><input type="checkbox" />LOL</label>
<label><input type="checkbox" />PUBG</label>
<label><input type="checkbox" checked=""/>DNF</label><br />
<label><input type="file" /></label><br />
<textarea name="textarea" rows="5" cols="50" >我是一个文本域</textarea><br />
<select >
<option value="iphone">iphone</option>
<option value="andriod">andriod</option>
<option value="ios">ios</option>
</select><br />
<button type="reset">重置</button>
<button type="submit">提交</button>
<button type="button">单纯的按钮</button>
</form>
</body>
</html>