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>

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 无序编号

　　ol 有序编号

　　dl　　　　分层

表格

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;

自动居中布局，你应该见过很多网站的内容都在中间放置，两边是空白。

posted @ 2020-05-14 02:46 jehuzzh 阅读(202) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jehu的技术之路

web前端技术1--标签

什么是标签

标签分类

<meta>标签

http-equiv属性

name属性

<title>标签

<link>标签

1.设置标签页图标：

2.外联CSS文件：

<style>标签

<script>标签

1.引进文件

2.写js代码

基本标签

<sup>和<sub>的使用

<input>标签

type属性

name属性

value属性

checked属性

readonly属性

disabled属性

<textarea>标签

2.2 选择器

2.2.1 标签选择器

2.2.2 id 选择器（不推荐使用，因为标签的id不能重复，推荐使用class）

2.2.3 class 选择器（推荐）

2.2.4 属性选择器

2.2.5 层级选择器（空格）

2.2.6 组合选择器（逗号）

height 高度 & width 宽度

float 浮动

display 显示

padding 内边距

margin 外边距

公告

jehu的技术之路

web前端技术1--标签

什么是标签

标签分类

<meta>标签

http-equiv属性

name属性

<title>标签

<link>标签

1.设置标签页图标：

2.外联CSS文件：

<style>标签

<script>标签

1.引进文件

2.写js代码

基本标签

<sup>和<sub>的使用

<input>标签

type属性

name属性

value属性

checked属性

readonly属性

disabled属性

<textarea>标签

2.2 选择器

2.2.1 标签选择器

2.2.2 id 选择器 （不推荐使用，因为标签的id不能重复，推荐使用class）

2.2.3 class 选择器（推荐）

2.2.4 属性选择器

2.2.5 层级选择器（空格）

2.2.6 组合选择器（逗号）

height 高度 & width 宽度

float 浮动

display 显示

padding 内边距

margin 外边距

公告

2.2.2 id 选择器（不推荐使用，因为标签的id不能重复，推荐使用class）