一、Html介绍
超文本标记语言:Hyper Text Markup Language
W3C:万维网
w3c标准包括:
- 结构化标准语言:html xml
- 表现标准语言:css
- 行为标准语言:dom ECMAScript(JS)
html的注释:<!-- 注释 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>问好!</title>
</head>
<body>
html,大爷你好!
</body>
</html>
其中:
DOCTYPE
:告诉浏览器使用什么规范
<html>
标记放在 HTML 文件的开头,是一个形式上的标记;
<body>
标记称为主体标记,网页所要显示的内容都放在这个标记内,它是 HTML 文件的重要所在;
<head>
标记称为头标记,起的作用是放置关于此 HTML 文件的信息,如提供索引、定义 CSS 样式等;
<title>
标记称为标题标记,起的作用是设定网页标题;
meta
:描述网站信息:元数据,一般做SEO
<meta name="keywords" content="淘宝,学习,购物"/>
<meta name="description" content="边学习便购物"/>
二、基本标签
文字标签
<p>
段落标签,行间距比较大<br>
换行标签,行间距比较小<h1>~<h6>
标题标签<center>
文字居中标签<blockquote>
文字段落缩进标签<pre></pre>
保留当前文字编辑格式不改变<hr/>
水平线
列表
<ul>
无序<ol>
有序<dl>
自定义列表,自定义列表包括dl:自定义列表标签,dt:自定义列表标题,dd:自定义列表项组成。
<ul>
<li>abvc</li>
<li>efasd</li>
<li>abhhhvc</li>
</ul>
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>linux</dd>
</dl>
div块
块级容器,可以嵌套其他的容器,一个块标签独占一行
<div id="d1" style="border:1px red solid;">
<h1>hh</h1>
<h2>hh</h2></div>
span行内标签
内联元素,文本容器,一行可以有多个行内标签
我的好朋<span style="color:red" id="s">友</span>
<script type="text/javascript">s.innerText="wo";</script>
注意:js中可以通过id属性引用相应对象,并操作标记属性和方法。innerText指标记开始和标记结束中间的文本部分。
标签属性设置contenteditable='true'
则,标签间的内容可以在线编辑
三、基本属性
帮助 HTML 标记进一步控制 HTML 文件的内容
比如,内容的对齐方式(如本例),文字的大小、字体、颜色,网页的背景样式,图片的插入,等等。
<标记名称 属性名 1=“属性值 1” 属性名 2=“属性值 2” …>
align
控制段落水平位置–左对齐、居中、右对齐
align=left|center|right
bgcolor
设置背景颜色,两种表示法:1、颜色值red-blue等;2、十六进制FFFFFF
文字特殊样式
标记 显示效果
<b></b> 文字以粗体方式显示
<i></i> 文字以斜体方式显示
<u></u> 文字以加下划线方式显示
<s></s> 文字以加下删除方式显示
<big></big> 文字以放大方式显示
<small></small> 文字以缩小方式显示
<strong></strong> 文字以加强强调方式显示(粗体)--带语义,方便搜索引擎和语音阅读
<em></em> 文字以强调方式显示(斜体)--带语义,方便搜索引擎和语音阅读
<address></address> 用来显示电子邮件地址或网址
<code></code> 用来说明代码与指令
font 标签
-
color-颜色
-
size-大小
-
face-字体
特殊符号
符号 HTML 代码
< <
> >
© ©
空格
上标 <sup></sup>
下标 <sub></sub>
三、其他标签
1. 图像标签
基本格式:<img src=url alt="xxx" title="xxx" width="x/ height="x">
- src:可以使用绝对路径或者相对路径:
../
表示上一级 - alt:图象没加载出来,替换文本
- title:相当于ToolTips,鼠标悬停文字
<img alt="图片" width="100" hight="100" title="美女" src="D:/face.jpg">
2. 超链接标签
文字超链接:<a href="http://baidu.com">百度</a>
图片超链接:
<a href="http://baidu.com">
<img width="300" src="https://www.baidu.com/cache/yunying/worldearthday/img/doodle_w.png">
</a>
超链接打开方式:
新窗口打开超链接:<a href="http://baidu.com" target="_blank">百度</a>
target属性,标识打开方式
_blank 新窗口显示目标
_self 当前窗口显示
_parent 父窗口显示
_top 浏览器窗口
_search 搜索区显示
锚链接
<a href="">回到顶部</a>
注意:首先需要标记,才能跳转,使用name做标记,href如果跳转锚,则需要带上#
同页面跳转:
<a name="top">top</a>
。。。
<a href="#top">回到顶部</a>
跨页面跳转:
<a href="xxx.html#top">回到xxx页面的顶部</a>
电子邮件链接
<a href="mailto:447560484@qq.com">百度</a>
框架链接frameset
网页布局工具,将浏览空间分割,独立显示不同
网页
权重与body平级
-
cols
属性分割左右窗口–三七开<frameset cols="30%,*"> <frame> <frame> </frameset>
-
rows
属性分割上下窗口<frameset rows="30%,20%,*"> <frame> <frame> <frame> </frameset>
-
嵌套
frameset
中的frame
可以随意嵌套,只需用frameset
替换frame
即可
-
框架中插入网页
-
在
frame
标签中定义src
属性即可 -
例
<frame src="a.html">
-
-
框架中建立链接
- 定义
name
属性,在链接标签中定义target
为name
值即可
... <frameset cols="30%,*"> <frame src="info.html"> <frame name="show"> </frameset> ... info.html--> <body> <a href="a.html" target="show">a</a> <a href="b.html" target="show">b</a> <a href="c.html" target="show">c</a> ... </body>
- 定义
-
嵌入式框架
iframe
–网页浮动窗口,在一个网页中嵌套另一个网页
-
例
<body> <iframe src="http://baidu.com" name="baidu" frameborder="0" width="1000px" height="800px"></iframe> </body>
可以通过内联框架iframe和a标签动态赋值iframe的src:
<iframe src="" name="baidu" frameborder="0" width="1000px" height="800px"></iframe> <a href="http://baidu.com" target="baidu"/>
当iframe的src没有数据时,可以通过指定a标签target目标和跳转的目标,给iframe src动态赋值,target指向name。
3. label标签
label标签有一个属性:for,可以将焦点转移到目标控件上!
<input type="text" id="abc"/>
<label for="abc">点击标签在abc中输入</label>
四、表格标签
基本标签
标签<table></table>
-
行
<tr></tr>
-
列
<td></td>
-
表头
<th></th>
-
表题
<caption></caption>
注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tbody、tfoot,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
-
表格边框属性
border="1"
-
例
<table border="1"> <caption>abc</caption> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table>
效果:
1 | 2 |
---|---|
1-1 | 1-2 |
2-1 | 2-2 |
cellpadding属性–单元格内容边距
- 例:cellpadding=“20px”
cellspacing属性–单元格线大小
- 例:cellspacing=“20px”
合并单元格
-
colspan
左右合并–列属性 -
rowspan
上下合并–列属性
- 例
<table border="1">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td colspan="2">1-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
效果:
1 | 2 |
---|---|
1-1 | |
2-1 | 2-2 |
align属性–水平对其方式:align="left|center|right"
valign属性–垂直对其方式:valign="top|middle|bottom"
bgcolor属性–背景色
<table border="1">
<tr bgcolor="red">
<th>1</th>
<th>2</th>
</tr>
<tr>
<td colspan="2">1-1</td>
</tr>
<tr>
<td bgcolor="blue">2-1</td>
<td>2-2</td>
</tr>
</table>
五、表单★★★
表单一般都以:input类型
1. form表单
最主要的两个属性:method和action,用于向服务器提交数据
<form action="a.jsp" method="get">具体内容</form>
-
method–get:数据量小<10kb,通过url编码,数据与url通过?隔离,键值对采用=,不同键值对采用&隔离。
-
method–post:数据量大
-
action:不指定,则提交给当前程序,否则提交给指定程序,可以是页面,也可以是某个action请求
2. 文本表单
-
文本如:用户名:
<input type="text" id="userName" name="userName" readonly/>
readonly:只读属性,页面上不可改写
disabled:禁用,禁用属性标识无法点击,无法交互
placeholder:由于提示输入:placeholder=“请输入数字”
注意: id必须唯一,用户名可以不唯一 -
密码
<input type="password" id="pwd" name="pwd"/>
,密码表单:填入的数据用*代替 -
域
<textarea id="desc" name="desc" rows="4" cols="30">内容</textarea>
3. radio单选框
<input type="radio" name="sex" />男
<input type="radio" checked="checked" name="sex" />女
name相同才能保证在同一组
checked="checked"表示默认选中
4. checkbox复选框
<input type="checkbox" name="hobby">游泳
<input type="checkbox" name="hobby" checked>跑步
<input type="checkbox" name="hobby">健身
5. select下来列表
<select id="grade" name="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3" selected>三年级</option>
</select>
注意:selected属性可以设置默认选中
6. 按钮
// 普通按钮
<input type="button" value="reste" />
// 图片按钮(有自动提交功能)
<input type="image" src="../1.jpg"/>
// 提交按钮
<input type="submit" value="登陆"/>
// 重置按钮(会清空表单)
<input type="reset" value="清空"/>
注意:图片按钮有自动提交功能!出发submit form表单监听submit事件,触发后会将当前表单信息提交到form所规定的action目标。
7. 文件上传
<input type="file" id="f" name="f"/>
8. 滑块range
max和min限定范围,step限定步长
<input type="range" name="r" max="100" min="0" step="2"/>
9. 搜索search
<input type="search" name="s" />
10. data(html5规范)
<input type="data"/>
11. 隐藏域
放置在form标签中,用于存放ID信息做校验,提交的时候虽然看不到,但是提交的字段里有
<input type="hidden" value="ajdflkasdjlf32@kjafkjad"/>
注意!!!当表单中标签有name属性时,get方式会将其键值对显示在url中
12. 字段验证
验证很重要,在前端就验证好,避免后端压力过大
标签内置验证:
// 邮件验证
<input type="email" name="email/>
// url验证
<input type="url"/>
// 数字验证 max和min限定范围,step限定步长
<input type="number" name="num" max="100" min="0" step="10"/>
// 电话验证
<input type="tel"/>
属性验证:
- required:当input带这个属性,则该控件必填,否则无法提交
- pattern:正则验证,pattern=“正则”
六、媒体标签
视频标签video
必填选项:src,视频源地址
controls:显示控制组件
autoplay:自动播放
demo:
<video src=".../resources/video/1.mp4" controls autoplay></video>
音频标签audio
必填选项:src,音频源地址
controls:显示控制组件
autoplay:自动播放
demo:
<audio src=".../resources/video/1.mp3" controls autoplay></audio>
七、网页结构
八、HTML5新增
html5是唯一一个通用跨平台语言:PC MAC iPhone Android,快速迭代,降低成本,分发效率高
1 DOCTYPE
doctype用于指示浏览器运行在何种模式下去解析html文件