zoukankan      html  css  js  c++  java
  • H5+CSS复习笔记(全)

    1.自结束标签和注释

    通常标签都是成对出现,如<h1></h1>,<div></div>等等。但是又些标签是没有结束标签的,成为自结束标签,如<img>,<input>

    <img>和<img />两种写法都正确。

    注释是在代码中对代码进行解释说明的文字,注释中的内容会被浏览器忽略,在网页中看不到注释内容。(注释不能嵌套)

    2.标签中的属性

    可以在标签(开始标签或自结束标签)中设置属性,不能再结束标签内设置;

    属性是键值对,形式为x=”Y”,一个标签可以有多个属性;

    标签内属性要和标签名隔开,属性之间也要用空格隔开;

    属性用来设置标签中的内容如何显示(大小,位置,色彩等都是属性);

    属性是官方规定标准的,不能随意编造,其值也不能乱写;

    有些属性有值,二有的属性无值,只有属性键名。

    3.文档声明

    迭代——网页的版本:

             HTML4-------->XHTML2.0-------->HTML5 

    文档声明(doctype):用来告诉浏览器当前网页的版本,放在代码第一行,大小写无影响

             <!doctype html>默认为HTML5版本

             <!Doctype html>   ,   <!doctype HTML >都对

             通常的编辑器可以使用 !---->tab 快捷键快速生成网页结构代码

    4.进制

    10进制(日常使用),

    2进制(计算机底层机制):所有数据在计算机底层都会以二进制形式保存,可以将内存想象为由很多个小格子组成的容器,每一个小格子可以存储一个1或者0,这一个小格子在内存中被称为1位(bit)

    8bit = 1byte(字节)

    1024byte = 1kb(千字节)

    1204kb = 1mb(兆字节)

    1204mb = 1gb(吉字节)

    1204gb = 1tb(特字节)

    1204tb = 1pb

    8进制(很少用),

    16进制(一般在显示2进制数字时会转换成16进制)

    5.字符编码

             <meta/>自结束标签

             所有数据在计算机底层都是以二进制形式保存,文字也不例外。所以一段文字在存储到内存中时都需要转化成二进制编码,当我们读取这段文字时,计算机会将编码转化为字符供我们阅读

             编码:将字符转化为二进制编码

             解码:将二进制编码转化为字符

             字符集(charset):编码与解码遵循的规则

             乱码问题:编码与解码采用的字符集不同时会产生乱码

             常见字符集:ASCII(美国)   ISO88591(欧洲)   GB2312(中国)   GBK(中国扩展)    UTF-8(万国码,在开发时使用的标准)

             <meta charset=”utf-8” />设置网页字符集,避免乱码,只需要解析,不用显示,所以放在<head>标签内。Charset属性值在设定时必须与编辑器的编码格式一致

    6.文档的使用

    使用zeal进行离线文档查看

    7.实体

    在网页中,编写的多个空格会被浏览器解析成一个空格;

    在HTML中有些时候不能直接书写一些特殊符号,会被浏览器错误解析,比如连续多个空格,字母两侧小于号大于号……

    如果我们需要在网页中书写这些特殊符号,需要使用HTML中的实体(转义字符);

    转义字符用法:

             &实体的名字;

             例如:&nbsp;表示一个空格

                         &gt;表示大于号

                         &lt;表示小于号

                         &copy;表示版权符号

    8.meta标签

    作用就是设置网页的元信息,元信息是给浏览器看的。

    常用属性有:

             Charset :指定网页的字符集

             Name : 指定数据的名称

    Keywords:表示网站的关键字,可以同时使用多个关键字,关键字之间使用逗号隔开

    Description:用于指定网站的描述,网站的描述会显示在搜索引擎的搜索结果中

    title标签的内容会作为搜索结果的超链接上的文字显示

             Content : 指定数据的内容

             http-equiv : 服务器在向浏览器发送文档之前会发送一些键值对信息提示卢兰其将要接受的文档信息,在使用带有http-equiv属性的meta标签时,服务器会把该键值对添加到要发送给浏览器的提示信息头部。

             特殊情况:

             <meta http-equiv="refresh" content="5;url=https:www.baidu.com"/>

             <!-- http-equiv的值为refresh表示网页重定向,content里的5表示5秒后重定向,url为重定向的目标地址 -->

    9.语义化标签

    在网页中,HTML专门负责网页的结构,使用HTML时应该关注标签的语义,而不是样式。

    h1 ~ h6:一共6级标题,重要性逐级递减,一般情况下一个页面中只会有一个h1,一般情况下只会使用h1 ~ h3

    hgroup标签:给h标签分组,可以将相关的h标题放到一组

    P标签:表示一个段落

    Blockquote标签:表示长引用

    块元素:在页面中会独占一行的元素,h1 ~ h6都是块元素,p元素也是块元素

    Em标签:表示语音语调语气的加重

    Strong标签:表示强调重要的内容

    Q标签:表示短引用

             行内元素(内联元素):在页面中不会独占一行的元素,如em元素和strong元素

             Br标签:表示换行

    10.块元素(block)和行内元素/内联元素(inline)

    Block:网页中通常使用块元素进行布局

    Inline:主要用来包裹文字

    块元素中什么都能放,行内元素中不能放块元素

    P元素中不能放块元素

    浏览器在解析网页时会自动对不符合规矩的内容进行修正:

    比如:标签写在根标签外面

    p元素中嵌套了块元素

    根元素中出现了head和body以外的子元素

    ……

    11.布局标签(结构化语义标签)

             Header标签:网页的头部

             Main标签:网页的主体部分,一个页面中只会有一个main

             Footer标签:网页的底部

             Nav标签:网页中的导航

             Aside标签:和主体相关的其他内容

             Article标签:一个独立的文章

             Section标签:表示一个独立的区块

             Div:块元素,没有语义,用来表示一个区块,目前是主要的布局元素

             Span:行内元素,没有语义,一般用于在网页中选中文字

    12.列表

    HTML中列表一共有三种:

             (1)有序列表

                       ol标签:创建有序列表

             (2)无序列表(常用)

    ul标签:创建无序列表

                       li标签:表示列表项

             (3)定义列表

                       dl标签:创建定义列表

                       dt标签:定义的目标

                       dd标签:对目标解释的内容

    列表之间可以互相嵌套

    13.超链接

    超链接可以帮我们从一个页面跳转到另一个页面

    a标签(行内元素):定义超链接

             href属性:指定跳转的目标路径,属性值可以是外部网站的地址,也可以是内部页面的地址(目标文件的相对路径)

    a标签中可以嵌套除了自身外的任何元素

    14.

  • 相关阅读:
    VM12+CentOS6.8安装VM tools
    PHP关联数组按某一value值排序
    命名规范
    JavaScript中的函数
    JavaScript中的for循环语句
    JavaScript中的判断和循环
    Javascript运算符的分类
    Html中的JavaScript
    【逆战】HTML5新语义化标签 (二)
    【逆战】HTML5新语义化标签 (一)
  • 原文地址:https://www.cnblogs.com/edward-life/p/12579112.html
Copyright © 2011-2022 走看看