富贵资源网 Design By www.hznty.com
1.HTML概述
1.HTML：超文本标记语言。是一种标识性语言，非编程语言，不能使用逻辑运算。通过标签将网络上的文档格式进行统一，使分散的网络资源链接为一个逻辑整体。
超文本是一种组织信息的方式，通过超级链接将多种媒介链接起来
标记:标签。用<>包裹的具有一定含义的内容，比如:…
静态网页:不变
动态网页：跟后台同时改变
2.HTML标签结构
1.文档结构：
<!doctype html><!--!表示声明的意思。这一行代码意思：下面的文档标签将以html5进行解析-->
<html>
<!-头部.用来完成一个网页的相关设置->
<head>
<meta charset="utf-8"><!--汉字编码--><!--meta:元，用来完成对应设置-->
<meta name="keywords" content=""><!--设置一个网站搜索的关键字-->
<meta name="description" content=""><!--网站的描述内容-->
<title>我的第一个html网页</title><!--标题-->
<!--设置网站的小图标-->
<link rel="shortcut icon" href="" type="image/png">
<style>
/*书写样式的地方*/
</style>
<link rel="stylesheet" href="style.css"><!--用来引入外部样式文件-->
</head>
<!--2.主体部分-->
<body>
<p>这是一个段落</p>
</body>
<script>
//放脚本代码的地方
</script>
</html>
2.常用标签：
<!--做移动端开发设置-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--1.div标签，用于布局，没有具体含义,分层。层-->
<div></div>
<!--2.hx:标题,从1级到6级，1级最大，6级最小，自动加粗，有默认字号-->
<h1></h1>...<h6></h6>
<!--3.p标签：表示段落。相当与一个回车.-->
<p></p>
<!--4.br：生成换行符-->
<br>
<!--6.a标签,实现链接跳转,target：_blank新窗口/_self当前窗口_parent/top-->
<a href="url地址/链接" title="B站">文本</a>
<a href="url地址" target="_blank">文本</a>
<a href="url地址" target="_self">文本</a>
<a href="'#href" target="#href">文本</a>
锚点链接 href='#href' 目标位置的属性要设置为与其一直 id='#href'
<!--7.img用于加载外部图片图像，src用来设计加载的图片或图像的路径,alt当图片图像加载不成功时，显示alt中的内容，否则不会显示-->
src路径 alt替换文本 title 图片提示文本 width:图像宽度 height:图像高度 border边框
<img src="" alt="显示不出的名字">
<!--8.span作用与div一样，都是用于布局，div会单独占一行，span不会,span便签用于行内布局-->
<span></span>
<!--9.ul和ol,前者无序后者有序，都用的li标签。-->
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
//自定义列表 重点每个网站的最下面基本都是通过自定义
<dl> dl中只能有dt和dd 一个dt对应多个dd 为兄弟关系
<dt></dt>名词1
<dd></dd>名词1解释1
<dd></dd>名词1解释2
</dl>自定义列表
4.标签属性:
<!--标签属性:
1.通常由属性名="属性值"组成
2.起附加信息的作用。
3.不是所有标签都有属性，比如br标签-->
下面的title class就是属性名，而后面的就是属性值
<p title="段落" class="content" id="content">这是一个测试段落</p>
5.部分其他标签:
<!--文本格式化标签：就是通过标签来美化文本外观->
<!--1.b和strong:都有加粗作用，且都是行级标签(不会自动换行)，
但strong还有强调作用。注:强调主要是用于SEO时，便于提前关键字-->
<b>加粗</b>
<strong>加粗且强调</strong>
<!--2 i和em：使文字倾斜,em具有强调作用。且都是行级标签(不会自动换行)，
如果只是简单倾斜效果，用i标签就可以了，比如添加图标等-->
<i>倾斜</i>
<em>倾斜且强调</em>
<!--3.pre预格式化文本,保留换行和空格及宽度。
文字的字号会小一号,块级标签（在浏览器中会独占一行）-->
<pre>
pre预格式化
文本,保留换行和空
格及宽度
</pre>
<!--samll和big，将文字缩小或放大一号（行级标签，不会独占一行，且不识别宽高）-->
<!--浏览器支持的最小字号是12px，显示比12px还小的文字的话，需要进行处理-->
<p>我是正常的</p>
<small>我是小一号的文字</small>
<!--sub和sup：设置文本为下标和上标,用来调整文本正常显示的基线，且文字会自动小一号-->
<p>正常显示:X1+X2=Y</p>
<p>下标:X<sub>1</sub>+X<sub>2</sub>=Y</p>
<p>下标:X<sup>1</sup>+X<sup>2</sup>=Y</p>
删除线 <del></del> <s></s>
下划线 <ins></ins> <u></u>
转义字符： 空格 < 小于号 >大于号
6.表格标签以及表单标签
表格标签结构: 作用:显示 展示数据
<table> <!--表格标签-->
<th></th> 表头单元格
<tr>
<td></td>单元格
</tr>行
</table>
属性
align left center right 对齐
border边框 cellpadding 文字和单元格的距离 cellspacing 单元之间的距离 width
表格结构标签
<thead></thead> 表头区域
<tbody></tbody> 主体区域
合并单元格:跨行合并:rowspan行和行 跨列合并:colspan列和列
合并代码:跨行:在最上侧单元格为目标单元格，写合并代码
跨列:在最左侧单元格为目标单元格，写合并代码
跨行或跨列步骤:
1.确定跨行还是跨列 2.找到目标单元格 3.删除多余单元格
7.表单标签:
表单标签:主要用途:收集用户信息
表单由表单域 表单控件（元素） 提示信息组成
表单域 实现用户信息传递<form action="" method=""></form>
action跟着的为地址 method提交方式 name名称
input输入表单元素:
<input type="text">
type属性值:text文本 password密码 button ridio单选框() checkbox(多选按钮).....
submit(提交按钮，将表单值提交给服务器) reset 清除表单的所有数据
button 普通按钮 结合js使用 file 上传文件
name属性:表单元素的名字，单选按钮必须有相同的名字才可以多选1
单选按钮和复选框都要有相同的name
value属性 定义值
每个元素都应该有的，主要给后台人员来使用的
checked 针对单选和多选 当页面打开的时候默认选择
maxlength 最大长度
select下拉表单元素
使用场景:有多个选项，想节约空间<select name="" id="">
<option value=""></option>
</select>
select至少包含一个option 在option中的属性selected = selected进行默认选择
<label for=""></label>使用场景 for 和表单元素的id属性相同就对应上
textarea文本域表单元素 输入文本较多时
<textarea><textarea>一般规定长度通过css
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。