HTML5,css基础

作者: 山高路远_海深不蓝 | 来源:发表于2018-11-12 22:05 被阅读0次

HTML5

基本板式

<!DOCTYPE html>
<!--lang 语言参数-->
<html lang="en">
<head>
    <!--编码-->
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>Title</title>
</head>
<body>
</body>
</html>

div

块级标签,内容显示默认独占一行

示例

<!--div标签-->
<div>静夜思</div>
<div>静夜思</div>

作用

div在开发过程中一般充当网站的结构,用来包裹网站的内容,使包裹的内容和其他内容之间保持一定的独立性

span

行标签,内容默认在同一行显示;行级标签

示例

<!--span -->
<span>静夜思</span>
<span>静夜思</span>
<span>静夜思</span>

各级标签属性

行级,块级标签,行内块属性标签
行级标签: 多个标签的内容是在同一行显示
块级标签: 每个标签的内容都独自占用一行
行内块属性标签: 同行显示还能修改宽高(参照CSS行内块属性)
- 块级标签可以嵌入块级和行级标签,行级标签只能嵌入行级标签
- 行级标签不能通过width和height来修改宽高,只能由内容决定

作用

span 一般用来直接标记文本内容,负责区分特殊的文本信息

img

图片标签;行内块属性标签
属性(src alt title):

src: 图片路径,必需参数属性

alt: 图片无法加载时的提示内容

title: 当鼠标放在图片上时显示提示文字,一般用于LOGO

<img src="./img/p2.gif" alt="图片加载失败" title='LOGO'>

a标签

超链接标签;行级标签
属性(href target):

href: 链接跳转页面的url

target: 设为"_blank"时会在新页面打开链接

<a href="http://www.naoxiaobai.club" target='_blank'>脑小白</a>

h标签

标题标签,六级标签h1,h2,h3,h4,h5,h6;块级标签
一般使用前三级

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

ul,ol

列表,ul为无序列表,ol为有序列表;块级标签
一般使用无序列表,两者都配合li列表项使用;li也是块级标签

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<ol>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ol>

p标签

段落标签;块级标签
用来包裹一段内容(文字,图片,视频等),代表一段数据,默认会跟其他段落保持一定的距离

<p>
    段落一
</p>
<p>
    段落二
</p>

video

视频标签;行级标签
属性(src controls loop autoplay muted):

src: 视频路径
controls: 控制视频是否显示播放控件
loop: 控制视频是否循环播放
autoplay: 控制视频加载完后是否自动播放
muted: 控制视频是否静音播放

Note:

有些浏览器对autoplay做了屏蔽,此时可以加上muted,以实现自动播放

<video src="./source/mov.mp4" controls loop autoplay muted></video>
<!--指定视频的格式-->
<video controls>
    <source src="./source/m1.mp4" type="video/mp4">
    <source src="./source/m1.ogg" type="video/ogg">
    <source src="./source/m1.Webm" type="video/Webm">
</video>

audio

音频标签
属性(src controls loop autoplay muted):

属性的设定与视频video一样,参照video标签

<audio src="./source/a1.mp3" controls loop autoplay muted></audio>
<!--指定音频的格式-->
<audio controls loop>
    <source src="./source/a1.mp3" type="audio.mp3">
    <source src="./source/a1.ogg" type="audio.ogg">
</audio>

embed

动画插件,HTML5新增,IE9以下不支持;行级标签
属性(src type):

src: 资源地址
type: 资源类型,默认自动匹配

<embed src="./source/m1.mp4" type="">

作用

用来将指定的动画,视频,音频作为一个对应的插件嵌入到页面指定的位置

锚点

超链接标签锚点:

本质上是通过在网页中指定的位置设置标签的id属性值,
之后在超链接标签上通过设置herf="#id值",完成点击跳转.
锚点的作用:
可以帮助用户从网页中众多的内容中快速的查找用户感兴趣的内容,
一般适用于网页内容比较多的网站

<body>
    <a href="#title">锚点</a>
    <h1>静夜思</h1>
    <p>床前明月光, 地上鞋两双.</p>
    <p>举头望明月, 低头撕裤裆.</p>
    <p><img src="./img/p1.gif" alt=""></p>

    <h1 id="title">春晓</h1>
    <p>春眠不觉晓, 处处蚊子咬.</p>
    <p>夜来风雨声, 菊花肿多少.</p>
    <p><img src="./img/ys.jpg" alt=""></p>
</body>

表格

<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr>
        <td>列1</td>
        <td>列2</td>
        <td>列3</td>
    </tr>
</table>

table: 表格标签
tr: 行
th: 跟td用法相同,一般用于列标题
td: 单元格

表单

<form action="">
    姓名: <input type="text" value="" name="name">
    性别: <input type="radio" value="男" name="sex">
    <input type="radio" value="女" name="sex">
    <input type="submit" value="提交">
</form>

form: 表单标签
input(type, value, name): 输入框
- type: 文本框的类型
- value: 默认值
- name: 提交时的参数名

CSS

层叠样式表
放到head标签内

<html>
  <head>
      <stype>
          div{}
          span{}
      </stype>
  </head>
  <body>
  </body>
</html>

作用

用来设置指定标签标记内容的样式,需要预先指定对应的选择器
- 标签名选择器: 使用标签的名字作为选择器
div{ color: red;}

文本样式

color: 字体颜色设置
font-weight: 字体的粗细设置
font-size: 字体的大小,选项有px(以像素为单位),em(以字符为单位)
font-famliy: 字体集
text-indent(缩进): 文本缩进，单位可以是字符或是像素
text-align(排列): 文本排列

参数：
letf : 靠左
right : 靠右
center : 居中

text-decoration: 文本装饰

参数：

underline(下划线)
line-through(删除线)
overline(顶部线)
none(去除所有线)

text-shadow: 文字阴影

参数(x y dim color)：

x : 水平偏移量，正值向右；
y : 竖直方向偏移量，正值向下
dim ：模糊程度，单位可以是像素，字符...
color : 阴影的颜色

行内块属性

既具有行级标签的属性(同行显示)，又具有块级标签的特性(设置宽高)

display: transform-type

inline-block: 转换成行内块属性

inline: 转换成行属性

block: 转换成块属性

行内块适用于两个都是图片或都是文字的情况

盒模型

基本结构

盒模型含有四级结构：

image.png

margin: 外边距，可以设置四个方向；

使用margin: 0 auto;可以达到水平居中的效果，详细见auto项；

border: 边框，三个值为线宽、实线或虚线（solid/dashed）、颜色
padding: 内边距，可以设置四个方向；
content: 内容层，可以指定宽高

Note1: 当设置两个相邻的外边距时,两个相邻元素的外边距会出现重叠现象,
此时以外边距大的一方为准。
Note2: 当设置某一个块级元素的上下margin时,如果该margin作用于当前标签和其父级标签,此时父级标签必需有边框
Note3: 不使用怪异盒模型时，width和height只是设置内容层的规格

怪异盒模型

怪异盒模型是将border、padding、content三部分进行绑定，

此时通过width和height来设置规格时就不只是内容层，而是同时包含这三部分

box-sizing: border-box

Note: 有时为确保浏览器兼容需加上以下代码

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

应用于内容固定的盒模型，否则当内容增加时可能会从盒子中溢出
溢出示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LEIZI</title>
    <style type="text/css">
        div{
            background-color: #fcfdf8;
            width: 300px;
            height: 300px;
            border: 2px solid blue;
            padding: 5px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        <p>
            这是一个测试这是一个测试这是一个测试这是一个测试这
            是一个测试这是一个测试这是一个测试这是一个测试这是
            一个测试这是一个测试这是一个测试这是一个测试这是一个
            测试这是一个测试这是一个测试这是一个测试这是一个测试
            这是一个测试这是一个测试这是一个测试这是一个测试这是一
            个测试这是一个测试这是一个测试这是一个测试这是一个测
            试这是一个测试这是一个测试这是一个测试这是一个测试这
            是一个测试这是一个测试这是一个测试这是一个测试这是
            一个测试这是一个测试这是一个测试这是一个测试这是一
            个测试这是一个测试这是一个测试这是一个测试这是一
            个测试这是一个测试这是一个测试这是一个测试
        </p>
        <p>
            这是一个测试
        </p>
    </div>
</body>
</html>

盒子阴影

box-shadow: box-shadow: inset x y dim color

inset: 加inset时阴影向内扩散，不加时向外

x : 水平偏移量，正值向右；

y : 竖直方向偏移量，正值向下

dim ：模糊程度，单位可以是像素，字符...

color : 阴影的颜色

盒子形状

border-radius: 设置标签边角的裁剪半径,分为五种情况:

1个值: 四个边角都按照这一个值裁剪

2个值: 对角裁剪,第一个值为左上和右下,第二个为右上和左下

4个值: 四角对应

8个值: 分为两组,对应位置的两个数为一个顶点对应的两边的裁剪距离

示例：

border-radius: 20px 50px 70px 100px / 20px 50px 70px 100px;

image.png

选择器

通配选择器, 优先权值为0

代表所有标签的样式;

初始化所有标签的样式;
优先级最低,一般用来完成标签样式的重置

*{
    margin: 0 0;
    padding: 0 0;
    text-decoration: none;
}

标签名选择器，优先权值为1
class选择器，优先权值为10

.mark{
    width: 800px;
    margin: 0 auto;
    text-align: center;
    background-color: lawngreen;
    border-radius: 20px;
    box-shadow: 0px 0px 30px black;
  }

id选择器，优先权值为100

#title{
    font-family: "yahei";
}

子代选择器，优先权值为class + 标签名 = 11

由id,class或标签名通过>连接形成的
具有父子关系的选择器称为子代选择器,
一般适用于仅对某一标签的子代标签设置样式

.mark>p{
      color: white;
      margin: 3px;
      font-size: 18px;
      text-shadow: 0 0 10px black;
      }

后代选择器，优先权值为class + 标签名 = 11

由id,class,标签名通过空格组合而成的具有后代关系的一种选择器,
该选择器可以指定所有跟其构成后代关系的

.mark h1{
      color:  blue;
      /*font-family: "kaiti";*/
      margin: 20px;
      }

群组选择器，优先权值按照","分割,分别计算

由id,class或标签名,后代选择器或子代选择器用过","连接,
形成的一种具有并列关系的选择器.
群组选择器一般用来实现多个标签相同样式的合并,减少代码的冗余

.mark h1, .mark>p{
    font-family: "kaiti";
    }

Note: 优先级相同时，后者会覆盖前者

强制提升优先级为最高

使用 !important 修饰,此时优先级会被设为1000即最高优先级.
该操作只有当上面的操作无法完成修改时才使用,不建议使用.

font-family: "yahei" ! important;

伪类选择器

负责选择指定标签所处的不同状态,主要作用于a标签

:link 代表超链接标签之前没有被点击的状态
:hover 代表鼠标悬停在标签上的状态,该状态所有标签都有
:active 代表鼠标按下松开前的状态
:visited 代表访问过的状态

a:link{
      color: red;
      }
a:hover{
       color: greenyellow;
       }
a:active{
       color: pink;
       }
a:visited{
        color: blue;
        }

auto

获取标签所在父级标签的宽度,然后减去当前标签的宽度,最后除以二返回(内置函数计算)
一般用于实现块级元素相对于父级元素水平方向上居中


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LEIZI</title>
    <style type="text/css">
        .father{
            background-color: blue;
            width: 600px;
            margin: 0 auto;
        }
        .child{
            background-color: red;
            width: 200px;
            height: 200px;
            margin: 0 auto;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">

        </div>
    </div>
</body>
</html>

文本自动隐藏

设置文本行数，超出范围将自动隐藏

overflow: hidden;   /*隐藏标签内容*/
text-overflow: ellipsis;  /*以省略号显示*/
display: -webkit-box;
-webkit-line-clamp: 1;  /*要显示的行数*/
-webkit-box-orient: vertical;

Note: 全字母时需要按照需要对单词换行(连续字母,没有空格时被当成单个单词，不换行，不隐藏)

浮动

对于网页的布局，float显得尤为重要

浮动布局：
主要解决多个块级元素在同一行显示的问题。
因此该布局主要应用与PC端的布局。
使用步骤：
首先对需要在同行显示的块设置浮动（left, right）,
然后设置其父级清除浮动效果，否则父级会发生高度塌陷。
清浮动方法;
1. 使用overflow: hidden；
2. 在浮动块中追加空元素,同级加div,使用clear；
3. 通过伪类after配合zoom完成清浮动

Note: 浮动

简单示例，son1和son2实现拼接

使用第一种清浮动的方法，也是常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LEIZI</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 600px;
            background-color: blue;
            /*隐藏标签，在这里可以达到清除子集浮动的效果*/
            overflow: hidden;
        }
        .son1, .son2{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .son2{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">
            静夜思
        </div>
        <div class="son2">
            思今夜
        </div>
    </div>

</body>
</html>

overflow：

清除子集浮动造成的父级塌陷
overflow: hidden;
overflow: 内容超出范围时的处理方式
hidden: 隐藏
scroll: 滚动

empty清浮动

在需要清浮动的标签的同一级上新建一个空的div empty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LEIZI</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 600px;
            background-color: blue;
            vertical-align: top;
            margin-top: 10px;
        }
        .son1, .son2{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: 10px;
        }
        .son2{
            background-color: green;
        }
        .empty {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">
            静夜思
        </div>
        <div class="son2">
            思今夜
        </div>
        <div class="empty"></div>
    </div>
</body>
</html>

伪类选择器

通过使用伪类选择器after和zoom方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LEIZI</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 600px;
            background-color: blue;
            vertical-align: top;
            margin-top: 10px;
        }
        /*清浮动之after，zoom方法*/
        .father:after{
            content: "测试";
            display: block;
            height: 0;
            clear: both;
            /*将标签变成透明，隐藏*/
            visibility: hidden;
        }
        .father{
            /*兼容IE9以下*/
            zoom: 1;
        }
        .son1, .son2{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: 10px;
        }
        .son2{
            background-color: green;
        }
    </style>
</head>
  <body>
    <div class="father">
        <div class="son1">
            静夜思
        </div>
        <div class="son2">
            思今夜
        </div>
    </div>
  </body>
</html>

动画

过渡动画

关键帧动画

快捷操作

pycharm

div + table键自动创建
<div\></div\>
div{静夜思}*2 + table 自动创建

<div>静夜思</div>
<div>静夜思</div>

h${$级标题}*6 + table 自动创建

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

div.mark + table 自动创建
<div class="mark"></div>
div#mark + table 自动创建
<div id="mark"></div>
a[href="#"]{HOME}.link*2
(tr>td{单元格$}3)3

<tr>
  <td>单元格1</td>
  <td>单元格2</td>
  <td>单元格3</td>
</tr>
<tr>
  <td>单元格1</td>
  <td>单元格2</td>
  <td>单元格3</td>
</tr>
<tr>
  <td>单元格1</td>
  <td>单元格2</td>
  <td>单元格3</td>
</tr>

HTML5,css基础

HTML5

基本板式

div

示例

作用

span

示例

各级标签属性

作用

img

a标签

h标签

ul,ol

p标签

video

audio

embed

作用

锚点

表格

表单

CSS

作用

文本样式

行内块属性

行内块适用于两个都是图片或都是文字的情况

盒模型

基本结构

怪异盒模型

盒子阴影

盒子形状

选择器

强制提升优先级为最高

伪类选择器

auto

文本自动隐藏

浮动

简单示例，son1和son2实现拼接

overflow：

empty清浮动

伪类选择器

动画

过渡动画

关键帧动画

快捷操作

pycharm

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读