路径
绝对路径：http://127.0.0.1:5500/two%20day/H5/live%20service.html
相对路径：./live%20service.html
根路径：/two%20day/H5/live%20service.html
a元素
文本链接和图片链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a demo</title>
</head>
<body>
<h2>超链接</h2>
<!--href可以是绝对路径和相对路径-->
<!--绝对路径地址的组成:协议+主机+端口号(http默认端口为80)+路径-->
<a href="https://www.baidu.com">百度</a>
<!--相对路径-->
<a href="./another a.html">another a</a>
<!--如果href中暂时无法确定目的地址，使用#做占位符,不可为空白-->
<a href="#">登录</a>
<!--图片链接-->
<a href="https://www.baidu.com">
<img src="../image/装酷.gif" alt="链接图片">
</a>
</body>
</html>
链接的target属性
默认的target属性值是_self
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>target demo</title>
</head>
<body>
<!--默认在当前页面打开-->
<a href="https://www.baidu.com" target="_self">在当前页打开</a>
<a href="https://www.baidu.com" target="_blank">在另一个空白页中打开</a>
</body>
</html>
锚点
用于长文本文件。当点击目录上的超链接时，URL地址栏中会有 #1，#2，这就是锚点定位。如：http://127.0.0.1:5500/two%20day/H5/anchor.html#grsh中的#grsh。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>anchor demo</title>
</head>
<body>
<!--anchor：锚点。其url的组成是：协议+主机+端口号+路径+锚点-->
<!--定义锚点：
<任意标签 id="定义一个id">要定位的位置</任意标签>
-->
<h1>目录</h1>
<h4>锚点用于一般用于长文本</h4>
<hr>
<a href="#znjl">早年经历</a>
<a href="#yyjl">演艺经历</a>
<a href="#zyzp">主要作品</a>
<a href="#grsh">个人生活</a>
<a href="#hjjl">获奖记录</a>
<a href="#rwpj">人物评价</a>
<h2 id="znjl">早年经历</h2><hr>
<p>宋小宝小时候因为家里穷，读书到初二时，就辍学跑到了沈阳打工贴补家用。在他19岁那年，被二人转演员焦小龙看中成了他的徒弟，才开始学习二人转 [1] 。2007年，被赵本山招至麾下，最先出演《关东大先生》里的一个角色</p>
<h2 id="yyjl">演艺经历</h2><hr>
<p>2009年，宋小宝参演黑龙江卫视的《本山快乐营》逐渐被大家记住 [1] 。</p>
<p>2011年，在辽宁卫视春晚与师父赵本山合作小品《相亲》而获得更多关注。同年与沈春阳合作主演悲情戏《樱桃》，在剧中饰演葛望，并凭借该剧参加第四届新农村电视艺术节获最佳男主角奖
[2]，还凭借该剧参加第八届华鼎奖，获当代类最佳男演员奖 [3] 。</p>
<p>2012年2月，在吉林卫视春晚与田娃合作小品《玉米情》，在辽宁卫视春晚与师父赵本山、赵海燕再度合作《相亲2》。同年6月，与黄圣依共同主演金琛执导的都市情感喜剧《第22条婚规》，在剧中饰演张铎。同年8月，与沈春阳、杨树林共同主演王振宏执导的苦情剧《樱桃红》，在剧中饰演赵老乐[5]
，并凭借该剧参加第十三届华鼎奖，获中国当代题材电视剧最佳男演员奖。</p>
<p>2013年2月，在江苏卫视春晚与师父赵本山合作小品《有钱了》，在辽宁卫视春晚与王小利合作小品《第一场雪》，在吉林卫视春晚与张可、小超越合作小品《大考当前》。同年3月，主演农村家庭剧《收获的季节》，在剧中饰演金翰林。同年9月，参演民国传奇剧《老兵》。同年9月，与沈春阳共同主演张学松执导的都市情感剧《男人四十要出嫁》，在剧中饰演周六福
[6]。同年10月7日，参加第十届华鼎奖，获最受中国媒体欢迎的演员 [4] 。同年12月，参演阚卫平执导的当代乡村情感喜剧《爹妈满院》，在剧中饰演张万泉。</p>
<p>2014年2月，在辽宁卫视春晚与小沈阳合作小品《买单》。同年6月，与黄圣依共同主演金琛执导的都市情感喜剧《第22条婚规2》，在剧中饰演张铎。</p>
<p>2015年2月，宋小宝与赵海燕在湖北卫视春晚表演小品《表白》，小品中将两人隐藏了6年的“地下恋情”告知儿女。同年2月，在辽宁卫视春晚与小沈阳合作小品《以貌取人》，同年2月，在天津卫视春晚与刘亚津合作小品《我是导师》。同年3月20日，出席中国首档明星喜剧竞赛真人秀《欢乐喜剧人》的发布会[7]
。同年11月5日，参加《咱们穿越吧》庆功会。同年12月9日，献唱电影《唐人街探案》推广曲《往事只能回味》 [8] 。</p>
<p>2016年，在湖南卫视小年夜春晚与赵海燕再度合作小品《送礼容易退礼难》。同年2月，参演辽宁卫视春晚小品《吃面》，小品中的"没毛病"成热词。同年12月13日，献唱电影《东北往事之破马张飞》主题曲《全世界都在说东北话》。</p>
<p>2017年，在辽宁卫视春晚推出《吃面》的续集《烤串》。同年2月，在北京卫视春晚小品《回家》中，他延续了几次春晚里恒久不变的红帽子、老头装“损色”造型
[9]。同年2月，在东方卫视春晚与柳岩合作小品《爱情不外卖》。同年4月，参加星素喜剧挑战竞技秀节目《笑声传奇》。11月30日晚，自爆由他执导的喜剧电影《发财日记》目前已进入筹备阶段
[10]。10月，担任浙江卫视原创喜剧竞演综艺节目《喜剧总动员第二季》常驻队长 [11] 。</p>
<h2 id="zyzp">主要作品</h2><hr>
<h3>参演电视剧</h3>
<p>
<p>爹妈满院 2015-12-10：饰演张万泉 导演阚卫平 主演赵本山, 赵海燕, 蔡维利, 王小利</p>
<p>收货的季节 2014-8-8：饰演金翰林 导演赵本山 主演赵本山, 于震宇, 毕畅</p>
<p>老兵 2014-02-27：饰演吴天宝 导演赵本山 主演赵本山, 李立群, 毕畅</p>
</p>
<h3>参演电影</h3>
<p>
<p>缝纫机乐队[12] 2017-09-29 饰演破吉他乐队的成员（客串） 导演大鹏 主演大鹏, 叶世荣, 黄贯中, 古力娜扎</p>
<p>过年好 2016-2-1 导演高群书 主演赵本山, 闫妮, 炎亚纶, 潘斌龙, 大鹏</p>
<p>煎饼侠 2015-07-17 饰演小品侠 导演董成鹏 主演袁姗姗, 邓超, 小沈阳</p>
</p>
<h3>表演小品</h3>
<h4>春晚作品</h4>
<p>2011年辽宁卫视春晚《相亲》</p>
<p>2013年吉林卫视春晚《玉米情》</p>
<p>2015年湖北卫视春晚《表白》 20150704《欢乐喜剧人》第十期《碰瓷》</p>
<p>2015年辽宁卫视春晚《以貌取人》</p>
<p>2015年天津卫视春晚《我是导师》</p>
<p>2017年东方卫视春晚《爱情不外卖》</p>
<h4>欢乐喜剧人</h4>
<p>20150425《欢乐喜剧人》第一期《我是演员之偶像团》</p>
<p>20150502《欢乐喜剧人》第二期《我是演员之武侠剧》</p>
<p>20150509《欢乐喜剧人》第三期《看病》</p>
<p>20150523《欢乐喜剧人》第五期《星际旅行》</p>
<p>20150613《欢乐喜剧人》第七期《甄嬛后传》 [27]</p>
<p>20150620《欢乐喜剧人》第八期《铡美案》</p>
<p>20150627《欢乐喜剧人》第九期《打劫》</p>
<p> 20150711《欢乐喜剧人》半决赛《我们的二人转》 [28]</p>
<p>20150725《欢乐喜剧人》总决赛《人生》</p>
<p> 20160403《欢乐喜剧人》总决赛《美人鱼》</p>
<h2 id="grsh">个人生活</h2><hr>
<p>
宋小宝妻子霍小红本名霍云红，1981年6月21日出生黑龙江省海伦市，也是二人转演员。2012年4月，他们的龙凤胎儿女出生 [1] 。
</p>
<h2 id="hjjl">获奖记录</h2><hr>
<p>
▪ 2014-08-27 第十三届 华鼎奖 电视剧《樱桃红》 （获奖）
▪ 2013-10-07 第十届[4] 华鼎奖 （获奖）
▪ 2012-12-10 第八届[3] 华鼎奖 电视剧《樱桃》 （获奖）
▪ 2012-08-18 第四届[2] 新农村电视艺术节 电视剧《樱桃》 （获奖）
</p>
<h2 id="rwpj">人物评价</h2><hr>
<p>宋小宝为梦想付出了许多努力，成名之后的宋小宝依然很辛苦很努力。表演时不慎从高处跌落，腰部着地造成了腰椎骨折，可是宋小宝仍然坚持演完，甚至在结尾处配合队员大跳印第安舞，敬业精神可见一斑 [29] 。（腾讯娱乐评）</p>
<p>荧屏上宋小宝总是带给观众乐趣，“海燕，你可得长点心”“自打我进宫以来就独得皇上恩宠”等等经典语句都广为流传 [30] 。他展现了其与生俱来的艺能感——热情满满，朴实谦逊；随口一说，随意一唱，一个个令人捧腹的包袱便被抖落出来。惊艳的表现获众人赞叹：小宝站在那里就是一台戏 [31] 。“最能刻画人物性格 [32] 。”（搜狐娱乐、腾讯娱乐、赵本山评）</p>
</body>
</html>
base元素
为a标签设置统一的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>base demo</title>
<!--base:为a标签设置统一的属性,且不可见-->
<base href="https://baike.baidu.com/item/" target="_blank">
</head>
<body>
<h3>百科人物</h3>
<p>
<a href="马东">马东</a>、
<a href="蔡康永">蔡康永</a>、
<a href="高晓松">高晓松</a>、
<a href="李诞">李诞</a>、
<a href="薛兆丰">薛兆丰</a>、
<a href="马薇薇">马薇薇</a>、
<a href="肖骁">肖骁</a>、
<a href="黄执中">黄执中</a>、
<a href="邱晨">邱晨</a>
</p>
</body>
</html>
image元素
网页中图片分为三种：内容图片、布局图片、交互图片。
内容图片：通过内容图片可以大概知道此网站的主题，大概是一个什么类型的网站。
布局图片：修饰页面，为了网页更加美观。
交互图片：这些图片会给你浏览页面带来一些帮助。但是他们不是背景也不是内容。
网页中图片格式分为三种：jpg(jpeg)、png、gif。
jpg格式：图像最清晰，可以表示达1600种颜色。但不支持透明，也不支持动画。
png格式：合展示网页插画、 logo 和网页小图标。包括 PNG-8、PNG-24 和 PNG-32。支持透明但不支持动画。
gif格式：GIF 适合展示网页插画、 logo 和网页小图标。支持透明，支持动画。但图片的清晰度不是很好。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>image demo</title>
</head>
<body>
<!--当图片无法正常显示时，alt的属性值会显示在页面中，除此之外还能帮助盲人阅读网页内容-->
<img src="../image/yueyue.gif" alt="小岳岳" title="五环之歌">
</body>
</html>
ul元素
unordered list。无序列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul demo</title>
</head>
<body>
<!--ul:无序列表。type属性值包括：circle/square/disc-->
<ul type="circle">
<li>课程</li>
<li>教师</li>
<li>帮助</li>
</ul>
</body>
</html>
ol元素
ordered list。有序列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol demo</title>
</head>
<body>
<!--ol:有序列表-->
<ol start="2" type="A">
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ol>
<ol start="2" reversed>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ol>
</body>
</html>
dl元素
自定义列表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dl demo</title>
</head>
<body>
<dl>
<dt>咖啡</dt>
<dd>焦糖玛奇朵</dd>
<dd>美式</dd>
<dd>摩卡</dd>
<dt>茶</dt>
<dd>龙井</dd>
<dd>碧螺春</dd>
<dd>绿茶</dd>
<dd>红茶</dd>
</dl>
</body>
</html>
综合案例：美食网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>美食网</h1>
<h2>西红柿炒鸡蛋</h2>
<p>这道菜，俺从小吃到大，它承载着我儿时的全部味觉记忆，啥也不说了，吃吧同志们。</p>
<h3>材料</h3><hr>
<ul>
<li>中型西红柿2个</li>
<li>鸡蛋2个</li>
<li>料酒1茶匙（5ml）</li>
<li>清水1汤匙（15ml）</li>
<li>青葱2根</li>
<li>白糖2茶匙（10克）</li>
<li>番茄沙司2汤匙（30ml）</li>
<li>盐1茶匙（3克）</li>
</ul>
<h3>制作步骤</h3><hr>
<ol>
将鸡蛋打散，调入料酒和清水，继续搅匀。锅烧热，倒入油大火加热，待油8成热时，倒入鸡蛋，并用铲子迅速搅散。盛出备用。
用叉子叉住西红柿的底部，放在火上烤10秒钟，待表皮裂开后，撕去西红柿皮，将西红柿切块。青葱洗净切碎。
锅中倒入油大火加热，待油7成热时，放入青葱碎，随后倒入西红柿块，煸炒2分钟，待西红柿出汤后，调入白糖和番茄沙司，最后放入炒好的鸡蛋搅匀，出锅前放入盐即可。
</ol>
<h3>图片</h3>
<ul>
<li><img src="../image/egg-1.jpg" alt="准备材料"></li>
<li><img src="../image/egg-2.jpg" alt="炒鸡蛋"></li>
<li><img src="../image/egg-3.jpg" alt="西红柿去皮"></li>
<li><img src="../image/egg-4.jpg" alt="爆香葱花"></li>
<li><img src="../image/egg-5.jpg" alt="炒西红柿"></li>
<li><img src="../image/egg-6.jpg" alt="把鸡蛋放入一起炒"></li>
<li><img src="../image/egg-7.jpg" alt="出锅前放盐"></li>
<li><img src="../image/egg-8.jpg" alt="出锅"></li>
</ul>
<dl>
<dt>友情链接</dt>
<dd><a href="https://www.baidu.com">美食</a></dd>
<dd><a href="https://www.baidu.com">大粤美食</a></dd>
<dd><a href="https://www.baidu.com">爱奇艺生活</a></dd>
<dd><a href="https://www.baidu.com">搜狐美食</a></dd>
</dl>
</body>
</html>
table元素
表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table demo</title>
</head>
<body>
<table border="1">
<!--caption：表格的标题-->
<caption>班级信息</caption>
<!--thead：表头--居中且加粗-->
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!--tbody：表格体-->
<tbody>
<tr>
<!--rowspan：合并列，合并需删除多余的单元格-->
<td rowspan="3">1128--前端</td>
<td>潘安</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td>21</td>
</tr>
</tbody>
<!--tfoot：表格尾-->
<tfoot>
<tr>
<td>总人数</td>
<!--colspan：合并行，合并需删除多余的但单元格-->
<td colspan="3">2</td>
</tr>
</tfoot>
</table>
</body>
</html>
form元素
表单。表单的作用就是用来将用户信息提交给服务器的。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>form demo</title>
</head>
<body>
<!--form：将用户信息提交到服务器-->
<!--action：指定表单数据需要提交到哪个服务器-->
<!--method：指定表单的提交方法。GET在浏览器地址栏中会以查询字符串的格式：?属性名=属性值&属性名=属性值(键值对),但显示的内容有限(URL长度问题)。
POST表单信息不会显示在url的查询字符串中，能提交更多的数据。-->
<form action="image.html" method="GET" name="myForm">
<!--label：提示文字。指定一个for属性，匹配表单控件中的id值，点击提示文字，使表单控件快速获取焦点-->
<label for="username">用户名: </label>
<input type="text" id="username" name="username" autofocus><br>
<!--label：这是另一种点击提示文字，使表单控件快速获取焦点的方法，但此种方法必须将label与控件绑定在一起-->
<label>密码:
<input type="text" name="password">
</label><br>
<!--radio：单选框-->
<!--name：使两个单选按钮成为一组，互相互斥。value：用GET方法提交时，会在浏览器的标题栏中显示value给定的值。value中指定的值最终会提交给服务器-->
<!--checked：指定默认项-->
<input type="radio" name="gender" id="male" value="male"><label for="male">男</lable>
<input type="radio" name="gender" id="female" value="female" checked><label for="female">女</lable><br>
<!--checkbox：复选框-->
<!--checked：指定默认项-->
<input type="checkbox" name="hobby" id="sing" value="sing"><label for="sing">唱歌</label>
<input type="checkbox" name="hobby" id="dance" value="dance" checked><label for="dance">跳舞</label>
<input type="checkbox" name="hobby" id="sport" value="sport"><label for="sport">运动</label><br>
<!--select：单选下拉列表-->
<!--selected：指定默认项-->
<select name="job" id="job">
<option value="php">php工程师</option>
<option value="java">java工程师</option>
<option value="test" selected>测试工程师</option>
</select> <br>
<!--optgroup：下拉列表分组-->
<select name="city" id="city">
<optgroup label="广东">
<option value="1">广州</option>
<option value="2">深圳</option>
</optgroup>
<optgroup label="黑龙江">
<option value="">哈尔滨</option>
<option value="">大庆</option>
</optgroup>
</select><br>
<!--multiple：多选下拉列表，可按shift或ctrl键选择多个选项-->
<select name="brand" id="brand" multiple>
<option value="1">沃尔沃</option>
<option value="2">奥迪</option>
<option value="3">本田</option>
</select><br>
<!--textarea：多行文本。rows：显示的行数，cols：显示的字符数。-->
<label for="info">自我介绍</label><br>
<textarea name="info" id="info" cols="100" rows="5">这家伙很懒，什么都没留下。。。</textarea><br>
<!--file：文件上传-->
<label for="file">个人头像</label><br>
<input type="file" name="file" id="file"><br>
<!--input按钮-->
<label for="">input按钮</label><br>
<input type="button" name="button" id="button" value="普通按钮">
<input type="reset" name="reset" id="reset" value="重置">
<input type="submit" name="submit" id="submit" value="提交">
<input type="image" name="image" id="image" src="../image/yeye.gif" alt="动画"><br>
<p>
<!--button按钮-->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="menu">菜单</button>
<button type="button">普通按钮</button>
</p>
<!--feildset：为表单项进行分组-->
<!--legend：指定组名-->
<fieldset>
<legend>基本信息</legend>
</fieldset>
<fieldset>
<legend>详细信息</legend>
</fieldset>
</form>
</body>
</html>
SEO搜索引擎优化
1.meta
在<head>标签中添加两个<meta>标签:
keywords，关键字可以是是几个描述网站的单词，写在content属性中，用逗号分开，例如，美食,菜谱等等。
description，这里需要写一段话来描述网站的基本内容。
<head>
<meta name="keywords" content="美食，美食网，菜谱，食谱，美食地图">
<meta name="discription" content="美食网-做你最爱额美食，菜谱网。">
</head>
2.标题标签
h1~h6标签
<h1>美食</h1>
<h2>美食城</h2>
<h3>美食街</h3>
3.alt属性
图片中的alt属性。
<img src="" alt="岳云鹏">
4.title属性
确保多使用元素，并在这些元素上添加简明 有意义的文本。
<a href="../image/1.jpg" alt="美食" title="搜狐美食">美食</a>
网友评论