一、HTML标签

前端语言

HTML-将页面展现出来
CSS-修饰前端标签让HTML更好看 css 对html 进行修饰
JS-能够让页面动起来

HTML

htyper text markup language 即超文本标记语言

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 标记（标签）构成的语言.

网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的

什么是标签:

是由一对尖括号包裹的单词构成例如: <html> *所有标签中的单词不可能以数字开头.
标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
标签分为两部分: 开始标签<a> 和结束标签</a>. 两个标签之间的部分我们叫做标签体.
有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

 <!DOCTYPE html>       #声明文档类型，
 <html lang="en">      #是所有标签的容器，lang表示语言，表示整个文档的内容以什么语言为主
 <head>                 #页面结构的头部，包含辅助显示的标签
     <meta charset="UTF-8">
     <title>Title</title>     #页面的标题，在标题栏显示的内容
 </head>
 <body>                      页面结构的主体，包含在页面中显示的标签

 </body>
 </html>
 <!DOCTYPE>:设置当前文档使用的标准，建议使用HTML5的类型，
 HTML标签：用于包裹页面上所有的其他标签
 head标签：用于存放title，meta，base，style，script，link标签，这些标签都是用来辅助显示的标签，每个head标签必须有一个title标签
 body标签：用于存放所有的页面上的结构标签
 title标签：用于设置页面的标题、同时提高SEO的权重
 meta标签：设置页面上的字符集（编码格式），utf-8,gb2312
 <!--注释内容-->:HTML注释，给代码添加的代码说明性的文字，或者使一些没有必要去掉它的作用
 语义化：是指用合理HTML标签以及特有的属性去格式化文档内容

1.1 基本标签

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<br>  #换行

<!--水平线--><hr> #就是单独个一个水平线
每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用

1.2 特殊字符

&nbsp;    #空格            °    #&deg；
&gt;     #>               ±    #&plusmn;
&lt;      #<              ÷    #&divide;
&amp;     #&              乘号   #&times;
&yen;     #¥              ²平方     #&sup2;
&copy;     #版权标识©      ³立方     #&sup3
&reg;      #注册

1.3 div标签和span标签（最常用的），没有语义的标签

div布局标签在页面上单独独占一行，如果不设置宽度，默认占一行，通常作为容器布局的时候使用

div是块级标签，也叫【伪标签】，无论自己有多大，都占满屏幕

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。


span标签一行可以放多个，显示大小由内容决定

span标签又叫内联标签，也叫【白板标签】，自己有多大就占多大

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

    <div>div是块级标签，也叫【伪标签】，无论自己有多大，都占满屏幕</div>
    <span>span标签又叫内联标签，也叫【白板标签】，自己有多大就占多大</span>

1.4 input标签

<input> 标签规定了用户可以在其中输入数据的输入字段。

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入字段可通过多种方式改变，取决于 type 属性。

1.4.1 <input type = text>属性写在标签内部 <>之间  属性与属性之间用“空格”分隔

   <input type=text placeholder="请输入用户名">



1.4.2 value属性是input的默认值属性

<div>
        <input type=text placeholder="请输入用户名">

</div>

<div>
        <input type=text value="请输入用户名">

</div>

1.4.3 <input type=password value="请输入用户名">

隐藏密码属性

<div>
        <input type=password value="请输入用户名">

</div>

1.4.4 <input type=button value="登录">

登录按钮，可点击

<div>
        <input type=text placeholder="请输入用户名">
</div>
<div>
        <input type=text placeholder="请输入密码">
</div>
<div>
        <input type=button value="登录">
</div>

1.5 form 表单标签

跟后台交互的方式之一 form表单的提交会对页面进行刷新，这样对用户的体验不好，所以渐渐被异步提交替代

另一种【异步方式提交】ajax提交和form提交相反，页面不会刷新

<form> 标签用于创建供用户输入的 HTML 表单。

<form> 元素包含一个或多个如下的表单元素：

1.5.1 结合<input type=submit value="登录">

    <form>
        <div>
            <input type=text placeholder="请输入用户名">
        </div>
        <div>
            <input type=text placeholder="请输入密码">
        </div>
        <div>
            <input type=submit value="登录">
        </div>
    </form>

button与submit的区别：submit会对后端进行提交，前端好像页面刷新了一样

1.5.2 结合<input type=button value="登录" onclick="alert(111)">

使用 onclick="alert(111)" 即弹出弹窗，显示：111

    <form>
        <div>
            <input type=text placeholder="请输入用户名">
        </div>
        <div>
            <input type=text placeholder="请输入密码">
        </div>
        <div>
            <input type=button value="登录" onclick="alert(111)">
        </div>
    </form>

1.5.3 单选 type = radio

<span>男</span><input type="radio" name="sex">

<span>女</span><input type="radio" name="sex">

    <form>
        <div>
            <span>男</span><input type="radio" name="sex">
            <span>女</span><input type="radio" name="sex">
        </div>
    </form>

1.5.4 多选 type = checkbox

<span>足球</span><input type="checkbox">

<span>篮球</span><input type="checkbox">

    <form>
        <div>
            <span>足球</span><input type="checkbox">
            <span>篮球</span><input type="checkbox">
        </div>
    </form>

1.5.5 其他

</span><input type="file" name="合同"> 上传文件

</span><input type="reset" name="重置"> 重置按钮   重置必须和form表单连用才起作用

    <form>
        <div>
            </span><input type="file" name="合同">
            </span><input type="reset" name="重置">
        </div>
    </form>

1.6 form表单结合submit与后台交互

    <form method="get" action="/login">
        <div>
            <input type="text" name="username" value="dashixiong">
        </div>
        <div>
            <input type="password" name="passwd" value="dashixiong">
        </div>
        <div>
            <input type="submit" name="submit-登录">
        </div>

    </form>

1.7 label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<div>
    <!--<span>用户名</span><input type="text">-->
    <label for="user">用户名</label><input type="text" id="user">  用label for 映射到id
</div>

1.8 select标签下拉标签

<select> 元素用来创建下拉列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

select下拉标签

<div>
    <form>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
    </form>
</div>

【枚举值】
value="volvo"、

value="saab"

value="mercedes"

value="audi"

<div>
    <form>
        <select>
            <option selected="selected" value="1">乒乓球</option>
            <option value="2">足球</option>
            <option value="3">篮球</option>
            <option value="4">排球</option>
        </select>
    </form>
</div>

selected="selected" 默认选中项

1.9 a标签

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

<a href="http://www.baidu.com">访问百度页面!</a>

1.10 textarea标签

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

要与后台交互，都有name属性

    <form>
        <textarea name="remark">
            多行标签
        </textarea>

    </form>

二、CSS样式

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
        background-color: red;
        height: 100px;
        width: 100px;
        }
    </style>
</head>
<body>
    <div id="i1">背景色</div>

</body>
</html>

2.1 html引入CSS样式 id

1、创建demo.css文件

#i1{
    background-color: red;
    height: 50px;
    width: 100px;
}
#i2{
    background-color: blue;
    height: 50px;
    width: 150px;
}

2、在html里引入css文件，通过link引入到html中

在<style></style>标签下加上

<link rel="stylesheet" href="demo.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        #i2{
        background-color: blueviolet;
        height: 100px;
        width: 100px;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="i1" style="background-color: red;height: 50px;width: 100px">背景色</div>
    <div id="i2">引入html内CSS样式</div>
    <div id="i3">引入CSS文件样式</div>

</body>
</html>

优先顺序：1、标签内css样式 > 2、style后面css样式 > 3、css文件

注意：

1、在html中，不能出现重复引用css样式的情况，这样不符合规范

2、ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2.2 class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .c1{
        background-color: green;
        width: 100px;
        height: 50px
    }
        .wh{
            width: 150px;
            height: 30px;
        }
        .bc-1{
            background-color: red;
        }
        .bc-2{
            background-color: blue;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div id="i3">id引入css样式</div>
    <div class="c1">class选择器</div>
    <div class="c1">class选择器</div>
    <div class="wh bc-1">宽高+颜色样式1</div>
    <div class="wh bc-2">宽高+颜色样式2</div>
</body>
</html>

不同颜色、相同宽高的正方形 class属性允许有多个，通过空格分隔即可

2.3 所有标签选择器div

所有的div标签都显示该样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: green;
        }
        .wh{
            width: 150px;
            height: 30px;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wh">div选择器</div>
</body>
</html>

2.4 层级选择器

div里span是红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        div{
            background-color: green;
        }
        div span{
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="wh">
        <span>div里span标签是红色</span>
    </div>
</body>
</html>

2.5 display属性

1、display: inline 由块级标签，变成行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        div{
            background-color: green;
        }
        .cl-1{
            width: 100px;
            height: 30px;
        }
        .dis{
            display: inline;
        }
    </style>
</head>
<body>
    <div class="dis">块div，变成行内标签</div>
</body>
</html>

2、display-block 由行内标签转块类标签行内标签必须有内容，无法应用宽、高、外边距、内边距3、display-block-inline 即是块标签，也是行内标签这样可以应用宽、高、内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .wh{
            width: 150px;
            height: 30px;
        }
        .cl-1{
            background-color: green;
        }
        .dis-block-inline{
            display: inline-block;
        }
    </style>
</head>
<body>
        <span class="dis-block-inline cl-1">行内标签转块类标签</span>
</body>
</html>

2.6 外边距、内边距

1、margin-top: 0 外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .wh{
            width: 150px;
            height: 30px;
        }
        .cl-1{
            background-color: green;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: green;
            width: 100%;
            height: 30px;
            margin-top: 0;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">border属性、margin-top属性</div>
</div>
</body>
</html>

2、内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摩羯座</title>
    <style>
        .wh{
            width: 150px;
            height: 30px;
        }
        .cl-1{
            background-color: green;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: green;
            width: 100%;
            height: 30px;
            /*margin-top: 0;*/
            padding-top: 0;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2">border属性、margin-top属性</div>
</div>
</body>
</html>

巴特西

HTML基础一-html、CSS

一、HTML标签

什么是标签:

1.1 基本标签

1.2 特殊字符

1.3 div标签和span标签（最常用的），没有语义的标签

1.4 input标签

1.5 form 表单标签

1.6 form表单结合submit与后台交互

1.7 label标签

1.8 select标签下拉标签

1.9 a标签

1.10 textarea标签

二、CSS样式

2.1 html引入CSS样式 id

2.2 class选择器

2.3 所有标签选择器div

2.4 层级选择器

2.5 display属性

2.6 外边距、内边距

最新文章

热门文章

巴特西

HTML基础一-html、CSS

一、HTML标签

什么是标签:

1.1 基本标签

1.2 特殊字符

1.3 div标签和span标签（最常用的），没有语义的标签

1.4 input标签

1.5 form 表单标签

1.6 form表单结合submit与后台交互

1.7 label标签

1.8 select标签 下拉标签

1.9 a标签

1.10 textarea标签

二、CSS样式

2.1 html引入CSS样式 id

2.2 class选择器

2.3 所有标签选择器div

2.4 层级选择器

2.5 display属性

2.6 外边距、内边距

最新文章

热门文章

1.8 select标签下拉标签