Web前端基础——<head>、<meta>、<h>、<p>、列表（<ul>、<ol>、<dl>）、分区、实体引用、<img>、路径、<a>、表格<table>、行分组
1、<head>元素的作用
<head>元素是所有头部元素的容器。
<head>内的元素可声明元信息，指示浏览器在何处可
以找到样式表，包含的脚本，等等。
以下标签都可以添加到head部分∶
<title>、<meta>、<link>、<style>、<script>等
2、<meta>元标签
| 属性 | 值 |
|---|---|
| charset | character encoding——定义文档的字符编码 |
| content | some_text——定义与 http-equiv 或 name 属性相关的元信息 |
| http-equiv | content-type、expires、refresh、set-cookie——把 content 属性关联到HTTP头部 |
| name | author、description、keywords、generator、revised、others——把 content 属性关联到一个名称 |
3、<hi>标题元素
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
4、<p>段落元素
<P>元素中的文本会用单独的段落显示
- 与前后的文本都换行分开
- 添加一段额外的垂直空白距离，作为段落间距
<p>段落标签1</p><p>段落标签2</p><p>段落标签3</p>
5、列表元素
（1）有序列表<ol>
| 属性名称 | 说明 |
|---|---|
| start | 从第几个开始统计：<ol start="2"> |
| reversed | 是否倒序排列：<ol reversed="reversed">，一半主流浏览器不支持 |
| type | 表示列表的编号类型，值分别为：1、a、A、i、I（默认为“1”） |
（2）无序列表<ul>
| 属性名称 | 说明 |
|---|---|
| type | 表示列表的编号类型，值分别为：disk、circle、square（默认为“disk”） |
（3）有序无序列表项都为<li>
（4）列表嵌套
（5）dl元素
- dl元素用于自定义列表，dl元素一般与dt元素（定义项目/名字）和dd元素（描述每一个项目/名字）一起使用。
6、分区
（1）块分区元素：<div></div>
（2）块级元素
- 默认情况下，块级元素会独占一行，即元素前后都会自动换行
- 如：
<p>、<div>、<hi>
（3）行内元素
-
不会换行，可以和其他行内元素位于同一行
-
如：
<span>、<a>
<span>元素是内联元素，可用作文本的容器。
<span>元素也没有特定的含义，当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。
例：
效果图：
-
<i>：定义斜体字 -
<em>：定义着重文字，（也是斜体）
例：
效果图：
-
<del>元素用来定义带删除线的文字。 -
<u>元素用来定义带下划线的文字。
例：
效果图：
-
<b></b>：用来加粗字体 -
<strong></strong>：用来加粗字体，（同<b>标签） -
<br>：在任何地方创建手工换行
例：
效果图：
7、实体引用:
HTML中常用的字符实体如下
| 描述 | 实体名称 |
|---|---|
| 空格 | |
| 小于号 | < |
| 大于号 | > |
8、图像元素
使用<img>元素将图像添加到页面
- 必须属性：src
- 常用属性：width、height
<!-- 图片和网页同级 -->
<img src="404.jpg"><!-- 图片在网页下级 -->
<img src="img/404.jpg"><!-- 图片在网页上级 -->
<img src="../404.jpg"><!-- 一般情况 -->
<img src="../iamges/404.jpg">
9、路径
-
绝对路径
指的是文件从最高级目录下开始的完整的路径，无论当前路径是什么，使用绝对路径总是能找到要链接的文件。
<img src="D:\day01\images\pig.png" width="200"/> -
绝对路径的缺点：
（1）路径写的很长,麻烦。
（2）若项目上线时,用户要求将网页和图片存到别的盘符下,那么所有路名都错了。 -
相对路径
指目标文件的位置是相对于当前文件的位置。它包括目录名，或指向一个可以从当前目录出发找到该文件的路径。
<img src="images\pig.png" width="200"/> -
相对路径的优点：
（1）简单。
（2）上线时无论将项目存到哪个盘符下网页和图片的相对位置没有变化。
10、超链接元素
使用<a>元素创建一个超级链接，语法如下:
<a href="" target="">文本</a>
- href属性：链接URL
- target属性：目标打开方式，可取值为_blank、_self等
- 超链接的特殊用法
将超链接链到本网页的某个位置。
（1）这个位置叫做锚点。
（2）必须提前声明锚点。
锚点：<a name="Gin">Gin</a>
链接：<h1><a href="#Gin">一级标题</a></h1>
顶部默认就是锚点,没有名字：<h1><a href="#">一级标题</a></h1>
11、表格
定义表格:使用成对的<table></table>标记
创建行：<tr></tr>
创建列（单元格）：<td></td>
例：
效果图：
<table>元素
- border：表格边框
- width/height
- align：表格相对于页面水平居中（center）
- cellpadding：单元格边框与内容之间的间距（单位：px像素）
- cellspacing：单元格之间的间距（单位：px像素）
<tr>元素
- align/valign：本行的内容水平（垂直）居中（center）
<td>元素
- align/valign：单个单元格的内容水平（垂直）居中（center）
- width/height
- colspan：列合并
- rowspan：行合并
例：
效果图：
12、行分组
表格可以划分为3个部分:表头、表主体和表尾
表头行分组：<thead></thead>
表主体行分组：<tbody></tbody>
表尾行分组：<tfoot></tfoot>
补充
1、WEB三要素
- 浏览器：
向服务器发起请求，下载服务器中的网页（HTML），然后执行HTML显示出内容。 - 服务器
接收浏览器的请求，发送相应的页面到浏览器。 - HTTP协议
浏览器与服务器的通讯协议。
2、XML和HTML的联系
- 1、XML
可扩展标记语言
标签,属性,标签的嵌套关系都可扩展
用来存储或传输数据
扩展：自定义 - 2、HTML
超文本标记语言
语法是固定的(w3c)
用来显示数据
有一些特定的版本严格遵守XML规范
扩展：可以将HTML理解为标签固定的XML
3、Eclipse中HTML的创建
- maven项目 ——> war包 ——>右键Generate…
- 必须切换到JavaEE视图(点Eclipse右上角JavaEE)
4、LOL官网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOL官网</title>
</head>
<body>
<img src="C:\Users\DELL\Desktop\lol.jpg" width="100%">
<br><br>
<h1>英雄联盟</h1>
<p>
<b>《英雄联盟》</b>（简称LOL）是由美国拳头游戏（RiotGames）开发、中国大陆地区
<b>腾讯</b>游戏代理运营的英雄对战MOBA竞技网游。 游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色养成系统。<br>
<b> 《英雄联盟》</b>致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办<u>“季中冠军赛”“全球总决赛”“All
Star全明星赛”</u>三大世界级赛事，形成了自己独有的电子竞技文化。
</p>
<table width="80%">
<tbody align="center">
<tr>
<td><b>中文名</b></td>
<td>英雄联盟</td>
<td><b>发行商</b></td>
<td>腾讯游戏</td>
</tr>
<tr>
<td><b>其他名称</b></td>
<td>lol、撸啊撸</td>
<td><b>发行日期</b></td>
<td>2011年9月23日</td>
</tr>
<tr>
<td><b>游戏类型</b></td>
<td>策略、角色扮演、团队竞技</td>
<td><b>玩家人数</b></td>
<td>多人联机</td>
</tr>
<tr>
<td><b>游戏平台</b></td>
<td>PC</td>
<td><b>游戏画面</b></td>
<td>3D</td>
</tr>
</tbody>
</table>
<h2>目录</h2>
<ol>
<li><a href="#back">背景设定</a>
<ul>
<li>德玛西亚</li>
<li>诺克萨斯</li>
<li>祖安</li>
</ul></li>
<li><a href="#hero">英雄设定</a>
<ul>
<li>英雄强化</li>
<li>英雄成就</li>
</ul></li>
</ol>
<h2>
<a name="#back">1、背景设定</a>
</h2>
<h3>德玛西亚</h3>
<p> 德玛西亚是一个法理至上的强大王国，战功赫赫，久负盛名。
德玛西亚人自古崇尚正义、荣耀和责任，近乎狂热地以自身的传统及底蕴为豪。
然而，尽管秉持着这些高尚的原则，在过去的几百年间，刚愎自用的德玛西亚越发与世隔绝， 成为了孤立主义的代名词。</p>
<p>
德玛西亚雄都以禁魔石——一种可以抑制魔法能量的白色岩石——为基，
起初是符文战争之后为了躲避魔法侵害的人们所建立的庇护地。 王权由中心向外辐射，守护着边远的城镇、农田、森林和矿产丰饶的山脉。</p>
<h3>诺克萨斯</h3>
<p> 诺克萨斯是一个威名震天的强大帝国。
在诺克萨斯境外的人眼中，它拥兵自重、血腥野蛮、欲壑难填， 但对于那些看透它好战外表的人来说，这里的社会氛围实际上超乎寻常地包容。
人民的所有特长和天赋都会得到尊重和受到培养的机会。</p>
<p>
古代诺克西人是残暴的野蛮人部落联合，
他们占领了一座古城，并将其建成了现在的帝国中心。当时的诺克萨斯面临着来自各方的威胁，
所以他们与所有敌人都激烈交锋，睚眦必报，不胜不归，最终让帝国的版图连年扩张。
这一段艰难求生的历史让诺克萨斯人从骨子里感到骄傲自豪，也因此重视力量胜过一切。 当然，力量可以通过许多不同的形式表现。<br>
无论社会立场、身世背景、祖国故乡和个人财富如何，
任何人都可能在诺克萨斯获得权力、地位、和尊敬，只要他们能够表现出必要的能力。 能够使用魔法的人会被高看一眼，帝国甚至会主动寻觅这类人，
让他们的特殊天赋得到锻炼并最高效地为帝国所用。
</p>
<h3>祖安</h3>
<p> 祖安是一片庞大的地下城区，
坐落在皮尔特沃夫周边蜿蜒的沟壑与峡谷之下。 交错层叠、腐蚀老化的排烟管网中泄露出各色烟尘，将上方射下来的光线过滤成诡异的颜色，
在祖安工坊的有色玻璃之间交叉反射。祖安和皮尔特沃夫曾经是联合统一的， 但现在却分裂开来，各成一派。虽然祖安一直都笼罩在雾霾遮蔽的暮色中，
但这里的繁华热闹却不让分毫，这儿的居民包罗万象，文化异彩纷呈。 皮尔特沃夫的财富也带动了祖安的发展，让它成为了头顶那座城市的黑暗镜面。
许多运往皮尔特沃夫的商品最后都辗转流入了祖安的黑市， 有些海克斯科技发明家可能会觉得地上之城给他们施加的限制太严格，
他们中的许多人都会发现自己的危险研究在祖安颇受欢迎。 对于不稳定技术和鲁莽产业的放纵式开发，让整个祖安的大片地区都遭到污染，
生存条件也变得越来越危险。剧毒的废水淤积在城市的下游地区，但即使是在这里， 人们依然能够设法生存并繁荣灿烂。</p>
<h2>
<a name="hero">2、英雄设定</a>
</h2>
<h3>英雄强化</h3>
<ul type="disc">
<li>符文系统
<p> 玩家可以在英雄选择时根据自己的玩法调整及自定义符文，共计60枚符文全部免费。
每个符文系中都有一个最强大的符文 - 基石，可以根据自己操作英雄的类型和追求进行调整。</p>
</li>
<li>召唤师技能
<p> 召唤师技能是英雄联盟的一大特色，每个玩家将有两个独立安放召唤师技能的技能栏，召唤师技能独立计算CD，
不需要任何消耗手段。但却是游戏中极为重要的一部分，不同的召唤师技能作用截然不同，
你可以根据自己或队伍的战术战略需求随意配置自己的召唤师技能。 召唤师技能随着召唤师的等级逐渐解锁，必须记住的是，
你只能携带两个不同的召唤师技能，而且一进游戏就不能更改， 只能等到下一盘游戏前才能更改。</p>
</li>
</ul>
<h3>英雄成就</h3>
<p>玩家每完成一场对局后，都会为所用的英雄获得基于队伍表现和个人贡献的成就点数。
在获取足够的成就点数后，该英雄的成就等级（阶位）就会提升，并获得奖励。</p>
<ul type="disc">
<li><b>资格：</b>
<p> 5级以上的所有召唤师都有资格获取英雄成就点数，
仅支持召唤师峡谷的匹配对局。</p></li>
<li><b>评分：</b>
<p> 鼠标悬停在结算界面的英雄成就的点数槽上，
可以看到本局游戏该英雄的评分。评分会提供奖励，奖励的多少取决于对局中的总体表现， 包括角色定位，所用的英雄，以及至关重要的分路。</p></li>
<li><b>点数：</b>
<p> 点击客户端的召唤师档案，
会看到展示总成就得分的全新数据统计，这个数据是所有英雄成就等级的总和。</p></li>
<li><b>升级：</b>
<p> 每个已解锁的英雄成就的前五个等级，
可以通过获取成就点数自动升级，当英雄成就达到5级后， 需要在战利品库中通过合成操作依次解锁6-7级。</p></li>
</ul>
<br><hr><br>
<p align="center">腾讯互动娱乐│服务条款│隐私保护指引儿童隐私保护指引│腾讯游戏招聘│腾讯游戏客服
│游戏冽表│成长守护平台│广告服务及商务合作</p>
<p align="center">
COPYRIGHT @1998-2020TENCENT.ALL RIGHTS RESERVED.
</p>
<p align="center">腾讯公司 版权所有</p>
</body>
</html>
扫一扫
3223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
