前端之html和css（2）_html h1-6自带上下边距吗-CSDN博客

<h1>内容<br>标题1</h1>
<h2>内容标题2</h2>
<h3>内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容标题6</h6>
<hr>
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
<hr>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

效果展示如下：

2，列表标签

无序列表: ul 和 li 组合

<ul>
    <li>hello world</li>
    <li>hello world</li>
</ul>

有序列表: ol 和 li 组合

<ol>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
</ol>

列表嵌套: 有序和无序可以任意无限嵌套

<ol>
    <li>
        A
        <ul>
            <li>hello world</li>
            <li>hello world</li>
        </ul>
    </li>
    <li>
        B
        <ul>
            <li>hello world</li>
            <li>hello world</li>
        </ul>
    </li>
</ol>

效果展示如下：

3，图片标签

src表示资源路径

相对路径:访问站内资源使用

和页面同级目录: 直接写图片名

在页面的上级目录: ../图片名

在页面的下级目录: 文件夹名/图片名

绝对路径:访问站外资源使用, 称为图片盗链,有找不到图片的风险

alt: 当图片不能正常显示时显示的文本

title:图片标题当鼠标悬停时显示的文本

width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:1.像素 2.百分比

<img src="a.jpg">//和页面同级目录
<img src="../bb.jpg" title="图片b" width="50%" alt="404辣">//页面上级目录
<img src="pic/c.jpg" width="300" height="300">//页面下级目录

4，超链接

a 标签包裹文本为文本超链接 , 包裹图片为图片超链接

页面内部跳转, 在目的地元素里面添加id 属性, 然后在超链接的href 属性中写#id 这样点击时就可以跳转到目的地元素的位置

<a id="top" href="hello.html">超链接1</a> //点击后跳转到hello.html
<a href="http://www.baidu.com">超链接2</a> //点击后跳转到百度
<a href="a.jpg">超链接3</a> //点击显示图片a.jpg
<a href="http://www.baidu.cn"><img src="a.jpg" alt=""></a> //点击图片a.jpg后跳转到百度
<a href="#top">返回顶部</a>//点击后跳转到超链接1所在位置

5，表格标签 table

相关标签: table 表格 tr 表示行 td 表示列 th 表头 caption 表格标题

<table border="1">
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>1</td>
        <td>冰工厂</td>
        <td>2元</td>
    </tr>
    <tr>
        <td>2</td>
        <td>巧乐兹</td>
        <td>4元</td>
    </tr>
</table>

效果展示如下：

相关属性:border 边框 colspan 跨列 rowspan 跨行

<table border="1">
    <tr>
        <td colspan="2" align="center">1-1</td>    <!-- td即table data 表格数据 表示列-->
<!--        <td>1-2</td>-->
        <td rowspan="2">1-3</td>  //rowspan=2表示跨2行，即1-3和2-3合并
        <td rowspan="3">1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
<!--        <td>2-3</td>-->
<!--        <td>2-4</td>-->
    </tr>
    <tr>
        <td colspan="3" align="center">3-1</td> //colspan=3表示跨3列
<!--        <td>3-2</td>-->
<!--        <td>3-3</td>-->
<!--        <td>3-4</td>-->
    </tr>
<!--    <tr>-->
<!--        <td>4-1</td>-->
<!--        <td>4-2</td>-->
<!--        <td>4-3</td>-->
<!--        <td>4-4</td>-->
<!--    </tr>-->
</table>

6，表单 form

用于获取用户输入的内容并提交给服务器。表单中的控件包括文本框，密码框，单选，多选，下拉选，日期，文件等。代码实现如下：

<form action="http://www.baidu.com">
<!--  type="text"表示文本框， readonly表示只读            -->
    用户名：<input type="text" name="username"
               placeholder="请输入用户名"
               maxlength="6" value="tom" readonly
           ><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="m" id="r1"><label for="r1">男</label>
    <input type="radio" name="gender" value="w" checked id="r2"><label for="r2">女</label><br>
    兴趣爱好：<input type="checkbox" name="hobby" checked value="sing">唱
    <input type="checkbox" name="hobby" value="dance">跳<br>
    生日：<input type="date" name="birthday"><br>
    文件：<input type="file" name="pic"><br>

    所在地：
    <select name="city">
        <option value="bj">北京</option>
        <option>上海</option>
        <option selected>广州</option>
    </select><br>
    <input type="submit" value="注册">
    <input type="reset">
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">注册</button>
    <button type="reset">重置</button>
    <button type="button">自定义按钮</button>
</form>

效果展示如下：

7，分区标签

作用: 可以理解为一个容器, 对多个有相关性的标签进行统一管理

常见的分区标签包括：div和span，其中div的特点是独占一行，span的特点是共占一行

HTML5 标准中新增的专门用于做页面布局的分区标签作用和div 一样都是独占一行的：

 header 头  main 主体  footer 脚  section 区域  nav 导航

二，css层叠样式表

css是Cascading Style Seet的简称用于美化页面

1，css样式代码的三种引入方式：

内联: 在标签的 style属性中添加样式代码, 弊端：不能复用

内部: 在head标签里面添加style 标签，在标签体内通过选择器找到需要添加样式的元素，然后再添加样式代码，这种用法可以复用，但是只能当前页面复用，不能多页面复用

外部: 在单独的css样式文件中写样式代码，在 HTML页面中通过 link 标签引入，可以实现多页面复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <style>
        h2{
            color: cadetblue;
        }
    </style>
    <link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: darkcyan">内联样式1</h1>
<h1 style="color: aquamarine">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>

2，选择器

作用: 用来查找元素的, 找到之后才能添加样式

2.1，标签名选择器: 通过标签的名称选择页面中所有同名元素

格式：标签名{样式代码}，例如：

  p{background-color: darkcyan} //将p标签的颜色设置为darkcyan

2.2，id 选择器: 通过页面中元素的 id 选择元素, 元素的 id 是唯一标识不能重复

格式: #id{样式代码}

 #p{background-color: darkcyan} //将id为p的标签颜色设置为darkcyan

2.3，类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的 class 属性值,然后通过类选择器进行选择

格式: .class{样式代码}

  .p{background-color: darkcyan} //将class为p的标签颜色设置为darkcyan

2.4，分组选择器: 将多个选择器合并成一个选择器

格式: div,#id,.class{样式代码}

 div .p{background-color: darkcyan} //将div中class为p的标签颜色设置为darkcyan

2.5，属性选择器: 通过元素的属性选择元素

格式: 标签名[属性名='值']{样式代码}

 input[type='text']{background-color:red} //将type='text'的input标签背景颜色设置为red

2.6，任意元素选择器: 选取页面中所有标签

格式: *{样式代码}

 *{background-color: darkcyan} //将页面所有标签的背景颜色设置为darkcyan

2.7，子孙后代选择器: 通过元素和元素之间的关系匹配元素

格式: body div div p{样式代码} 匹配 body 里面的 div 里面的 div 里面的所有 p(包括后代)

//匹配 body 里面的 div 里面的 div 里面的所有 p(包括后代)
body div div p{background-color: darkcyan}

2.8，子元素选择器:通过元素和元素之间的关系匹配元素

格式: body>div>div>p{样式代码}匹配 body 里面的 div 里面的 div 里面的 p 子元素(不包括后代)

//匹配 body 里面的 div 里面的 div 里面的所有 p(不包括后代)
body>div>div>p{background-color: darkcyan}

2.9，伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态

格式: a:link/visited/hover/active{样式代码}

3，颜色赋值

三原色 RGB RedGreenBlue , 每种颜色的取值范围 0-255

五种赋值方式:

颜色单词赋值: red/green/blue/yellow/pink等

6 位 16 进制: #ff 00 00

3 位 16 进制: #f00

3 位 10 进制: rgb(255,0,0)

4 位 10 进制: rgba(255,0,0,0-1) a=alpha 透明度值越小越透明

4，背景图片

background-image:url("路径") //设置背景图片
background-size:100px 200px; //设置背景图片尺寸
background-repeat: no-repeat; //禁止重复
background-position:200px 100px; //设置背景图片位置
background-position:50% 100%; //设置背景图片位置

5，文本和字体相关样式

text-align:left/right/center; 水平对齐方式

text-decoration:overline/underline/line-through/none; 文本修饰

line-height:20px; 设置行高

text-shadow:颜色 x 偏移值 y 偏移值模糊度; 设置阴影

font-size:20px; 字体大小

font-weight:bold 加粗/normal 去掉加粗;

font-style:italic; 斜体

font-family:xxx,xxx,xxx; 设置字体

font: 20px xxx,xxx,xxx; 字体大小+字体设置

6，元素的显示方式 display

block: 块级元素的默认值, 特点: 独占一行,可以修改宽高,包括: h1-h6,p, div

inline: 行内元素的默认值, 特点: 共占一行,不能修改宽高, 包括: span,b 加粗,i 斜体,u 下划线,s 删除线,a 超链接等

inline-block:行内块元素的默认值, 特点:共占一行,并且可以修改宽高, 包括:input,img

none: 隐藏元素

行内元素不能修宽高,如必须要修改则需要设置为 block 块级元素或 inline-block 行内块元素

7，盒子模型

盒子模型= content 内容+margin 外边距+padding 内边距+border 边框，用于控制元素的显示效果，其中：

content 内容: 控制元素的显示大小

margin 外边距: 控制元素的显示位置

padding 内边距: 控制元素内容的位置

border 边框: 控制元素的边框效果盒子模型之 Content 内容

7.1，盒子模型之 Content 内容

通过 width 和 height 设置元素的内容大小有两种赋值方式：

1，像素

2，上级元素的百分比

行内元素不能修改宽高,如必须要修改则需要设置为 block 块级元素或 inline-block 行内块元素

7.1，盒子模型之 Margin 外边距

Margin 外边距用于控制元素的显示位置

Margin的赋值方式有：

 margin-left/right/top/bottom:10px; 单独某一个方向赋值

 margin:20px; 四个方向赋值

 margin:10px 20px; 上下和左右赋值

 margin:10px 20px 30px 40px; 上右下左顺时针赋值

关于外边距：

1，行内元素上下外边距无效

2，上下相邻彼此添加外边距取最大值，

3，左右相邻，两者相加

4，粘连问题：当元素的上边缘和上级元素的上边缘重叠时，给元素添加上外边距会出现粘连问题,给上级元素添加 overflow:hidden 解决

5，部分标签自带外边距，比如: h1-h6 内容标题，p 段落标签，列表标签,body