Html5基础知识笔记

最新推荐文章于 2022-06-26 16:26:24 发布

plaaaa2

最新推荐文章于 2022-06-26 16:26:24 发布

阅读量185

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_51957543/article/details/120523563

版权

学习笔记，供个人快速查阅使用！！
公开分享，不喜勿喷！

Html5基础介绍

h1标签
```
<h1>Hello World</h1>
```
p标签

如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。
```
<p>我是一个p标签</p>
```

css修饰

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Html和CSS的关系</title>
        <style type="text/css">
        p{
    font-size:12px;
    color:#930;
    text-align:center;
        }
        </style>
    </head>
    <body>
        <p>whefoaw</p>
    </body>
</html>

HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
标签由英文尖括号<和>括起来，如<html>就是一个标签。html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：<div>里嵌套<p>，那么</p>必须放在</div>的前面。
html5文档结构

1.<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前

2.<html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。

3.<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。

4.<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。
head标签

下面这些标签可用在 head 部分：

1、head标签为双标签，有尾标签，<head></head>。

2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。

3、<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

4、<meta charset="UTF-8">设置当前文件字符编码

5、style标签：双标签中设置当前文件样式
注释
```

```

HTML5标签介绍

<span>标签: 这个标签是没有语义的，它的作用就是为了设置单独的样式用的。
```
<span>文本</span>
```
标题标签: 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
```
<hx>标题文本</hx>
```
div标签: 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
```
<div>…</div>
```
header标签: 用来定义头部区域。
```
<header>我是头部标签</header>
```
footer标签: 用来定义底部区域。
```
<footer>我是底部标签</footer>
```
section标签: 定义一个区域。
```
<section>我是一个区域</section>
```
aside标签: 定义一个侧边栏区域。
```
<aside>我是侧边栏</ aside>
```
br标签: 作用相当于word文档中的回车。
```
<br />
```
 标签: 作用相当于word文档中的空格。
```
&nbsp;
```
hr标签: 添加一条水平线。
```
<hr />
```

HTML列表图片链接表格标签

ul,li标签: 创建无序列表。

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

ol,li标签: 创建有序列表。

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

img标签: 插入图片。

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

a标签: 超链接(点击跳转到指定网页)
```
<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>
```
a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
table标签: 创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>…</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
```
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学习表格标签</title>
</head>

<body>
    <table border="1">
        <caption>前端三剑客</caption>
        <tr>
            <th>知识点</th>
            <th>重要程度</th>
            <th>难度</th>
            <th>学习周期</th>
        </tr>
        <tr>
            <td>html</td>
            <td>5星</td>
            <td>3星</td>
            <td>7天</td>
        </tr>
        <tr>
            <td>css</td>
            <td>5星</td>
            <td>4星</td>
            <td>10天</td>
        </tr>
        <tr>
            <td>js</td>
            <td>5星</td>
            <td>5星</td>
            <td>20天</td>
        </tr>
    </table>
</body>

</html>
```
1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

3、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>使用thead、tbody、tfoot标签</title>
</head>

<body>
    <table border="1">
        <thead>
        <tr>
            <th>知识点</th>
            <th>重要程度</th>
            <th>难度</th>
            <th>学习周期</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>html</td>
            <td>5星</td>
            <td>3星</td>
            <td>7天</td>
        </tr>
        <tr>
            <td>css</td>
            <td>5星</td>
            <td>4星</td>
            <td>10天</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>js</td>
            <td>5星</td>
            <td>5星</td>
            <td>20天</td>
        </tr>
        </tfoot>
    </table>
</body>

</html>

form表单标签:

1.form ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ：数据传送的方式（get/post）。
```
<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
```
注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。
input标签:
1. 文本输入框、密码输入框
  
  1、type：
  当type="text"时，输入框为文本输入框;
  当type="password"时, 输入框为密码输入框
  2、name：为文本框命名，以备后台程序ASP 、PHP使用。
  3、value：为文本输入框设置默认值。(一般起到提示作用)
  
  举例：
```
<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
```
2. placeholder属性
  
  技术点的解释：
  
  1、placeholder属性为输入框占位符,里面可以放提示的输入信息。
  
  2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
  
  3、占位符内容不是输入框真正的内容。
```
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>input-placeholder</title>
</head>

<body>
    <input type="text" placeholder="请输入用户名">
    </br>
    <input type="password" placeholder="请输入密码">
</body>

</html>
```
3. 数字输入框:
  
  1、input的type属性设置为number,则表示该输入框的类型为数字。
  
  2、数字框只能输入数字，输入其他字符无效。
  
  3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。
4. 网址输入框:
  
  1、input的type属性设置为url,则表示该输入框的类型为网址。
  
  2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。
5. 邮箱输入框:
  
  1、Input的type属性设置为email,则表示该输入框的类型为邮箱。
  
  2、数字框的值必须包含@。
  
  3、数字框的值@之后必须有内容,否则会报错误提示。
textarea标签: 创建文本域

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。

`举例：
```
<form  method="post" action="save.php">
        <label>联系我们</label>
        <textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
```
点击label触发表单控件

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

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：
```
<form
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>
```
单选框和复选框
```
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
```
1、type:

当 type=“radio” 时，控件为单选框

当 type=“checkbox” 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked=“checked” 时，该选项被默认选中

下拉菜单

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

2、select标签里面只能放option标签，表示下拉列表的选项。

3、option标签放选项内容，不放置其他标签。

4、value：

<option value="向服务器提交的值">显示的值</option>

5、selected=“selected”：

设置selected="selected"属性，则该选项就被默认选中。

<body>
    <form>
        <select>
            <option value="看书">看书</option>
            <option value="旅游" >旅游</option>
            <option value="运动">运动</option>
            <option value="购物">购物</option>
        </select>
    </form>
</body>

提交/重置按钮
```
<input   type="submit"   value="提交">
```
type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字
```
<input type="reset" value="重置">
```
type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

CSS样式

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

**选择符：**又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

**声明：**在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
```
p{font-size:12px;color:red;}
```
注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
```
p{
   font-size:12px;
   color:red;
}
```
css注释:
```
/*注释语句*/
```
css分为:内联式、嵌入式和外部式
1. 内联式:
  
  内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
```
<p style="color:red">这里文字是红色。</p>
```
  注意要写在元素的开始标签里，下面这种写法是错误的：
```
<p>这里文字是红色。</p style="color:red">
```
  并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
```
<p style="color:red;font-size:12px">这里文字是红色。</p>
```
2. 嵌入式:
  
  嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
```
<style type="text/css">
span{
color:red;
}
</style>
```
  嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。
3. 外部式:
  
  外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
```
<link href="**base.css**" rel="stylesheet" type="text/css" />
```
  注意：
  
  1、css样式文件名称以有意义的英文字母命名，如 main.css。
  
  2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。
  
  3、<link>标签位置一般写在<head>标签之内。
内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。

其实总结来说，就是就近原则（离被设置元素越近优先级别越高）。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？在后面会讲解到。
每一条css样式声明（定义）由两部分组成，形式如下：
```
选择器{
    样式;
}
```
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。例如下面代码：
```
p{font-size:12px;line-height:1.6em;}
```
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
类选择器

语法：
```
.类选器名称{css样式代码;}
```
注意：

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合适的标签把要修饰的内容标记起来，如下：
```
<span>胆小如鼠</span>
```
第二步：使用class="类选择器名称"为标签设置一个类，如下：
```
<span class="stress">胆小如鼠</span>
```
第三步：设置类选器css样式，如下：
```
.stress{color:red;}/*类前面要加入一个英文圆点*/
```
id选择器

1、使用ID选择器，必须给标签添加上id属性，为标签设置id=“ID名称”，而不是class=“类名称”。

2、ID选择符的前面是井号**（#）号，而不是英文圆点（.）**。

3、id属性的值既为当前标签的id，尽量见名思意，语义化。
类选择器和id选择器的异同

相同点：可以应用于任何元素
不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

下面代码是正确的：
```
 <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
```
而下面代码是错误的：
```
 <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
```
2、**可以使用类选择器词列表方法为一个元素同时设置多个样式。**我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

下面的代码是正确的(完整代码见右侧代码编辑器)
```
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
```
上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

下面的代码是不正确的(完整代码见右侧代码编辑器)
```
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>
```
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
子选择器

大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
```
.food>li{border:1px solid red;}
```
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
后代选择器

包含选择器，即加入空格,用于选择指定标签元素下的**后辈元素。**如右侧代码编辑器中的代码：
```
.first  span{color:red;}
```
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
```
* {color:red;}
```
伪类选择器

伪类选择器允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
```
a:hover{color:red;}
```
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使文字内容中的文字加入鼠标滑过字体颜色变为红色特效。

关于伪选择符：

关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
分组选择器

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
```
h1,span{color:red;}
```
它相当于下面两行代码：
```
h1{color:red;}
span{color:red;}
```
样式的继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
```
p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
```
可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
```
p{border:1px solid red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
```
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。
选择器的优先级

1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。

2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

内联样式 : 写在内部的样式
```
    <div style="color:orange;">
        我是一个div
    </div>
```
css权值计算

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？下面我们一起来看一下代码：
```
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
```
p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

**标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。**例如下面的代码：
```
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
```
注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
最高级
```
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
```
这时 p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

CSS字体样式

font-family设置字体
```
body{font-family:"宋体";}
```
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：
```
body{font-family:"Microsoft Yahei";}
```
或
```
body{font-family:"微软雅黑";}
```
注意：第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。
font-size设置字体大小
```
body{font-size:12px;}
```
font-weight设置字体粗细
```
p span{font-weight:bold;}
```
font-style设置斜体

1、font-style可以设置字体样式，并且有种3设置方式。

2、正常字体为normal,也是font-style的默认值。

3、italic为设置字体为斜体，用于字体本身就有倾斜的样式。

4、oblique为设置倾斜的字体，强制将字体倾斜。
font-color设置字体颜色

1、color属性可以设置字体颜色。

2、color的值有3种设置方式：
- 英文命令颜色
```
p{color:red;}
```
- RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
```
p{color:rgb(133,45,200);}
```
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
```
p{color:rgb(20%,33%,25%);}
```
- 十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
```
p{color:#00ffff;}
```
css字体设置简写

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
```
body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
```
这么多行的代码其实可以缩写为一句：
```
body{
    font:italic  bold  12px/1.5em  "宋体",sans-serif;
}
```
注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
```
body{
    font:12px/1.5em  "宋体",sans-serif;
}
```
只是有字号、行间距、中文字体、英文字体设置。

css文本设置

对文本装饰

1、text-decoration可以设置添加到文本的修饰。

2、text-decoration默认值为none, 定义标准的文本。

3、text-decoration的值为underline为定义文本下的一条线。

4、text-decoration的值为overline为定义文本上的一条线。

5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
text-indent首行缩进
```
p{text-indent:2em;}
```
line-height设置行间距
```
p{line-height:1.5em;}
```

text-align设置位置

居中
```
text-align:center;
```
居左
```
text-align:left;
```
局右
```
text-align:right;
```

长度值

目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
```
p{font-size:12px;text-indent:2em;}
```
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:
```
<p>以这个<span>例子</span>为例。</p>
```
css:
```
p{font-size:14px}
span{font-size:0.8em;}
```
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比
```
p{font-size:12px;line-height:130%}
```
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

HTML盒模型

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：
```
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
```
常用的内联元素有：
```
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
```
常用的内联块状元素：
```
<img>、<input>
```
块级元素

在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
```
a{display:block;}
```
块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
```
 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>
```
内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

注意:内联元素之间有一个间距
块级内联元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。
none元素

none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。
```
display:none;
```
盒子模型宽高:

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
背景色

网页中的标签不论是行内元素还是块状元素都可以给它设置一个背景色。

为标签设置背景颜色可以使background-color:颜色值来实现。
```
div{background-color:red;}//为块状元素设置
a{background-color:green;}//为行内元素设置
```
border框线

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
```
div{
    border:2px  solid  red;
}
```
上面是 border 代码的缩写形式，可以分开写：
```
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
```
注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
```
border-color:#888;//前面的井号不要忘掉。
```
3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用像素（px）。

另外：

css 样式中允许只为一个方向的边框设置样式：
```
div{border-bottom:1px solid red;}
```
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
```
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;
```

border圆角

元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。如下代码：

 div{border-radius: 20px 10px 15px 30px;}

也可以分开写：

div{
    border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}

如果四个圆角都为10px;可以这么写：

div{ border-radius:10px;}

如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：

div{ border-radius:10px 20px;}

需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

也可以写为百分比50%

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

padding内边距

元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。如下代码：
```
div{padding:20px 10px 15px 30px;}
```
顺序一定不要搞混。可以分开写上面代码：
```
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}
```
如果上、右、下、左的填充都为10px;可以这么写
```
div{padding:10px;}
```
如果上下填充一样为10px，左右一样为20px，可以这么写：
```
div{padding:10px 20px;}
```
margin外边距

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
```
div{margin:20px 10px 15px 30px;}
```
也可以分开写：
```
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}
```
如果上右下左的边界都为10px;可以这么写：
```
div{ margin:10px;}
```
如果上下边界一样为10px，左右一样为20px，可以这么写：
```
div{ margin:10px 20px;}
```
总结一下：padding和margin的区别，padding在边框里，margin在边框外。

CSS3布局模型

CSS3包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：
- 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如三个块状元素标签(div，h1，p)宽度显示为100%。
- 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）标签a、span、em、strong都是内联元素。
浮动模型

如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
```
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>
```
当然你也可以同时设置两个元素右浮动也可以实现一行显示。
```
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}
```
设置两个元素一左一右可以实现一行显示吗？当然可以：
```
div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
```
层布局模型

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：
1. 绝对定位(position: absolute)
  
  如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
  
  如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
```
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>
```
2. 相对定位(position: relative)
  
  如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于**以前的位置移动，**移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
  
  如下代码实现相对于以前位置向下移动50px，向右移动100px;
```
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>
```
  什么叫做“偏移前的位置保留不动”呢？
  
  大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：
```
<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
```
  虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
3. 固定定位(position: fixed)
  
  fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
```
#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
```
Relative与Absolute组合使用

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：
```
<div id="box1">
    <div id="box2">相对参照元素进行定位</div>
</div>
```
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;
```
#box1{
    width:200px;
    height:200px;
    position:relative;        
}
```
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
```
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}
```
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

flex弹性布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style type="text/css">
    .box {
        background: blue;
        display: flex;
    }

    .box div {
        width: 200px;
        height: 200px;
    }

    .box1 {
        background: red;
    }

    .box2 {
        background: orange;
    }

    .box3 {
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

上面的代码：

三个块元素设置大小以及背景色，在父容器中添加flex。

技术点的解释：

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

justify-content属性设置横轴排列方式

flex-start：交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

flex-end：右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

center：居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

space-between：两端对齐，项目之间的间隔都相等。

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

align-items属性设置纵轴排列方式

flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

center：交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

    .box div {
        /*不设置高度，元素在垂直方向上铺满父容器*/
        width: 200px;
    }

设置flex占比

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex占比</title>
    <style type="text/css">
    .box {
        height: 300px;
        background: blue;
        display: flex;
    }

    .box div {
        width: 200px;
        height: 200px;
    }

    .box1 {
        flex: 2;
        background: red;
    }

    .box2 {
        flex: 2;
        background: orange;
    }

    .box3 {
        flex: 2;
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">flex:1</div>
        <div class="box2">flex:3</div>
        <div class="box3">flex:2</div>
    </div>
</body>

</html>

技术点的解释：

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

其他

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。我们先来了解一下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

要实现子元素相对于父元素垂直水平居中,我们需要 :

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。

要实现未知宽高子元素相对于父元素垂直水平居中,我们需要 :

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

plaaaa2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html5基础知识笔记

Html5基础介绍h1标签<h1>Hello World</h1>p标签如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。<p>我是一个p标签</p>css修饰<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>H
复制链接

扫一扫