前端 标签的使用
前端
一、web标准
1 web总结： 2 结构标准：HTML用来制作网页 3 表现标准：CSS就是对网页进行美化 4 行为标准：JS让网页动起来
二、开发工具介绍
Sublime Text使用
----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F202E 7B91AB2D 0D2A40ED 352B269B 76E84F0B CD69BFC7 59F2DFEF E267328F 215652A3 E88F9D8F 4C38E3BA 5B2DAAE4 969624E7 DC9CD4D5 717FB40C 1B9738CF 20B3C4F1 E917B5B3 87C38D9C ACCE7DD8 5F7EF854 86B9743C FADC04AA FB0DA5C0 F913BE58 42FEA319 F954EFDD AE881E0B ------ END LICENSE ------
三、HTML介绍
html全程Hyper Text Mackeup Language，翻译为超文本标记语言，它不是编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等
HTML是负责描述文档语义的语言
html中除了 语义 ，其他什么都没有
四、HTML规范
HTML的结构：
声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准
head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
body部分：我们所写的代码必须放在此标签內。
HTML的基本语法特征
1）HTML对换行不敏感，对tab不敏感 2）空白折叠现象 HTML中所有文字之间，如果有空格、换行、tab都被折叠成一个空格显示
3）标签要严格封闭
五、HTML结构详解
头标签(head)
1 head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style> 2 3 <title>：指定整个网页的标题，在浏览器最上方显示。 4 <meta>：提供有关页面的基本信息 5 <link>：定义文档与外部资源的关系。 6 <style>:定义内部样式表与网页的关系
meta标签介绍：
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词 标签位于文档的头部，不包含任何内容 提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能 常用的meta标签： （1）http-equiv属性 它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值 <!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;character=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge"> （2）name属性 主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的 <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" /> <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" /> 只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO(search engine optimization, 搜索引擎优化)
效果如下：
<meta name=viewport content="width=device-width, initial-scale=1">
上面这个标签，是让我们网页支持一定断，移动设备优先
title标签
主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题
<title>路飞学城</title>
效果如下：
body标签
标题使用<h1>至<h6>标签来定义，<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。
<h1>路飞学城</h1> <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6>
特殊字符
  空格(non-breaking spacing,不断打空格) < 小于号(less than) > 大于号(greater than) & 符号& " 双引号 &apos 单引号 © 版权© &trade 商标™ 要求大家背过的特殊字符： 、<、>、©
排版标签
段落标签
段落是英文paragraph的缩写
属性
align="属性值":对齐方式。属性值包括:left、center、right 示例： <p>这是一个段落</p> <p align="center">这是另一个段落</p>
HTML将所有的标签分为两种：
文本级标签：p , span , a , b , i , u , em 文本标签只能放文字、图片、表单元素
容器级标签：div , h系列 , li , dt , dd 容器级标签可以放任何东西
牢记：p标签是一个文本级标签，p里面只能放文字、图片、表单元素，其他一律不能放
块级标签<div>和<span>
div和span是非常重要的标签，div语义是division 分割；span语义是span 范围。 div：把标签中的内容作为一个块来对待，必须单独占据一行 div标签属性： align="属性值"：设置块儿的位置。属性值可选择：left、right、 center <span>和<div>唯一区别：<span>在一行，<div>是换行的
示例： <body> <div> 导航栏 </div> <div> 中心banner </div> <span>路飞</span> <span>alex</span> </body>
效果：
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span举例： <body> <p> 商品简介 <span> <a href="">详细信息</a> <a href="">生成日期</a> </span> </p> </body>
#div举例 <div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="ganggao"></div> <div class="shop"></div> </div> <div class="footer"></div> 所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。 ps:这个class属性名就与css有很大关联，讲到css模块会详细讲这块内容。
换行标签<br>
水平线标签<hr>
内容居中标签<center>
六、超链接
超链接有三种形式：
1、外部链接：链接到外部文件
<a href="new.html">点击进入到新网页</a>
# new.html 是本地的html文件
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签
href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫
效果:
当然，我们也可以直接点进链接，访问一个网址。举例如下； <a href="http://www.baidu.com" target="_blank">进入百度</a>
特殊几个链接：
返回页面顶部的位置 <a href="#">跳转到顶部</a> 与js有关： <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a>
超链接的属性
1 href 目标URL 2 title 悬停文本 3 name 设置一个锚点的名称 4 target 告诉浏览器用什么方式打开目标页面。 5 _self 在同一个网页中显示(默认值) 6 _blank 在新的窗口中打开 7 _parent 在父窗口中显示 8 _top 在顶级窗口显示 9 10 blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的 11 也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。
七、图片标签<img />
img代表的就是一张图片，是单边标记
img是自封闭标签，也称为单标签
能插入的图片类型
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
不能往网页中插入的图片格式是：psd、ai
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上
src属性：图片的相对路径和绝对路径
img标签其他属性
width 宽度
height 高度
title 提示性文本，鼠标悬停时出现的文本
align 图片水平对齐方式，可选left，center，right
alt 图片不显示是，代替图片显示的内容
<img src="meinv1.jpg" alt="百度美女" title="美女1" width="400">
body标签中相关标签
列表标签
无序标签<ul> ，无序列表中的每一项是<li>
ul：unordered list，“无序列表”的意思
li：list item，“列表项”的意思。
<ul type="circle">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
效果：
注意
li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
属性：
type="属性值" ， 属性值可选：disc（实心原点，默认），square(实心方点),circle（空心圆）
有序列表<ol>,里面每一项是<li>
<ol>
<li>嘿哈</li>
<li>哼哈</li>
<li>欧哈</li>
</ol>
#结果：
1. 嘿哈
2. 哼哈
3. 欧哈
定义列表<dl>
英文单词：definition list，没有属性。dl的子元素只能是dt和dd。 <dt>：definition title 列表的标题，这个标签是必须的. <dd>：definition description 列表的列表项，如果不需要它，可以不加 备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
<dl>
<dt>第一条规则</dt>
<dd>不准睡觉</dd>
<dd>不准玩游戏</dd>
<dd>不准交头接耳</dd>
</dl>
#结果
第一条规则
不准睡觉
不准玩游戏
不准交头接耳
表格标签
表格标签用<table>表示。 一个表格<table>是由每行<tr>组成的，每行是由<td>组成的。 一个表格是由行组成的（行是由列组成的），而不是由行和列组成的
<table>
<tr>
<td>小马哥</td>
<td>18</td>
<td>男</td>
<td>山东</td>
</tr>
<tr>
<td>小岳岳</td>
<td>45</td>
<td>男</td>
<td>河南</td>
</tr>
<tr>
<td>邓紫棋</td>
<td>23</td>
<td>女</td>
<td>香港</td>
</tr>
</table>
效果
1 <table> 的属性 2 3 border 边框，像素为单位 4 style="border-collapse:collapse;" 单元格的线和表格的边框线合并 5 width 宽度 6 height 高度 7 bordercolor 表格的边框颜色 8 align 表格的水平对齐方式，属性值为：left center right 9 注意：此处不是设置表格里内容的对齐方式，如果对内容对齐方式，要对单元格标签<td>进行设置 10 cellpadding 单元格内容到边的距离
<tr> 行
一个表格就是一行一行组成的嘛。 属性： dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） bgcolor：设置这一行的单元格的背景色。 height：一行的高度 align="center"：一行的内容水平居中显示，取值：left、center、right valign="center"：一行的内容垂直居中，取值：top、middle、bottom
<td> 单元格
align：内容的横向对齐方式。属性值可以填：left right center。 valign：内容的纵向对齐方式。属性值可以填：top middle bottom width：绝对值或者相对值(%) height：单元格的高度 bgcolor：设置这个单元格的背景色。 background：设置这个单元格的背景图片。
单元格合并
如果要将两个单元格合并，那肯定就要删掉一个单元格。 单元格的属性： colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
<caption> 表格的标题，使用时和tr标签并列
表格的<thread>标签、<tbody>标签、<tfoot>标签
这三个标签有与没有的区别 1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
表单标签
表单标签用<form>表示，用于与服务器的交互，表单就是收集用户信息的，就是让用户填写的、选择的 属性： name 表单名称，用来JS来操作或控制表单时使用 id 表单名称，用于JS来操作或控制表单时使用 action 指定表单数据的处理程序，一般是PHP，如：action=“login.php” method 表单数据的提交方式，一般取值：get(默认)和post get提交和post提交的区别： GET方式： 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开 特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符 POST方式 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据 特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img) Enctype 表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用 Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以 Multipart/form-data：上传附件时，必须使用这种编码方式
<input> 输入标签(文本框)
用于接收用户输入
<input type="text" />
属性 type="属性值"：文本类型。属性值可以是 text（默认) password：密码类型 radio：单选按钮，名字相同的按钮作为一组进行单选 checkbox：多选按钮，名字相同的按钮作为一组进行选择 checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略 hidden：隐藏框，在表单中包含不希望用户看见的信息 button：普通按钮，结合js代码进行使用 submit：提交按钮 reset：重置按钮 image：图片按钮 file：文件选择框 value="内容"：文本框里的默认内容（已经被填好了的） size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。 readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写 disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写
<form> 姓名：<input value="呵呵" >逗比<br> 昵称：<input value="哈哈" readonly=""><br> 名字：<input type="text" value="name" disabled=""><br> 密码：<input type="password" value="pwd" size="50"><br> 性别：<input type="radio" name="gender" value="male" checked="">男 <input type="radio" name="gender" value="female" >女<br> 爱好：<input type="checkbox" name="love" value="eat">吃饭 <input type="checkbox" name="love" value="sleep">睡觉 <input type="checkbox" name="love" value="bat">打豆豆 </form>
效果:
四种按钮的举例：
<form> <input type="button" value="普通按钮"><br> <input type="submit" value="提交按钮"><br> <input type="reset" value="重置按钮"><br> <input type="image" src="images/bojie.jpeg" width="400" value="图片按钮2"><br> <input type="file" value="文件选择框"> </form>
<select> 下拉列表标签
<select>标签里每一项用<option>表示。select就是"选择",option"选项" select标签和ul、ol、dl一样，都是租标签 <select>标签属性： multiple 可以对下拉列表中选项进行多选，没有属性值 size="3" 如果属性值大于1，则列表为滚动试图。默认属性值为1，即下拉试图 <option>标签属性： selected 预选中，没有属性值
<form> <select> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option selected="">研究生</option> </select> <br><br><br> <select size="3"> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option>研究生</option> </select> <br><br><br> <select multiple=""> <option>小学</option> <option>初中</option> <option selected="">高中</option> <option selected="">大学</option> <option>研究生</option> </select> <br><br><br> </form>
效果：
<textare> 标签，多行文本输入框
text就是"文本"，area就是"区域"
属性： value 提供给服务器的值 rows="4" 指定文本区域的行数 cols="20" 指定文本区域的列数 readonly 只读 <form> <textarea name="txtInfo" rows="4" cols="20">路飞学城</textarea> </form>
效果：
<label>标签
选择性别时，如果点击男、女字体时也可以选中，可以使用label标签解决
<input type="radio" name="sex" id="nan"><label for="nan">男</label> <input type="radio" name="sex" id="nv"><label for="nv">女</label> 上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了
浙公网安备 33010602011771号