HTML基础（一）HTML标签

前端的三把利器：

HTML：可以比喻成一个赤裸的人，未加任何修饰的

CSS：华丽的衣服，给赤裸的人穿上衣服，用来修饰HTML

JS（JavaScript）：让穿上衣服的人动起来，赋予用CSS修饰后的HTML的行动能力

HTML（超文本语言）

html代码实际上就是一整套可以被浏览器所识别的规则的代码，由一个个的标签组成。html代码实际上就是一大长串的字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。每种标签都有自己的特定的含义以及一些特性。

后端与前端的交互方式

1、后端通过直接返回浏览器能够识别的html代码

2、后端返回数据，前端替换html种的指定数据

HTML标签

1、自闭和标签

2、主动闭合标签

<a></a>像这种有两对尖括号包裹的就是主动闭合标签，它们都是成对使用的

一、html head

在head里面的内容都是些修饰的，内部的东西，不会在页面上展示出来，除了title，就是浏览器中tag页上的标题

1.http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

meta标签的http-equiv属性语法格式是：<meta http-equiv="参数" content="参数变量值">

1） refresh 刷新：自动刷新并指向新页面

2. name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是：<meta name="参数" content="具体的参数值">

1） keywords 关键字：用来告诉搜索引擎你网页的关键字是什么

2） description 网站内容描述：用来告诉搜索引擎你的网站主要内容

在head里面还可以放一些css样式的连接，title以及title的图标等

1）title名称

2）title的图标
<link rel="shortcut icon" href="tubiao.ico">

3）引入css

4）css样式

5）引入js和编写js

二、html body

1）符号：

空格：&nbsp 、大于号：&gt 、小于号 &lt

<a href="http://www.imdsx.cn">测&nbsp&nbsp试</a>：写几个&nbsp就会显示几个空格

如果在页面需要展示<p></p>，则在代码中应该写成：&ltp&gt&lt/p&gt，而不能直接在代码中写<p></p>

2）块级标签：占满一整行

H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)

3）行内标签：自己有多大就占多大面积

SPAN标签(白板)

a. <p></p> ：段落标签，占满一整行，段落之间有空行

例：<p>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</p>

如果想换行可以加<br />标签

例：<p>年轻,就是拿来折腾的。<br />让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>

也可以在外面包裹一层<div></div>标签

例：<div>

<p>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</p>

</div>

<p>真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</p>

b.<h1></h1>：标题标签，h1最大 h6最小

例：

<h1></h1> 标题标签h1

<h2></h2> 标题标签h2

<h3></h3> 标题标签h3

<h4></h4> 标题标签h4

<h5></h5> 标题标签h5

<h6></h6> 标题标签h6

c.<div></div>：块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签

例：<div>自动化测试</div>

d.<span></span>：行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签

例：<span>自动化测试</span>

e.<form></form>：表单标签，可以理解为载体，承载着所有要向后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中

例：post：<form action="/login" method="post">

</form>

get： <form action="/login" method="get" enctype="multipart/form-data">

</form>

f.<input></input>：文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset

例：<input type="text" name="username" value="默认值"/>：文本输入框，其中name属性中的值就是与后端进行交互的，必须要与后端保持一致

<input type="password" name="passwd"/>：密码输入框

<input type="button" value="登录"/>：按钮框，点击什么用也没有需要结合js绑定事件

<input type="submit" value="提交"/>：提交框，这个属性必须与form同时使用才会有效果

多选框 checkbox {"name"：[1,2,3]} 默认值checked=checked

<p>女朋友的选择标准</p>

<input type="checkbox" name="check" value="1" checked="checked"><span>大长腿</span>：多选框

单选框 name相同勾选是互斥

<input type="radio" name="sax" value="1" checked="checked"><span>男</span>：单选框

<input type="file" name="file"/>：文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器

<input type="reset" value="重置">：重置，还原表单中填写的数据到默认，这个属性必须与form同时使用才会有效果

g.<lable></lable>：label 标题标签与input联合运用，增加input的点击范围可直接点击文字就输入 for：映射到input的id

例：<label for="username">用户名</label>

h.<textarea></textarea>：多行文本 textarea 默认值在标签之间

例：<textarea name="meno">默认值</textarea>

i.<select></select><option></option>：下拉框标签默认选择在option上增加selected size属性显示多少个多选属性：multiple

例：<select name="city" size="3" multiple="multiple">：这边设置的selected size为3，当超过3个的时候，就显示滚动条

<option value="2" selected="selected">辽宁</option>：selected="selected"——默认选择项

</select>

j.<select></select><optgroup></optgroup>：对下拉选项进行分组optgroup 分组
例：<select name="city" size="3" multiple="multiple">

<optgroup label="黑龙江省">：label属性是组的名字，不可选择

</optgroup>

</optgroup>

</select>

k.<a></a>：超链接标签 a href：跳转的链接 target="_blank" 新tab打开页面

例：<a href="http://www.baidu.com" target="_blank">大师兄</a>，点击“大师兄”的时候页面就会跳转至百度

超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射去掉a标签的下划线通过属性text-decoration:none

i.<img/>：图片标签 src：图片的位置图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字

例：<a href="http://www.imdsx.cn"><img src="1.png" style="height: 200px;width: 200px;" alt="html" title="大师兄html"></a>

l.<ul></ul><li></li>：列表 ul li 点

例：<ul>

</ul>

m.<ol></ol><li></li>：列表 ol li 数字

例：<ol>

</ol>

n.<dl></dl><dt></dt><dd></dd>：分层列表 dl dd内层 dt外层

例：<dl>

</dl>

<dl>

</dl>

o.<table></table>：表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列；colspan等于几就占几列；rowspan等于几就占几行，colspan和rowspan用于合并单元格

例：<table border="1">

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>table表格测试</td>

</tr>

<tr>

<td colspan="2">table表格测试</td>

</tr>

<tr >

<td rowspan="2">table表格测试</td>

</tr>

<tr>

</tr>

</tbody>

</table>

posted @ 2018-12-05 17:09 糯米泥鳅阅读(318) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

糯米泥鳅

HTML基础（一）HTML标签

<h1></h1> 标题标签h1

<h2></h2> 标题标签h2

<h3></h3> 标题标签h3

<h4></h4> 标题标签h4

<h5></h5> 标题标签h5

<h6></h6> 标题标签h6

公告