web前端技术1--标签
什么是标签
- 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
- 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
标签分类
标签一般分为两种:
1. 块级标签
霸占一整行的标签。比如:<h>,<p>,<div>,<form>等
2. 行内标签
可以多个标签共同占用一行的标签。比如:<span>,<a>,<input>,<img>,<label>等
3. 块级标签特点
- 总是在新行上开始
- 宽度缺省是它的容器的100%,除非设定一个宽度
- 它可以容纳内联元素和其他块元素
4. 行内标签特点
- 和其他元素都在一行上
- 宽度就是它的文字或图片的宽度,不可改变
- 内联元素只能容纳文本或者其他内联元素
<meta>标签
有两个属性:http-equiv属性 和 name属性,不同属性有不同的参数,这些不同的参数使得名,meta标签有不同的功能。
http-equiv属性
http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
- 页面编码
<meta http-equiv="content-Type" charset=UTF8">
- 页面刷新和跳转
<meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次网页 <meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 过5秒跳转到某网页。(关于跳转,可以在应急的时候用,一般可以用js实现)
- 解决IE浏览器兼容性问题
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
name属性
name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
- 供搜索引擎使用(关键词)
<meta name="keywords" content="星际2,飞船,UFO,皮卡"> 关键字
- 网站信息描述
<meta name="description" content="为您提供最新的信息"> 网站描述
<title>标签
title标签写网站头部信息,即网页标签的名称
<link>标签
link标签有两个作用:
1.设置标签页图标:
<link rel="shortcut icon" href="image/favicon.ico"> # rel指的是类型,href是文件路径,(image是存放图片的文件夹)
2.外联CSS文件:
<link rel="stylesheet" type="text/css" href="css/common.css"> # rel指的是类型,href是存放css文件的文件夹
<style>标签
在html文件中编写css样式
<script>标签
1.引进文件
<script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
2.写js代码
<script type="text/javascript">...</script>
基本标签
<hn>:n的取值范围是1~6; 从大到小. 用来表示标题. <p>:段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>:加粗标签. <strike>:为文字加上一条中线. <em>:文字变成斜体. <sup>和<sub>:上角标 和 下角表. <br>:换行. <hr>:水平线 <div>:白板,本身没有特性,块级标签。 <span>:白板,本身没有特性,行内标签。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world!</p> <p>hello<br /> world!</p> <h1>jehu</h1> <h3>jehu</h3> <span>kkk</span> <span>kkk</span> <span>kkk</span> </body> </html>
<sup>和<sub>的使用
<p>这个文本包含 <sub>下标</sub>文本。</p> <p>这个文本包含 <sup>上标</sup> 文本。</p>
显示结果:
这个文本包含 下标文本。
这个文本包含 上标 文本。
<input>标签
type属性
可以有如下取值:
text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) button和submit的区别? file 提交文件:form表单需要加上属性enctype="multipart/form-data"
name属性
- 表单提交项的键。
- 注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的。
value属性
表单提交项的值。
checked属性
radio 和 checkbox 默认被选中
readonly属性
只读,text 和 password 标签中使用
disabled属性
使得input标签无法编辑,对所用的input标签都有效
<textarea>标签
body内标签之input
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com/"> <input type="text" name="user"/> <input type="text" name="email"/> <input type="password" name="pwd"/> <input type="button" value="登录"/> <input type="submit" name="提交"/> </form> </body> </html>
form 表单,input 可以在这个标签里输入,submint 提交,把整个表单里输入的信息提交,name属性,用于让后台程序识别到找到这个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com/s?"> <input type="text" name="wd"/> <input type="submit" value="搜索"/> </form> </body> </html>
input type="radio" 单选框 (value,name属性,name相同则互斥)
input type="checkbox" 复选框(value,name属性,批量获取数据)
以上两个的属性中加 checked="checked" 默认被选中
input type="file" 上传文件,依赖form表单的一个属性 enctype="multipart/form-data"
input type="reset" 重置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <p>姓名:<input type="text" name="user"/></p> <p>性别:</p> 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="2"/> <p>爱好:</p> 篮球<input type="checkbox" name="favor" value="1"/> 足球<input type="checkbox" name="favor" value="2"/> 排球<input type="checkbox" name="favor" value="3"/> <p>上传文件</p> <input type="file" name="fname"/> </div> <br /> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>
多行文本框:<textarea>默认值</textarea> name属性
下拉框:
<select>
<option>xxx</option>
</select>
select标签有name属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <p>姓名:<input type="text" name="user"/></p> <p>性别:</p> 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="2"/> <p> 城市: <select name="city"> <option value="sz" selected="selected">深圳</option> <option value="gz">广州</option> <option value="sh">上海</option> <option value="bj">北京</option> </select> </p> <p>爱好:</p> 篮球<input type="checkbox" name="favor" value="1"/> 足球<input type="checkbox" name="favor" value="2"/> 排球<input type="checkbox" name="favor" value="3"/> <p>上传文件</p> <input type="file" name="fname"/> </div> <textarea name="meno"></textarea> <br /> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </body> </html>
a标签
- 跳转 超链接
-锚 href="#某个标签的id" 标签的id不允许重复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com/">百度一下1</a> <a href="http://www.qq.com/" target="_blank">腾讯网</a> <!--默认是直接在当前页面跳转,加了target="_blank"后是新打开一个页面 --> <a href="http://www.baidu.com/" target="_parent">百度一下2</a> <a href="http://www.baidu.com/" target="_self">百度一下3</a> <a href="http://www.baidu.com/" target="_top">百度一下4</a> <br/> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <div id="i1" style="height:500px;">第一章的内容</div> <div id="i2" style="height:500px;">第二章的内容</div> <div id="i3" style="height:500px;">第三章的内容</div> </body> </html>
img标签
<body> <a href="https://www.dygod.net/" target="_blank"> <img src="timg.jpg" title="武打动作" style="height:300px;wide:400px;" alt="武打动作"> </a> </body>
列表
ul 无序编号
li
ol 有序编号
li
dl 分层
dt
dd
表格
table标签
tr 行
td 列
<body> <table border="1"> <!-- border="1" 为表格加上边框 --> <thead> <tr> <th>主机IP</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>192.168.2.3</td> <td>80</td> <td> <a href="h5.html">查看详细</a> <a href="#">删除</a> </td> </tr> <tr> <td>192.168.2.4</td> <td>22</td> <td>操作</td> </tr> <tr> <td rowspan="2">192.168.2.5</td> <!-- 合并单元格,rowspan="2":占2行,colspan="2":占2列--> <td>22</td> <td>操作</td> </tr> <tr> <td>80</td> <td>操作</td> </tr> <tr> <td>192.168.2.7</td> <td>22</td> <td>操作</td> </tr> </tbody> </table> </body>
<label>标签
<body> <label for="username">用户名:</label> <input id="username" type="text" name="user"/> </body>
没有label标签的时候,只有点击文本框才能在上边输入,有了label标签,for属性等于text的id,那么点击标签里的文字,也可以在文本框里输入
css样式
css的样式有很多种,当如果想要把css样式应用到特定标签上有三种方式:
1、标签属性上编写,适用范围:指定一个标签。【不推荐,多标签无法复用样式】
<div style="color:green;">Alex</div>
2、head标签中定义,适用范围:当前页面的所有标签。【推荐,多个标签可复用样式】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> /*给所有的div设置样式*/ div { color: green; } </style> </head> <body> <div>Alex</div> <div>mjj</div> </body> </html>
上面的例子可以让body中所有的div标签具有color: green;样式
以后在企业中写应用css样式时,写单页面时会把样式写在head头部;写多页面时,会把样式写入css文件,然后再在要应用的html页面引入css即可。
2.2 选择器
学习选择器的目的就是选中html页面中指定标签,便于以后给他应用样式.
2.2.1 标签选择器
在body中找到所有指定标签,例如:找到所有div标签,让他们变成红色。
<head> <meta charset="UTF-8"> <title>Title</title> <style> div{background-color: gray;}
</style> </head>
2.2.2 id 选择器 (不推荐使用,因为标签的id不能重复,推荐使用class)
在body中找一个id匹配的标签。(HTML中ID属性应唯一,相当于人的身份证号码),例如:找到id等于i1的标签,让他的背景色变成蓝色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: blue;} </style> </head> <body> <h1>Jehu搜索引擎</h1> <form action="https://www.baidu.com/s?"> <input type="text" name="wd"/> <input type="submit" value="搜索"/> </form> <div id="i1">新闻</div> <div id="i2">图片</div> <div id="i3">视频</div> </body> </html>
上面这个例子因为只有新闻的id是i1,所有只能改变新闻的样式
2.2.3 class 选择器(推荐)
在body中找到所有class属性值匹配的标签。例如:找到所有class等于head的标签,让他背景色变成蓝色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: blue;} </style> </head> <body> <h1>Jehu搜索引擎</h1> <form action="https://www.baidu.com/s?"> <input type="text" name="wd"/> <input type="submit" value="搜索"/> </form> <div class="c1">新闻</div> <div class="c1">图片</div> <div class="c1">视频</div> </body> </html>
因为class可以重复,所以可以一次性更改多个标签的样式
2.2.4 属性选择器
在body中找到所以class属性值匹配的标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1[name="news"]{ background-color: blue;} </style> </head> <body> <h1>Jehu搜索引擎</h1> <form action="https://www.baidu.com/s?"> <input type="text" name="wd"/> <input type="submit" value="搜索"/> </form> <div class="c1" name="news">新闻</div> <div class="c1" name="picture">图片</div> <div class="c1" name="vidio">视频</div> </body> </html>
改变class等于c1,并且属性里name="news"的标签的样式
2.2.5 层级选择器(空格)
根据层级找到标签。如下面的例子,根据class=c1找class=c2,在class=c2里找div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 .c2 div{ background-color: blue;} </style> </head> <body> <h1>Jehu搜索引擎</h1> <form action="https://www.baidu.com/s?"> <input type="text" name="wd"/> <input type="submit" value="搜索"/> </form> <div class="c1" name="news">新闻</div> <div class="c1" name="picture">图片</div> <div class="c1" name="vidio">视频</div> <div class="c1"> <div class="c2"> <div>sdfsdfsd</div> </div> </div> </body> </html>
2.2.6 组合选择器(逗号)
多种属性的标签一起选择。下面例子,把c1,c2,c3的标签都选择修改样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1,.c2,.c3{ background-color: blue;} </style> </head> <body> <h1>Jehu搜索引擎</h1> <form action="https://www.baidu.com/s?"> <input type="text" name="wd"/> <input type="submit" value="搜索"/> </form> <div class="c1" name="news">新闻</div> <div class="c2" name="picture">图片</div> <div class="c3" name="vidio">视频</div> </body> </html>
css样式也可以写在单独文件中
在html文件的head里引用css文件:<link rel="stylesheet" href="com.css" />
com.css是css文件名
边框 border
<div style="border:1px solid red;">sdfsdf</div>
1px:边框宽度,solid:实线(dotted:虚线) ,red:边框颜色
height 高度 & width 宽度
在html中如果想要给标签设置高度和宽度的话,需要使用height和width属性,并且在设置时有两种单位:
- 像素,根据像素设置。
- 百分比,根据百分比设置。
因网页高度无限制,所以默认高度无法设置百分比,如果非要设置,则需要父级标签设置固定高度,子标签便可使用百分比设置高度。
注意:行内标签无法设置高度和宽度,如果想要设置必须转换为块级标签才能应用。
<div style="border:1px dotted red;
height:100px; 标签高度
width:80%; 标签宽度,像素,百分比
font-size:16px; 字体大小
text-align:center; 水平方向居中
line-height:100px; 根据标签高度垂直方向调整高度
font-weight:bold 字体加粗
">sdfsdfsdf</div>
float 浮动
float浮动用于实现N个标签并排存放(主要针对块级标签,行内标签默认就可以并排存放)。
页面布局时,一般都会使用div标签及float属性来实现,float设置时一般有两个值:
float:left
,标签并排向左浮动。float:right
,标签并排向右浮动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <h1>向左浮动</h1> <div> <div style="float:left;width: 100px;background-color: green;">天堂</div> <div style="float: left;width: 100px;background-color: red;">地狱</div> </div> </body> </html>
display 显示
display属性有3个常用的值,用于修改属性的展示状态:
display:block
,变为块级标签。display:inline;
,变为行内标签。display:inline-block
,变为行块内标签(行内和块级特性结合)。display:none
,把标签隐藏。(设置display:none隐藏标签,移除之后显示标签)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <h1>div标签</h1> <div style="background-color: #2aabd2;display: inline;height: 60px;">我是div</div> <div style="background-color: #2aabd2;height: 60px;">我是div</div> <h1>span标签</h1> <span style="background-color:gold;height: 60px;">我是span</span> <span style="background-color:gold;display: block;height: 60px;">我是span</span> <!--总结,HTML标签中 div和span标签可以通过display属性完全互换,其实记住一个div就行了。--> <h1>特殊的display:inline-block</h1> <div style="display: inline-block;background-color: pink;height: 80px;">我是</div> <div style="display: inline-block;background-color: goldenrod;height: 80px;">武沛齐</div> </body> </html>
padding 内边距
padding内边距作用是 为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。
/* 单独设置上下左右内边距 */
padding-left:8px;
padding-right:2px;
padding-top:4px;
padding-bottom:18px;
/* padding:上 右 下 左; */
padding:10px 0 2px; 4px;
/* padding:上下 右左; */
padding:7px 5px;
/* padding:上下右左; */
padding:8px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <h1>无内边距</h1> <div style="height: 200px;border: 1px solid #dddddd"> <div style="background-color: darkseagreen;">听妈妈的话</div> <div> 小朋友你是否有很多问号,为什么别人在那看漫画,我却在学画画对着钢琴说话。 </div> </div> <h1>内边距示例1</h1> <div style="height: 200px;border: 1px solid #dddddd"> <div style="background-color: gold;padding: 10px;">听爸爸的话</div> <div style="padding: 10px;"> 小朋友你是否有很多问号,为什么别人在那看漫画,我却在学画画对着钢琴说话。 </div> </div> <h1>内边距示例2</h1> <div style="height: 200px;border: 1px solid #dddddd;padding: 10px;"> <div style="background-color: gold;">听爸爸的话</div> <div> 小朋友你是否有很多问号,为什么别人在那看漫画,我却在学画画对着钢琴说话。 </div> </div> </body> </html>
margin 外边距
外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。
/* 单独设置上下左右内边距 */
margin-left:8px;
margin-right:2px;
margin-top:4px;
margin-bottom:18px;
/* margin:上 右 下 左; */
margin:10px 0 2px; 4px;
/* margin:上下 右左; */
margin:7px 5px;
/* margin:上下右左; */
margin:8px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> </head> <body> <div style="height: 200px;background-color: gold;"></div> <div style="height: 200px;background-color: pink;margin-top: 20px;"></div> </body> </html>
特别注意:关于外边距还有两个特殊的知识点需要学习。
-
body标签默认有一个 8px的外边距,所以你会发现默认的页面都有一个“白边”。
- 自动居中布局,你应该见过很多网站的内容都在中间放置,两边是空白。
/* 只要指定宽度并设置margin为 0 auto 就可以实现div 自动居中布局*/
width:900px;
margin:0 auto;
自动居中布局,你应该见过很多网站的内容都在中间放置,两边是空白。