1.什么是HTML?
1、HTML指的是超文本标记语言,HTML的英文全称是 Hypertext Marked Language。
2、用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。
3、使用HTML语言,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。
2.HTML的主要构架。
名称 | 形式 | 定义 |
!DOCTYPE | <!DOCTYPE html> | doctype是页面的头信息,用来描述该页面遵循的HTML标准,<!doctype html>表示该页面遵循h5的标准。 |
html | <html>内容</html> | html标签是页面的根标签,表示页面的根。HTML有两个子标签 head和body。 |
head | <head>内容</head> | head标签是构架中的头,主要用来包裹页面不可见部分,主要做页面是属性设置。head的子标签有title。 |
body | <body>内容</body> | body标签是构架中身体部分,用来表示页面的内容部分。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<title>这个是页面的标题</title> <!--不可见-->
</head>
<body>
这个是页面的内容部分
</body>
</html>
3.常见的部分标签。
一部分。
名称 | 形式 | 定义 |
meta | <meta charset="utf-8"> | charset是meta标签的属性,用来定义网页输出使用utf-8格式。 |
title | <title>写标题</title> | title标签是head标签的子标签,用来写网页标题,网页显示写的标题不可见。 |
p | <p>内容</p> | p标签是段落标签,两个及以上可以使用,有空格行。 |
div | <div>内容</div> | div标签是标准块标签,两个及以上可以使用,无空格行。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
这是第一段。
这是第二段。
<p>
这是第一段。
</p>
<p>
这是第二段。
</p>
<div>
这是第一段。
</div>
<div>
这是第二段。
</div>
</body>
</html>
网页显示:
二部分。
名称 | 形式 | 定义 |
span | <span>内容</span> | span标签是标准行内标签,不改变包裹的内容。 |
br/ | <br/> | br标签是换行标签,换行后没有空格行。 |
b或strong | <b>内容</b> <strong>内容</strong> | b和strong标签是加粗标签,用来加粗显示包裹的内容。 |
i或em | <i>内容</i> <em>内容</em> | i和em标签是加斜标签,用来加斜显示包裹的内容。 |
u | <u>内容</u> | u标签是下划线标签,用来给包裹的内容加上下划线。 |
del | <del>内容</del> | del标签是删除线标签,用来给包裹的内容加上删除线。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<p>
白鸽在天上盘旋着,当时正是一番最好的秋天的阳光,<span>鸽群</span>从天空滑过时,满空中泛着迷人的<b>白光</b>。这些<i>小家伙</i>,居然在见了<u>陌生人</u>之后,产生了<del>表演的欲望</del>,在空中潇洒而优美地展翅,滑翔或做集体性的俯冲,拔高与穿梭——选自《纸月》。<br/>白鸽在天上盘旋着,当时正是一番最好的秋天的阳光,鸽群从天空滑过时,满空中泛着迷人的<strong>白光</strong>。这些<em>小家伙</em>,居然在见了陌生人之后,产生了表演的欲望,在空中潇洒而优美地展翅,滑翔或做集体性的俯冲,拔高与穿梭——选自《纸月》。
</p>
</body>
</html>
网页显示:
三部分。
名称 | 形式 | 定义 |
hn | <hn>内容</hn> n属于1~6 | hn标签是标题大学标签,1~6表示6种不同大小的字体。 |
pre | <pre></pre> | pre标签是一个自定义布局标签,可以自由布局内部内容。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<h3>这是一个h3标题</h3>
<h4>这是一个h4标题</h4>
<h5>这是一个h5标题</h5>
<h6>这是一个h6标题</h6>
<pre>
这是一个自定义布局内容
这是一个自定义布局内容
这是一个自定义布局内容
这是一个自定义布局内容
这是一个自定义 布局内容
这是一个自定义布局 内容
</pre>
</body>
</html>
网页显示:
四部分。
名称 | 形式 | 定义 |
article | <article style="height:100px;border:1px solid red;">内容</article> | article标签是文章标签,style是属性,height:100px是高度为100像素 border:1px solid red是边界为1像素且边界成红色显示 |
header | <header style="height:100px;border:1px solid red;">内容</header> | 与article同理 |
section | <section style="height:100px;border:1px solid red;">内容</section> | 与article同理 |
footer | <footer style="height:100px;border:1px solid red;">内容</footer> | 与article同理 |
aside | <aside style="height:100px;border:1px solid red;">内容</aside> | 与article同理 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<article style="height:100px;border:1px solid red;">
这是文章标签
</article>
<header style="height:100px;border:1px solid red;">
这是头部标签
</header>
<section style="height:100px;border:1px solid red;">
这是正文标签
</section>
<footer style="height:100px;border:1px solid red;">
这是尾部标签
</footer>
<aside style="height:100px;border:1px solid red;">
这是侧列内容
</aside>
</body>
</html>
网页显示:
4.多媒体标签。
名称 | 形式 | 定义 |
img | <img src="指定图片路径" width="500" title="鼠标移动到图片出现的文字" alt="图片不可见"/> | img标签是图片标签,src属性是用来指定要展示的图片的路径,可以是网页链接,也可以是指定的电脑位置,建议使用相对路径。width属性的宽度设置。title属性是表示图片的标题。alt属性表示当图片不可见的时候,会出现的文字描述。 |
video | <video src="指定视频路径" height="500" controls autoplay></video> | video标签是视频标签,src属性是用来指定要播放的视频的路径。height属性是设置高度。controls autopaly是指不用惦记播放按钮,打开网页则直接播放。 |
audio | <audio src="指定语音路径" controls autoplay="autoplay"></audio> | audio标签是语音标签,src属性是用来指定要播放的语音的路径。autoplay属性表示自动播放。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super" width="500" title="鼠标移动到图片出现的文字" alt="图片不可见"/>
<hr/>
<img src="img/a.jpg" width="500" title="鼠标移动到图片出现的文字" alt="图片不可见"/>
</body>
</html>
网页显示:
5.列表标签。
名称 | 形式 | 定义 |
ol与li | <ol><li>内容</li></ol> | ol标签是有序列表标签,li标签是它的子标签。内部可嵌套。 |
ul与li | <ul><li>内容</li></ul> | ul标签是无序列表标签,li标签是它的子标签。内部可嵌套。 |
dl与dt dl与dd | <dl><dt>内容</dt></dl> <dl><dd>内容</dd></dd> | dl标签是无序列表标签,dt和dd标签是它的子标签。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--
HTML提供三种常用的列表标签
1、有序列表
2、无序列表
3、数据列表
-->
<div>
<h4>实时热点</h4>
<h1>有序列表</h1>
<ol>
<li>第一层列表</li>
<li>
第一层列表
<ol>
<li>第二层列表</li>
<li>第二层列表</li>
</ol>
</li>
<li>第一层列表</li>
</ol>
<hr />
<h1>无序列表</h1>
<ul>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>
这个是无序列表
<ul>
<li>子项</li>
<li>子项</li>
</ul>
</li>
</ul>
</div>
<hr />
<h2>数据列表</h2>
<dl>
<dt>国内热点新闻</dt>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
</dl>
</body>
</html>
网页显示:
布局优化1:由上图网页显示可以看出布局不够完整,可以使用style标签中的属性type="text\css"。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--
HTML提供三种常用的列表标签
1、有序列表
2、无序列表
3、数据列表
-->
<div>
<h4>实时热点</h4>
<h1>有序列表</h1>
<ol>
<li>第一层列表</li>
<li>
第一层列表
<ol>
<li>第二层列表</li>
<li>第二层列表</li>
</ol>
</li>
<li>第一层列表</li>
</ol>
<hr />
<h1>无序列表</h1>
<ul>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>这个是无序列表</li>
<li>
这个是无序列表
<ul>
<li>子项</li>
<li>子项</li>
</ul>
</li>
</ul>
</div>
<hr />
<h2>数据列表</h2>
<dl>
<dt>国内热点新闻</dt>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
<dd>中国70周年庆典完美谢幕</dd>
</dl>
</body>
</html>
布局优化1网页显示:
布局优化2: style标签的使用,利用指定的id,通过标签选择修改,可以移动鼠标移动到网页字体上显示颜色标记,还可以改变width宽度,height高度等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
*{margin: 0;padding: 0;} -->选择所有文件进行布局
*/
/* 写css文件 */
#China {
/* 去掉li前面的点*/
border: 1px slid red;
}
/*
list-style:none;的意思是设置列表项目样式为不使用项目符号。
list-style-image: url(img/biao.png);的意思是换掉列表左边的小点
font-size: 18px;行间距为字体的两倍,这里的是行间距36px;
*/
#China>li {
list-style: none;
list-style-image: url(img/biao.png);
/*border: 1px solid red;*/
width: 400px;
height: 30px;
font-size: 18px;
color: #666;
}
/*显示设置的颜色*/
#China>li:hover {
color: red;
}
</style>
</head>
<body>
<ul id="China">
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
<li>中国70周年庆典完美谢幕</li>
</ul>
</body>
</html>
布局优化2网页显示:
6.超链接标签。
名称 | 形式 | 定义 |
a | <a href="指定要打开的链接">内容</a> | a标签是超链接标签,主要用于页面之间的跳转和数据传递。 href属性是用来指定跳转的地址,支持网络地址和本地地址网络地址必须完整的url地址target属性用来指定页面的打开方式,默认使用_self,表示在当前选项卡打开。 当值为_blank,表示使用一个新的选项卡打开。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<h1>超链接标签</h1>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="多媒体标签" target="_self">自几写的html</a>
<a href="#">不知道跳哪儿?</a>
</body>
</html>
网页显示:
7.超链接锚点标签。
超链接锚点标签是对a标签的思想加深,相信大家都使用过淘宝,淘宝有个功能就是点击到底部或者点击到达顶部则可以立刻到达,这个标签也就是实现这个功能的方法。
构架展示:
可以通过height高度设置对网页大小扩增,便于看出网页显示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写标题</title>
</head>
<body>
<!--id属性是对标签进行身份的标明,相当于人的名字一样,这里的意思就是对header标签赋予了它一个
名字top,对section标签赋予了它一个名字center,对footer标签赋予了它一个名字rear-->
<header style="height:100px;border:1px solid red;"id="top">
这是头部标签
<a href="#rear">到底部</a>
<a href="#center">到中间</a>
</header>
<section style="height:100px;border:1px solid red;"id="center">
这是正文标签
<a href="#center">到中间</a>
<a href="#rear">到底部</a>
</section>
<footer style="height:100px;border:1px solid red;"id="rear">
这是尾部标签
<a href="#top">到顶部</a>
<a href="#center">到中间</a>
</footer>
</body>
</html>
8.表格标签。
名称 | 形式 | 定义 |
table | <table align="center" border="1" width="800" cellpadding="0" cellspacing="0"></table> | table标签是表格标签。align="center":居中属性。 border:属性border规定围绕表格的边框的宽度。 |
tr | <tr></tr> | tr标签表示表格中的行。 |
th | <th></th> | th标签是tr的子标签,表示表格中的加粗文字的列。 |
td | <td></td> | td标签是tr的子标签,表示表格中的列。 |
thead | <thead><th></th></thead> | thead标签是一个识别标签,用来包裹th标签的内容。 |
tobody | <tobody><td></td></tobody> | tobody标签是一个识别标签,用来包裹td标签的内容。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<!--
border:属性border规定围绕表格的边框的宽度。
cellpadding:属性规定的是单元边沿与单元内容之间的空间。
cellspacing:属性规定[单元格]之间的空间。
table tr th td thead tobody 7
-->
<body>
<h1 align="center">用户信息</h1>
<table align="center" border="1" width="800" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>用户名称</th>
<th>用户性别</th>
<th>用户年龄</th>
<th>用户地址</th>
<th>用户邮箱</th>
<th>用户操作</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">张三</td>
<td>男</td>
<td>16</td>
<td>广州</td>
<td>110@qq.com</td>
<td rowspan="5">无</td>
</tr>
<tr>
<td>李四</td>
<td rowspan="4">女</td>
<td>18</td>
<td>甘肃</td>
<td>120@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>河南</td>
<td>119@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>河南</td>
<td>119@qq.com</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>河南</td>
<td>119@qq.com</td>
</tr>
<tr>
<td>共计:</td>
<td colspan="5">5人</td>
</tr>
</tbody>
</table>
</body>
</html>
网页显示:
9.from表单标签。
形式:<form action="#" method="get"></form> |
form:form标签,是用来包裹表单标签的。 |
action:form标签的属性,它是用来指定提交的服务器端,一般对应url路径 。 |
method:from标签的属性,用来规定本次提交的http协议的类型。 |
form中的三大元素:1、input文本框 2、select下拉框 3、textarea文本域 |
http1.1提供了8种请求方式:最常见的4种、1:get。2:post。3:delete。4:put。 |
10.get与post的相同之处和不同之处。
相同点:Get和Post都是用来获取和提交数据的一种方法,两者都可以实现与服务器的通信。
不同点:
get | post |
get的安全性较低,用户输入的参数直接显露在地址栏上。 | post的安全性较高,用户输入的参数不显露在地址栏上。但能被抓包获取数据。 |
某些浏览器对get的数据大小有限制。 | post的数据理论上面没有限制。 |
get请求能被收藏。 | post请求不能被收藏。 |
服务器取值方式不一样。GET方式取值,如php可以使用$_GET来取得变量的值。 | POST方式通过$_POST来获取变量的值。 |
11.input标签的使用。
名称 | 形式 | 定义 |
label | <label for="名字">内容</label> | label标签是取名标签,for是label的属性,用来定义名字。 |
input属性 | 形式 | 定义 |
name | name="名字" | name:名字,给予取名 |
id | id="身份" | id:唯一性,身份,取身份,便于识别 |
value | value="值" | value:值的意思 |
input属性type | 形式 | 定义 |
text | type="text" | text:文本框,默认显示输入框的文字 |
passwork | type="password" | passwork:密码框,隐藏输入框的文字 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="username">用户名称</label>
<input type="text" id="username"/><br>
<label for="username">用户名称</label>
<input type="text" id="username" name="username" value="小明" /><br>
<label for="password">用户密码</label>
<input type="password" id="password" >
</form>
</body>
</html>
网页显示:
========================================================
input属性type | 形式 | 定义 |
radio | type="radio" | radio:单项选择 |
checkbox | type="checkbox" | checkbox:多项选择 |
checked | checked | checked:默认选value中内容,与radio和checkbox配合使用 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="usrsex">用户性别</label>
<input type="radio" value="man" name="gender"/>男
<input type="radio" value="women" name="gender"/>女<br>
<label for="loved1">兴趣爱好1</label>
<input type="checkbox" name="fov" value="football"/>足球
<input type="checkbox" name="fov" value="basketball"/>篮球
<input type="checkbox" name="fov" value="LoL"/>英雄联盟
<input type="checkbox" name="fov" value="韩剧"/>韩剧<br>
<label for="loved2">兴趣爱好2</label>
<input type="checkbox" name="fov" value="football"/>足球
<input type="checkbox" name="fov" value="basketball" checked />篮球
<input type="checkbox" name="fov" value="LoL"/>英雄联盟
<input type="checkbox" name="fov" value="韩剧"/>韩剧
</form>
</body>
</html>
网页显示:
========================================================
input属性type | 形式 | 定义 |
type="email" | email:邮箱的填写 | |
url | type="url" | 统一资源定位符 |
number | type="number" | number:号码的填写 |
hidden | type="hidden" | 隐藏网页的相关元素 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="email">邮箱</label>
<input type="email" name="" id="" value=""/><br>
<label for="url">统一资源定位符</label>
<input type="url" name="" id="" value=""/><br>
<label for="number">手机号码</label>
<input type="number" name="" id="" value=""/><br>
<label for="hidden">隐藏网页的相关元素</label>
<input type="hidden" name="" id="" value=""/>
</form>
</body>
</html>
网页显示:
========================================================
input属性type | 形式 | 定义 |
color | type="color" | color:选择颜色 |
file | type="file" | file:文件选择域 |
datetime—local | type="datetime-local" | datetime-local:选择本地日期时间 |
date | type="date" | date:选择日期 |
time | type="time" | time:选择时间 |
range | type="range" | range:设置一个滑轮,可用min设置最小值,max设置最大值,value设置初始值 |
reset | type="reset" | reset:重置所有已经填写的文字 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<label for="usravatar">用户头像</label>
<input type="file" name="avatar"/><br>
<label for="color">颜色选择</label>
<input type="color" name="color" id="selectcolor" value="颜色选择"/><br>
<label for="datetime">日期时间</label>
<input type="datetime-local" name="time" id="selecttime" value="时间"/><br>
<label for="date">日期</label>
<input type="date" name="" id="" value=""/><br>
<label for="time">时间</label>
<input type="time" name="" id="" value=""/><br>
<label for="range">滑轮输入</label>0
<input type="range" name="" id="" value="" max="100" min="0" value="50"/>100<br>
<input type="reset" value="重置">
</form>
</body>
</html>
网页显示:
========================================================
input属性type | 形式 | 定义 |
submit | type="submit" | submit:提交输入数据 |
button | type="button" | button:不会提交数据,只是保存 |
image | <input type="image" src="img/Authorized.jpg" width="250" height="70"> | image:提交,选择图片用来代替文字点击按钮,比如登录两个文字用图片来代替。src属性代表导入图片指定位置,width属性调节图片的宽。height调节图片的高。 |
名称 | 形式 | 定义 |
button | <button>内容</button> | button标签是提交标签,使用文字代表提交按钮。也是提交数据。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<input type="submit" name="" value="登录"><br>
<input type="button" name="" value="保存"><br>
<input type="image" src="img/Authorized.jpg" width="250"
height="70"><br>
<button>保存按钮</button>
</form>
</body>
</html>
网页显示:
========================================================
input属性autofocus | 形式 | 定义 |
no | autocomplete="no" | 自动记录输入过的值 |
off | autocomplete="off" | 取消自动记录输入过的值 |
input属性 | 形式 | 定义 |
readonly | readonly | readonly:默认固定value文字,不可修改 |
disabled | disabled | disabled:黑化选项,不可再点击修改 |
required | required | required:必须填写内容提示 |
placeholder | placeholder="内容" | 内容为打开网页时显示的一句话,点击输入时就没了 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<input type="text" id="username" autocomplete="no"><br>
<input type="text" id="username" value="小明" readonly><br>
<input type="text" id="username" value="小明" disabled><br>
<input type="text" id="username" placeholder="请输入你的名字!"><br>
</form>
</body>
</html>
网页显示:
12.下拉框select标签和文本域textarea标签的使用。
名称 | 形式 | 定义 |
select | <select><option></option></select> | select标签是下拉框标签。 |
option | <option>内容</option> | option标签是select标签的子标签。 |
textarea | <textarea rows="10" cols="30">内</textarea> | textarea 标签是文本框标签,属性rows调节宽度,cols调节长度。 |
构架展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<select name="address" id="address">
<option>请选择您的户籍所在地</option>
<option value="西安">西安</option>
<option value="广州">广州</option>
<option value="">兰州</option>
<option value="">深圳</option>
<option>银川</option>
</select><br>
<label for="addr">文本域:</label><br>
<textarea rows="10" cols="30">这里是文本域输入和拉框内容</textarea>
</form>
</body>
</html>
网页显示: