html学习小结

常用常新

已于 2022-09-12 19:25:34 修改

阅读量465

点赞数 1

分类专栏：前端学习 html5 css 文章标签： html5 css 前端 html

于 2021-02-07 10:41:05 首次发布

本文链接：https://blog.csdn.net/m0_51939262/article/details/113498132

版权

前端学习同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

文章目录

学习目标
复习和补充（html5)
html5 新特效(兼容性)
css3新特性

学习目标

goal

复习和补充（html5)

网站：用于展示特定内容相关的网页集合
常用的浏览器：IE，火狐（Firefox）、~~ 谷歌（Chrome） ~~、Safari（苹果）、Opera

web标准的构成

结构(html)、表现(css)、行为(js)

一些零散的知识点

单标签可以不用写后面的/了

<!DOCTYPE html>
<!--声明是哪个html版本，如上是最新版本-->
<html lang="en">
<!-- <html lang="zh-CN">中文 -->
<!-- 定义网页语言，定义为英文也可以显示中文，其他情况亦可-->
<!-- 主要作用：必要时可以弹出翻译网页的选择框 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>月光照进深海里</title>
</head>
<body>
    这里的内容不会独占一行
    <img src="../img/logo.jpg" alt="图像显示不出来时的代替文字" title="鼠标放在图片上显示的文字" 
    width="100px" height="50px"/>
    <h1>第一步</h1>
    <!-- 标题独占一行 -->
    <h2>第二步</h2>
    <p>也许<strong>hjl</strong>无法成为大家的光，那么<em>hjl</em>希望成为各位生命里的一只小小<del>蜂鸟</del>。<br />
        <ins>你们看，这个世界开满了花呀</ins></p>
    <!-- 再多空格生效的也只有一个 -->
    <!-- 据浏览器窗口大小自动换行，段落间保有缝隙 -->
    <img src="../img/logo.jpg" alt="图像显示不出来时的代替文字" title="鼠标放在图片上显示的文字" height="50px"/>
    <!-- 只修改宽度、高度任一个，另一个会自动等比例修改 -->
    <!-- img是行内元素 -->
    <div id="one">我是一个div标签，我一个人独占一行</div>
    <div>我是一个div标签，我一个人独占一行</div>
    <span>可以多个在一行</span>
    <span>可以多个在一行</span>
    <br />
    <!-- 换行 -->
</body>
</html>

超链接

	<a href="http://www.qq.com" target="_blank">腾讯</a>
    <!-- 默认原窗口，上面新窗口 -->
 	<a href="#">下载链接（注意得是压缩包哦，点击即下载）</a>
    <!-- #（空链接）替换成文件.exe、.zip等压缩包的地址-->
    <a href="#one">锚点链接：跳到本页面的某一位置（只能用id）</a>

特殊字符：空格，<，>

 <p>&nbsp;&nbsp;&nbsp;&lt;&gt;</p>

表格table用来展示数据

    <table align="center" border="1" cellpadding="0" cellspacing="0"> 
        <!-- 表格在屏幕的位置，~，文字到单元格边框的距离默认为1，单元格与单元格之间的距离默认为2 -->
        <thead>
            <tr>
                <th colspan="3" >姓名 年纪 粉籍</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>a</td>
                <td>18</td>
                <td>深海</td>
            </tr>
            <tr>
                <td>b</td>
                <td>24</td>
                <td>小笼包</td>
            </tr>
        </tbody>
        <!-- 让表格结构明了 -->
    </table>  
    <!-- 合并单元格
    1. 先确定跨行还是跨列
    2. 跨行：写在要合并的最上面的单元格 rowspan
       跨列：最左
    3. 删除多余单元格 -->

列表用来布局

无序列表

自定义列表（大哥带小弟）

表单（w6）

name和value

单选按钮必须起一个相同的name，复选框也有必要，方便后端区别不同表单。
value是默认值（提示后台，男女得分别设一个），placeholder才是提示语

checked

用于单选框、复选框设定默认选定的值

maxlength（被正则表达式代替）

规定输入字符的最大长度
type="file"例：上传头像
"submit"提交form的内容即表单域，可见form的必要性

select(下拉列表)

籍贯：
        <select name="" id="">
            <option value="北京">北京</option>
            <option selected value="天津">天津</option>
            <option value="上海">上海</option>
        </select>

textarea

        今日反馈：<br>
        <textarea name="" id="" cols="30" rows="10">我有好好听课哦</textarea>

样式一般都是css

综合案例-注册页面

form是表单域，里面再套表格table，这样可以把整个表格信息传给后台

代码规范

空格规范

属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格
shift+alt+F格式化代码

寻找共性，简化代码（公共样式放在同一个选择器下）

选择器

class

取多个类名

    <div class="name1 name2">取多个类名的简便方式:类名间隔个空格</div>

常用类名

常见类名

id常用于js，一个id名切勿重复用在不同对象上

** 类选择器好比名字，id选择器即为身份证号码**

通配符 *

字体

代码示范

<style>
        body {
            font-family: "Microsoft yahei", tahoma, arial, "Hiragino Sans GB";
             font-size: 20px;
             font-weight: 700;  
             /*等价于加粗即bold  */
        }
        /* 谷歌默认微软雅黑 
        上方是常用设置*/
        
                /* 1. 谷歌默认16px
        2. 不同浏览器可能默认显示的字号大小不一致，我们尽量给个明确大小 
        3. 标题标签比较特殊，需单独指定*/
               h2{
            font-weight: 400;
            /* 相当于normal、变细 */
        }
    </style>

代码简写

div{
    font:font-style font-weight font-size/line-height font-family;
}

** font-size font-family不能省**

补充font-style(normal/italic)

** 将图标字体掰正**

文本

代码示范

    <style>
        p {
            text-indent: 2em;
        }
        h2{
            text-align: center;
            /* 文本居中 */
        }
    </style>
	<p>em是个相对单位（相对当前字体大小）进行缩进</p>

line-height(行间距)认真理解

行间距

行间距是占位的

测量工具

faststone capture

css引入方式

内部（style标签中）
行内（本来标签中如div的style属性）同行打系列
外部（另建文件）推荐
优先级：2>1>3

快捷键积累

Ctrl + A 全选

vscode Alt + Z 自动换行

shift+alt+F格式化代码

让布局更好看的常用代码

    <style>
        body{
            font: 16px/28px 'microsoft yahei';
        }
        a{
            text-decoration: none;
        }
    </style>

一些细碎知识点

十六进制的颜色代码：对应红绿蓝，两两相同可只留一个

f12

emmet语法(偷懒小帮手)

emmet

代码示范

    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>

        <!-- li*5>a -->
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>

    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>

快捷键

Ctrl + S 保存

复合选择器(后代，并集，hover使用多)

后代选择器

空格

子代选择器

** 我附庸的附庸不是我的附庸**

并集选择器

  , 喜欢竖着写。。。

** 任何选择器都可以作为并集选择器的一部分**

伪类选择器

链接伪类选择器

** 为了确保生效，请按照LVHA的顺序写（love hate）**

未访问、访问、悬停、按住/实际开发中一般就用到hover

a(超链接）因有默认样式，所以需要单独指定样式

：focus

用于选取获得焦点的表单元素

        input:focus{
            background-color: aqua;
        }

css的元素显示模式

块元素(div)

块元素

独占一行，就算地盘没有用完，我的仍是我的，别人也不能占
高度，宽度，外边距以及内边距都可以控制
宽度默认是父级宽度的百分之百
本身是一个容器，里面可以放行内或者块级元素
存放文字的元素内不能放块级元素

行内元素(span)

行内元素

一行可以显示多个
高，宽直接设置是无效的
默认宽度就是它本身宽度
行内元素只能容纳文本或其他行内元素
border啥的可以
行内元素只设置左右的内外边距
** 1. a里不能再放a 2. a转换为块级形式，里面放块级元素----运用在“货品展示”，秀啊**

行内块元素

一行可以显示多个，但他们之间留有空白缝隙、
默认宽度为本身内容宽度(同行内元素)
宽度，高度，行高，外边距以及内边距都可以控制(同块级元素)

显示模式的转换

        a{
            display: block;
            /* display即展示 使用最多 需要宽度和高度 */
                        display: inline-block;
            /* 有些很不错的用处 */

        }

snipaste使用

吾爱破译论坛
** 在截图状态下按shift切换**
QQ截图

背景

background-image

实际开发中常见于

logo
一些装饰性的小图片
是非常便于控制位置。
精灵图

优点：便于控制位置

background-repeat

默认重复

background-position

方位名词:top,center,bottom,right,left

没有方位名词：默认左上
一个方位名词：另一个默认center

精确单位

两个数值：第一个是x，第二个是y
一个即是x，y轴，默认居中

混合单位

第一个x，第二个y

扒图，，

background-attachment:scroll/fixed

背景复合写法（不方便维护）

background：颜色图片地址背景平铺背景图像滚动位置

在实际开发中，不太关注兼容性写法了，可以放心使用

qq官网的视觉滚动(+布局)

综合案例：五彩导航

html5 新特效(兼容性)

语义化标签

对搜索引擎好，便于检索
IE9中，需要把这些元素转换为块级
移动端喜用

多媒体标签

video

建议用MP4格式

    <!-- 和图片一样，只改宽，高会自适应 -->
    <video controls="controls" width="300" autoplay muted loop poster=""> 
        <source src="move.ogg" type="video/ogg">
        <source src="move.mp4" type="video/mp4">
        您的浏览器暂不支持<video>标签播放视频
        <!-- controls各个浏览器不一样，所以一般用js添加控件-->
    </video>

audio

建议用MP3格式

    <audio controls="controls" controls>
        <source src="happy.mp3" type="audio/mpeg">
        <source src="happy.ogg" type="audio/ogg">
        您的浏览器暂不支持<audio> 标签。
    </audio>

表单

当我们点击提交按钮的时候就可以验证表单是否符合相应格式
重点记住number tel search

表单属性

更改样式：input::placeholder

生成指定表单的快捷方式：input:file

css3新特性

属性选择器

input[value]{}
属性选择器

结构伪类选择器

nth-child(n)

ul li: 指定孩子类型
ul : 不指定类型

pk

总结：需要区别类型的用type，一视同仁的用child

伪元素选择器(行内元素)

简化html结构
权重为1
父盒子里面的前面或者后面

案例:伪元素字体图标

案例:仿土豆效果

.pic::before {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4) url(../img/播放.png) no-repeat center;
}

.pic:hover::before {
    display: block;
}

css盒子模型优化

box-sizing:border-box

图片变模糊(了解)

filter(滤镜）:blur(模糊)（数值）

width:calc(100%-80%)滚动条的滑块

css3 过渡transition

transition

图片变化

margin变负

html5=html5+css3+js

项目:网站

模块式开发

有些网站初始化的不太提倡

{ margin: 0; padding: 0; }
比如新浪：html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

common.css公共样式里面包含版心宽度，清除浮动，页面文字颜色

网站favicon.ico

第三方转换网站：例如比特虫:http://www.bitbug.net/
引入：

TDK三大标签SEO优化搜索(搜索引擎优化)

title description keyword

    <title>时代少年团-贺峻霖-深海的聚光灯永远为贺峻霖停留</title>
    <!-- 网站说明 -->
    <meta name="description" content="">
    <!-- 关键字 -->
    <meta name="keywords" content="">