html5+Css总结(附带案例)

2023-10-03 17:46:40

HtmL5 和CSS一些常见总结

前端(通常指的是用户能够看到)网页通常是由三部分组成：

1.html:也是前端网页基本框架结构，类似于骨架一样的作用

2.CSS: 也叫层叠样式表，就是为美化界面而存在

3.Javascript: 使页面具有动态的效果(包括与用户的一个交互)

一&二.Html

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。

所谓超文本Hypertext，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。

所谓标记Markup ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如<head>,<body>等。

HTML发展简史【了解】
- HTML 1.0在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日，W3C推荐标准
- HTML 4.0——1997年12月18日，W3C推荐标准
- HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
- HTML5 —— 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML5的支持。

1.1.2 HTML的组成

HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。

1）标签

一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。例如：

<h1>今天是个好日子</h1>

在HTML中，<h1>标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。

2）属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name=‘value’。例如：

<h1 align="center">今天是个好日子!!!</h1>

在HTML标签中，align 属性表示水平对齐方式，我们可以赋值为 center 表示居中。

属性也可当做是html原始一种修饰界面的方式之一

1.2Html界面构造

<!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明。
<html>：这个标签包裹了整个完整的页面，是一个根元素（*元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。
<head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。关于<head> 元素的内容。目前主要了解两个标签：
1. <meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字,避免页面乱码问题。
2. <title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
<body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。body也是代码主体部分，也是希望显示的界面内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个HTML页面</title>
</head>
<body>
</body>
</html>

整个html界面包含head和body两部分组成,学习html时主要学习的东西便是body中一些标签的使用，以及标签中附带的一些属性。

1.3 一些常见标签

标签的构成：

<标签名属性名=属性值>文本内容</标签名>

P标签：段落标签,其前后都会被空出
:注释标签
b标签: 强调标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个HTML页面</title>
</head>
<body>
    <p>这是一个段落标签！</p>
    <p>这是第二段标签</p>
    <br> <!--注释部分，br表示换行标签-->
    这是其他内容
</body>
</html>

1.3.1 文本标签

使用文本内容标签设置文字基本样式。

标签名	作用
p	表示文本的一个段落
h	表示文档标题，`<h1>–<h6>` ，呈现了六个不同的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低
hr	表示段落级元素之间的主题转换，一般显示为水平线
li	表示列表里的条目。
ul	表示一个无序列表，可含多个元素，无编号显示。
ol	表示一个有序列表，通常渲染为有带编号的列表
em	表示文本着重，一般用斜体显示
strong	表示文本重要，一般用粗体显示
font	表示字体，可以设置样式（已过时）
i	表示斜体
b	表示加粗文本

1.3.2标签嵌套：

<p><b>这是第三段，也是强调内容！</b></p>

顾名思义就是在一个标签中去镶嵌另一个标签，这种在html中用得也是蛮多的

1.4两种重要标签:块级和行内

块级元素：

前后独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如<p> ，<hr>，<li> ，<div>等。

<li>这是一个标签</li>
<li>这还是一个块级标签</li>
<li>这也是一个块级标签</li>

效果

行内元素

不用换行,行内元素通常会出现在块级元素中，进行一些文本的显示。

<span>这是一个行内</span>
<span>这是第二个行内元素！</span>

两个常用的块级和行内标签:

块级: div标签，一种通用容器标签，通常用于文本中的一些个性的一些设置

行内:span标签,是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。

div和span标签在布局中有着举足轻重的作用

1.5 标签属性

属性是html中一大重要的组成，强调属性的格式和作用

**概述:**标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。

属性名：同一个标签中，属性名不得重复。
大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
引号：双引号是最常用的，不过使用单引号也没有问题。
常用属性：

属性名	作用
class	定义元素类名，用来选择和访问特定的元素
id	定义元素唯一标识符，在整个文档中必须是唯一的
name	定义元素名称，可以用于提交服务器的表单字段
value	定义在元素内显示的默认值
style	定义CSS样式，这些样式会覆盖之前设置的样式

1.6新闻案例分析

实现效果：

基本布局分析：

1.6.2 实现方法

div样式布局

文本由几部分构成，我们可以使用div将页面分割布局。先来了解一下，使用div如何进行简单的布局。

在head标签中，通过style标签加入样式。

基本格式：

格式:
<style>
    标签名{
        属性名:属性值;
    }
</style>

多个属性名格式：

<style>
    标签名{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>

div的多样式：

一个属性名可以含有多个值，同时设置多样式。

格式:

<style>
    标签名{
        属性名:属性值1 属性值2 属性值3; 
    }
</style>

tips:

为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面,也就是通常会把显示的基本骨架描绘出来，再慢慢去增添内容。

1.先把基本布局框调出

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻案列</title>
  <style>
    li{
      display: inline;        //内联样式无宽高
      display: inline-block; //内联样式，有宽高
    }
    div{
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div>left</div>
  <div>center</div>
  <div>right</div>
</body>
</html>

发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？

使用class(类)的值，格式：

.class值{
    属性名:属性值;
}

<标签名 class="class值">  
 提示: class是自定义的值

所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。

2.浮动布局和清除

主体部分分为三部分，但每个div又独占一行，想要使用div布局，就还需要加入浮动属性

定义

float: 指定一个元素可沿其左侧或右侧放置，使用了该属性的元素(通常放在左侧或右侧),允许文本环绕该属性流动，且该元素移除，其他部分元素依然正常使用。

当超出返回时，其浮动在其周围的块级元素会进行自动换行操作。在设计整体框架浮动时，需要把边框线所占的比例也考虑进行才能成功浮动。

.left{
    font-family: 楷体;
    font-size: 20px;
    width: 20%;
    float: left;
    height: 600px;
}
.center{
    font-family: 楷体;
    font-size: 20px;
    width: 60%;
    float: left;
    height: 600px;
}
.right{
    font-family: 楷体;
    font-size: 20px;
    width: 19%;
    float: left;
    height: 600px;
}

注意style中进行注释时需要前后进行双向闭合

li{
display: inline;        /*内联样式无宽高*/
display: inline-block; /*内联样式，有宽高*/
}

1.7.3 图片标签&&超链接标签

使用图片标签时路径尽量选用相对路径，避免造成不显示问题

标签名	作用	备注
img	可以显示一张图片(本地或网络)	src属性，这是一个必需的属性，表示图片的地址。

其他属性：

属性名	作用	备注
title	鼠标悬停（hover）时显示文本。
alt	图形不显示时的替换文本。
height	图像的高度。
width	图像的宽度。

标签名	作用	备注
a	表示超链接。	href属性，表示超链接指向的URL地址。

属性名	作用
target	页面的打开方式(_self当前页 _blank新标签页)。

去掉下划线

根据某些样式的布局需求，去除下划线更为美观。

a { 
    text-decoration:none;  // none 表示不显示
}

<a href="demo01.html">跳转</a>

a:hover{ /*鼠标悬浮时的样式控制*/
        color: red;
    }

<a href="demo01.html" target="_blank">跳转
    <img src="../Code_images/ad1.jpg" alt="图片找不到了" title="可点击">
</a>

使用图片img标签的src属性时，尽量采用相对路径，避免无法显示问题。还有就是使用时反斜线的朝向(向右)!

hr下滑线标签属于块级div内部的一个标签

具体实现

1.8 顶部实现

1.8.1 使用标签

使用div标签，设置布局，背景和浮动等。
基本文本标签
图片标签
超链接标签

1.8.2 实现步骤

创建初始页面，拷贝图片等素材。
整体布局。
实现顶部条（图片）。
实现导航条（图片）。
实现左侧分享区域（图片）。
实现中间正文区域（文本+图片）。
实现右侧广告区域（图片）。
实现底部页脚（链接）。

1.8.3 实现顶部条

HTML代码

<div class="top_bar">
    <img src="../img/j1.png">
</div>

样式代码

     img{
            width: 100%;
     }

效果如下：

1.8.4 实现导航条

HTML代码

<div class="nav_bar">
    <img src="../img/j2.png" width="100%">
</div>
<!-- 加入分割线  -->
<hr size="1"/>

样式代码

      hr {
            color: lightgrey;
            size: 1px;
        }

效果如下：

1.8.5 实现左部分享

HTML代码

<div class="left">
    <img src="../img/j3.png" />
</div>

效果如下

其余部分便是也类似

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻案列</title>
  <style>

  /*  div{
      border: 1px solid blue;
    }*/
    /*左侧分享*/
    .left{
        font-family: 楷体;
        font-size: 20px;
        width: 20%;
        float: left;
        height: 600px;
    }
    /*中间文本*/
    .center{
        font-family: 楷体;
        font-size: 20px;
        width: 60%;
        float: left;
        /*height: 600px;*/

    }
    /*右侧广告*/
    .right{
        font-family: 楷体;
        font-size: 20px;
        width: 19%;
        float: left;
        height: 600px;
    }

    .footer{
        font-family: 楷体;
        font-size: 20px;
        /*border: blue solid 5px;*/
        clear: both;/*清除浮动避免受之前元素影响*/
        text-align: center;
        background-color: cornflowerblue;
    }

    a{
        text-decoration: none;
        color: black;
    }

    a:hover{ /*鼠标悬浮时的样式控制*/
        color: red;
    }

    hr{
        color: black;
        size: 1px;
    }
  </style>
</head>
<body>
  <div class="top">
      <img src="../Code_images/j1.png" alt="图片未找到" width="100%">
  </div>
  <hr size="1">
  <div class="nvibar">
      <img src="../Code_images/j2.png" alt="图片未找到" width="100%" title="导航栏">
      <hr>
  </div>
  <div class="left">
      <img src="../Code_images/j3.png" alt="" title="左侧导航">
  </div>
  <div class="center">
      <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
      <hr>
      <div>
          <font color="gray" size="3">
                <em>作者 2019-11-11 11:11:11</em>
          </font>
      </div>
      <div>
          <ol>
              <li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
              <li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
              <li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
          </ol>
      </div>
      <p>
          <strong> 三、芝麻分600以上福利之国际驾照。</strong>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
      </p>
      <p>
          随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
      </p>
      <img src="../Code_images/1.jpg" width="80%" alt="芝麻信用">
  </div>
  <div class="right">
      <img src="../Code_images/ad1.jpg" alt="美女" width="75%">
      <img src="../Code_images/ad2.jpg" alt="" width="75%">
  </div>

  <div class="footer">
      <hr>
      <a href="demo01.html" target="_blank">跳转
          <a href="#">关于黑马&nbsp;</a>
          <a href="#">帮助中心&nbsp;</a>
          <a href="#">开放平台&nbsp;</a>
          <a href="#">诚聘英才&nbsp;</a>
          <a href="#">联系我们&nbsp;</a>
          <a href="#">法律声明&nbsp;</a>
          <a href="#">隐私政策&nbsp;</a>
          <a href="#">知识产权&nbsp;</a>
          <a href="#">廉正举报&nbsp;</a><!--#号表示原地跳转-->
      </a>
  </div>

</body>
</html>

hr下滑线标签属于块级div内部的一个标签

总结： 写一个前端页面，就像修房子一样。想把基本框架搭建出来，再在框架的基础上继续搭建，而网页基本框架就是布局区域。

二.表单及盒子模型

2.1 表单

之所以把表单单独列出来，是因为后续进行数据交互时经常使用表单相关的

form标签

属性名	作用	备注
action	处理此表单信息的Web服务器的URL地址
method	提交此表单信息到Web服务器的方式	可能的值有get和post，默认为get
autocomplete	自动补全之前input中写过的一些内容	HTML5

<form action="#" method="post" autocomplete="on">
    用户名：<input type="text" name="username">
    <button type="submit" >提交</button>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eccK4RDh-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\9.产生效果.png)]

2.2 表单元素入门

表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。

标签名	作用	备注
label	表单元素的说明，配合表单元素使用	for属性值为相关表单元素的id属性值
input	表单中输入控件，多种输入类型，用于接受来自用户数据	type属性值决定输入类型
button	页面中可点击的按钮，可以配合表单进行提交	type属性值决定按钮类型

1）简单的文本输入框

label标签：表单的说明。

input标签：输入控件。

type属性：表示输入类型，text值为普通文本框

text：普通文本
password：密码框
email: 以@结尾的邮箱框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FJlIIMI-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\10.邮箱效果.png)]
radio：单选框
checkbox：复选框

HTML5新增的type值

属性值	作用	备注
date	HTML5 用于输入日期的控件	年，月，日，不包括时间
time	HTML5 用于输入时间的控件	不含时区
datetime-local	HTML5 用于输入日期时间的控件	不包含时区
number	HTML5 用于输入浮点数的控件
range	HTML5 用于输入不精确值控件	max-规定最大值 min-规定最小值 step-规定步进值 value-规定默认值
search	HTML5 用于输入搜索字符串的单行文本字段	可以点击`x`清除内容
tel	HTML5 用于输入电话号码的控件
url	HTML5 用于编辑URL的字段	可以校验URL地址格式

id属性：表示标签唯一标识
name属性：表示标签名称
value属性：表示标签数据值
placeholder：默认提示信息
required: 加上此属性则需要必填

代码实现：

<label for="username">用户名：</label>
：<input type="text" name="username" id="username">
<button type="submit" >提交</button>

label在于说明元素，实际作用并不大，且要与后续input标签id对应才行。

HTML5新增属性

属性名	作用	备注
placeholder	提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。	仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。
required	这个属性指定用户在提交表单之前必须为该元素填充值	1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用
autocomplete	自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。	1. 开启为on，关闭为off 2. 可以设置指定的字段为off，关闭自动补全

2.3 更多表单元素

标签名	作用	备注
select	表单的控件，下拉选项菜单	与option配合实用
optgroup	option的分组标签	与option配合实用
option	select的子标签，表示一个选项
textarea	表示多行纯文本编辑控件	rows表示行高度， cols表示列宽度
fieldset	用来对表单中的控制元素进行分组(也包括 label 元素)
legend	用于表示它的fieldset内容的标题。	fieldset 的子元素

fieldset+legend效果

<fieldset>
    <legend>性别选择</legend>
<input type="radio" value="man" name="Sex">男
<input type="radio" value="woman" name="Sex">女
    <select name="choice" id="2">
        <option value="重庆">重庆</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
    </select>
<button type="submit" >提交</button>
</fieldset>

textarea效果，col(行)近似相当于宽,row(行)近似相当于高(列宽行高)

<div>
  <label for="Desc">个性宣言： </label>
  <textarea name="Desc_self" id="Desc" cols="30" rows="5" placeholder="写下你的个性签名"></textarea>
</div>

总结： html标签的整体总结就是得多用，用多了自然便也就熟了。

二.CSS

概述： CSS也称作层叠样式表，其作用便是对于html的一个美观，算是对html的一种美观。

1.CSS的基本构成

Css的基本构成:选择器+声明

选择器{
	属性名:属性值；
	属性名2:属性值2;
}

之前的html页面中已经进行了常规的使用，这里就不做过多赘述。

2. 使用方法

2.1 内联样式

标签中内部(不推荐)
在head中内联

2.2 外联样式

在外面单独定义一个”.css“的文件，再在head标签中通过link标签指定路径进行连接应用。

<head>
    <meta charset="UTF-8">
    <title>Css基本教学</title>
  <style>
    h3{
      background-color:orange;
    }
  </style>
  <link rel="stylesheet" href="Style.css">
</head>
<body>
    <h1 style="color: blue; font-family: 楷体; background-color: yellow; border: 1px solid black;">
      标签内联
    </h1>
    <textarea name="u2" id="u2" cols="20" rows="5">
      这是外联样式！
    </textarea>
    <h3>
      这是内联样式。
    </h3>
    </body>

2.3选择器(！！！)

作用概述： 选定html中指定元素进行修饰，而学习选择器的目的便是为了更好的选择想要修饰元素，然后告诉浏览器那些是自己选择的元素。

选择器的分类：

分类	名称	符号	作用	示例
基本选择器	元素选择器	标签名	基于标签名匹配元素	div{ }
用得较多	类选择器	`.`	基于class属性值匹配元素	.center{ }
	ID选择器	`#`	基于id属性值匹配元素	#username{ }
属性选择器	属性选择器	`[]`	基于某属性匹配元素	[type]{ }
伪类选择器	伪类选择器	`:`	用于向某些选择器添加特殊的效果,通常用于动态效果展示	a : hover{ }
组合选择器	后代选择器	`空格`	使用`空格符号`结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素	.top li{ }
	子级选择器	`>`	使用 `>` 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素	.top > li{ }
	同级选择器	`~`	使用 `~` 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素	.l1 ~ li{ }
	相邻选择器	`+`	使用 `+` 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素	.l1 + li{ }
	通用选择器	`*`	匹配文档中的所有内容	*{ }

1）元素选择器

页面元素：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

选择器：

选择所有li标签,背景变成蓝色
li{
    background-color: aqua;
}

2）类选择器

页面元素：

<div>
    <ul>
        <li class="ulist l1">List item 1</li>
        <li class="l2">List item 2</li>
        <li class="l3">List item 3</li>
    </ul>
    <ol>
        <!--class 为两个值-->
        <li class="olist l1">List item 1</li>
        <li class="olist l2">List item 2</li>
        <li class="olist l3">List item 3</li>
    </ol>
</div>

选择器：

选择class属性值为l2的,背景变成蓝色
.l2{
    background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
   color: wheat;
}

3）ID选择器

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器：

#tow{
    background-color: aqua;
}

效果如图：

4）通用选择器

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器：

所有标签 
*{
    background-color: aqua;
}

2.2.2 属性选择器

页面元素：

   <ul class="l1">
        <li  >List item 1</li>
        <li  >List item 2</li>
        <li  >List item 3</li>
    </ul>
    <ul class="l2">
        <li  id="four">List item 1</li>
        <li  id="five">List item 2</li>
        <li  id="six">List item 3</li>
    </ul>

    <p class="">
        p item
    </p>

选择器和效果图，示例1

[属性名]{ }

选择器和效果图，示例2

标签名[属性名]{ }

选择器和效果图，示例3

标签名[属性名='属性值']{ }

2.2.3 伪类选择器

伪类选择器指的是元素处于特定效果时，所要显示出效果。如:一些元素被鼠标悬停时所要显示的效果。

格式:

标签名:伪类名{}

伪类的顺序:

1.link

2.visited ：指的是当前已访问的界面。

3.hover

4.active:点开新界面后原始界面该元素的反应

一般按照这个顺序否则可能失效

HTML 代码：


CSS 代码 ： 
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {
    color: red;
}

2.2.4 组合选择器

页面元素：

<div>
    <ul class="l1">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <ul class="l2">
            <li id="four">List item 1</li>
            <li id="five">List item 2</li>
            <li id="six">List item 3</li>
        </ul>
    </ul>
</div>

1）后代选择器

选择器：

.l1 li{
    background-color: aqua;
}

2）子级选择器

选择器：

.l1 > li{
    background-color: aqua;
}

3）同级选择器

选择器：

.l1 ~ li{
    background-color: aqua;
}

4）相邻选择器

选择器：

.l1 + li{
    background-color: aqua;
}

2.4 总结

CSS的引入方式有三种，建议使用外部样式表。
注释类似于java多行注释。
选择器是CSS的重要部分：
1. 基本选择器：可以通过元素，类，id来选择元素。
2. 属性选择器：可以通过属性值选择元素
3. 伪类选择器：可以指定元素的某种状态，比如链接
4. 组合选择器：可以组合基本选择器，更加精细的划分如何选择

3.表格Table

由行和列组成的数据称之为表格。

实际进行设计时，当table标签镶嵌在块中时，宽度属性尽量调成100%，能够避免很多问题。

2）表格标签

标签名	作用	备注
table	表示表格，是数据单元的行和列的两维表	容器，默认无样式
tr	table row，表示表中单元的行
td	table data，表示表中一个单元格
th	table header，表格单元格的表头，通常字体样式加粗居中

通常tr与td搭配使用才能产出表格样式，不然不行

<table border="1px solid black;">
        <tr>
            <th rowspan="3">Group</th>
            <th>FirstName</th>
            <th>LastName</th>
        </tr>
        <tr>
            <td>Jack</td>
            <td>Joc</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>Chen</td>
        </tr>
    </table>

需要注意的便是关于跨行以及跨列的操作，即colspan和rowspan一般来说在设置th时采用。

4.盒子模型

盒子模型只针对块级元素起作用，像img这种非块级元素在使用盒子模型相关属性时需要转换为块级。

display:block
.top > img{
    display: block;
    margin: 0px auto;
    border: 1px solid red;
  }

盒子模型算是元素的一种布局方式，由内边距 +外边距+元素+边框组成

- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。

进行边距设置时，通常采用的方向为：上右下左

外边距

单独设置边框的外边距，设置上、右、下、左方向：

margin-top
margin-right
margin-bottom
margin-left

值含义：

一个值时

/*  所有 4 个外边距都是 10px */
margin:10px;

两个值时

/* 上外边距和下外边距是 10px
右外边距和左外边距是 5px */

margin:10px 5px;

margin:10px auto;
auto 浏览器自动计算外边距，具有居中效果。

三个值时

/* 上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px*/

margin:10px 5px 15px;

四个值时

/*上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px*/

margin:10px 5px 15px 20px;

内边距

与外边距类似，单独设置边框的内边距，设置上、右、下、左方向：

padding-top
padding-right
padding-bottom
padding-left

码农公寓

HtmL5 和CSS一些常见总结

一&二.Html

1.1.2 HTML的组成

1）标签

2）属性

1.2Html界面构造

1.3 一些常见标签

1.3.1 文本标签

1.4两种重要标签:块级和行内

1.5 标签属性

1.6新闻案例分析

1.6.2 实现方法

div样式布局

1.先把基本布局框调出

2.浮动布局和清除

1.7.3 图片标签&&超链接标签

具体实现

1.8 顶部实现

1.8.1 使用标签

1.8.2 实现步骤

1.8.3 实现顶部条

1.8.4 实现导航条

1.8.5 实现左部分享

二.表单及盒子模型

2.1 表单

2.2 表单元素入门

1）简单的文本输入框

HTML5新增属性

2.3 更多表单元素

二.CSS

1.CSS的基本构成

2. 使用方法

2.1 内联样式

2.2 外联样式

2.3选择器(！！！)

1）元素选择器

2）类选择器

3）ID选择器

4）通用选择器

2.2.2 属性选择器

2.2.3 伪类选择器

2.2.4 组合选择器

1）后代选择器

2）子级选择器

3）同级选择器

4）相邻选择器

2.4 总结

3.表格Table

2）表格标签

4.盒子模型

相关文章