HTML5短语句

HTML5短语句主要包含以下标签

mark标签

<mark></mark>标签定义带有记号的文本,高亮文本。常用于搜索中。

    

我是一段文字我是一段文字我是一段文字

meter标签

<meter></meter>标签定义度量衡,表示在一定范围内的值,例如投票占比、使用量等。其属性有:min最小值;max最大值;value实际度量的值。默认我0可以为整数或者浮点数。

    

progress标签

<progress></progress>标签定义进度。其属性有:min最小值;max最大值;value实际值。

    

time标签

<time></time>标签定义时间和日期。datetime="YYYY-MM-DDThh:mm:ssTZD"

    <p>我每天都是<time>8:00</time>起床。</p>
    <p>今天是<time datetime="2016-06-27T17:30Z">2016-06-27</time>。</p>
    

我每天都是起床。

今天是

wbr标签

<wbr>标签规定在文本中的何处适合添加换行符。

abbr标签

<abbr></abbr>标签指示简称或者缩写。

    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
    

The WHO was founded in 1948.

cite标签、blockquote标签与q标签

<cite></cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。引用的文本以斜体显示。

<blockquote></blockquote>标签定义块引用。其包含的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,拥有自己的空间。

<q></q>标签定义短的引用。其用于简短的行内引用。

    <cite>日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。</cite>
    <blockquote>日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。</blockquote>
    <q>日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。</q>
    日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。
    
日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。
日照香炉生紫烟,遥看瀑布挂前川。飞流直下三千尺,疑是银河落九天。

code标签

<code></code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

pre标签

<pre></pre>标签可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

    <pre>
        body{
                margin:0
            }
        div{
            width:100px;
            height:100px;
        }
    </pre>
    
        body{
                margin:0
            }
        div{
            width:100px;
            height:100px;
        }
    

HTML5新增标签

HTML5新增标签主要是语义化标签

header标签

<header></header>标签定义文档的页眉。

footer标签

<footer></footer>标签定义文档或节的页脚。

aside标签

<aside></aside>标签是指文章的侧边栏,指独立于主体内容的部分(跟内容区分,不互相影响),一般用于广告位等。

<nav></nav>标签定义文章导航部分。

hgroup标签

<hgroup></hgroup>标签用来包裹两个及以上h1~h6标题标签。

section标签

<section></section>有语义的div,作用于相关内容的集合(指有联系的集合)。

article标签

<article></article>更有语义的div,作用于多个相关内容的集合。article里可以嵌套article

details标签

<details></details>标签用来描述文档或文档片段的信息,定义元素的细节。

summary标签

<summary></summary>标签定义细节标题,与details标签一同使用。

summary元素应该是details第一个子元素

details标签说明

    
标签1
标签2

dialog标签

<dialog></dialog>标签定义对话框,其默认属性为display:none,想让其出现应定义open="open"属性。

figure和figcaption标签

<figure></figure>标签定义图表内容。

<figcaption></figcaption>标签定义图表标题。

figcaption元素应该是figure元素的第一个或最后一个子元素的位置

figure标签图解

    
可爱的小狗

<menu></menu>标签定义菜单列表。

main标签

<main></main>标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

map标签

<map></map>标签定义客户端图像映射。图像映射指带有可点击区域的一幅图像。主要结合JavaScript使用。

address标签

<address></address>标签定义文档作者/所有者的联系信息。

address标签说明

CSS总结

CSS(层叠样式表)

创建css文件方式

  1. command+N新建文档输入文件名和后缀,然后保存
  2. 通过slideBar插件,右键创建
  3. 通过终端,touch+space+文件名和后缀创建

css的引入方式

1.行间样式

    <div style="color:blue;width:200px;height:200px">
        <span></span>
    </div>

优点:(1)快速定位标签(2)优先级高(3)不会额外增加请求

缺点:(1)破坏html结构(2)内容样式不分离(3)不能复用(4)冗余代码多

2.内部样式

    <head>
        <style type="text/css">
            body{
                margin:0;
            }
            div{
                width:200px;
                height:200px;
            }
        </style>
    </head>

优点:(1)不会破坏html结构(2)不会额外增加请求(3)可以实现样式复用

缺点:(1)没有完全实现内容与样式的分离(2)多个html文件之间不能复用样式文件

3.外部样式

    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>

优点:(1)不会破坏html结构(2)实现内容样式的分离(3)不会有冗余代码(4)多个html文件可以复用样式文件

缺点:(1)增加了额外请求

通过比较来看,外联式css是我们理想的选择。

css选择器

1.选择器分类

(1)标签选择器

标签名{}

作用是选择系列标签,对该系列标签进行样式设置,做不到精确设置

(2)id选择器

#id名{}

id名要唯一,可以做到精确设置,但是不能复用

(3)class类选择器

.class名{}

class名可以复用,样式可以复用

(4)后代选择器

选择器1 选择器2

(5)群组选择器

选择器1,选择器2

(6)通配选择器

*

过于暴力,不建议使用

2.选择器的优先级

    *    <        标签        <        class    <        id    <        style    <        !important
    0    <        1        <        10        <        100    <        1000    <        10000+

    后代选择器为优先级相加,群组选择器无优先级之说
  1. 相同等级的选择器,样式冲突的情况下,后面覆盖前面(以后面为准)
  2. 样式冲突的时候,谁的优先级高,就以谁为准。优先级相等,以后面为准
  3. 选择器的优先级不能跨级比较(主要针对后代选择器)

文本设置

  1. color 文本颜色

  2. font-weight 文本的粗细

  3. font-style 设置斜体:italic斜体;normal正常

  4. text-align 文本的水平方向设置:left;center;right

  5. text-decoration 文本划线位置:underline;line-through;overline;none

  6. text-indent 文本缩进:px/em

  7. vertical-align 文本和元素的垂直方向设置:top;middle;bottom
    必须配合display:table;display:table-cell使用

  8. line-height 行间距:纯数值/px

  9. direction 文本输入方向设置:ltr默认文本方向从左到右/rtl文本方向从右到左

尺寸设置

  1. width 设置容器宽度 单位:px/%/vh

  2. height 设置容器高度 单位:px/%/vh

  3. min-width 设置最低宽度 内容不足容器的宽度时,以容器宽度为准;内容宽度超出容器宽度时,以内容宽度为准

  4. min-height 设置最小高度 内容不足容器高度时,以容器高度为准

可参考上文的CSS单位。

盒模型

盒模型是一个概念,是一些css属性的集合

  1. width

  2. height

  3. padding

  4. margin

  5. 块级标签display:block

  6. 标准盒模型

  7. IE盒模型

  8. boxsizing:border-box;

  9. border:border-width 3px默认值;border-color 继承父级的字体颜色;border-style solid实线/dashed虚线/dotted点状线

背景

  1. background-color

  2. background-image:url()

  3. background-repeat:repeat-x/repeat-y/no-repeat

  4. background-position:0 0;

  5. background-size:0 0/cover自适应/contain自适应(改变后会留白)

  6. css sprite 雪碧图技术

显示与隐藏

  1. 设置display:none隐藏/block显示

  2. 设置opacity(透明度):0透明/1完全不透明

  3. 设置visibility:hidden隐藏(但还占着地方)/visible显示

float浮动

float:left;right;none

清除浮动的方法:

  1. 给浮动元素的父级设置高度(达到清除浮动的影响)

  2. 给浮动元素的父级设置overflow:hidden(达到清除浮动的影响)

  3. 给浮动元素的下方(同级)新增标签,并设置clear属性(真正的清除浮动)

position定位

position:relative/absolute/fixed

附加样式属性:left;top;bottom;right;z-index层级

  1. relative相对定位 本身没有任何改变,设置了left相关属性才会位移,一般作用于设置绝对定位元素的父级

  2. absolute绝对定位 元素本身会发生改变,尺寸由内容撑开,设置了left相关属性才会位移:(1)父级元素有position相关属性的话,该元素会以父级元素定位(2)父级元素没有position相关属性,该元素会以窗口定位

  3. fixed固定定位 元素本身会发生改变,尺寸由内容撑开,设置了left相关属性才会位移(1)一般使用场景,窗口固定位置:比如广告、回到顶部(2)固定在窗口的某个位置

meta标签

meta介绍

meta提供关于html文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或者重新加载页面),搜索引擎(关键词),或其他web服务。

申明编码

    <meta charset="utf-8" />

优先使用IE最新版和Chrome

    <meta http-quiv="X-UA-Compatible" content="IE=edge,chrome=1" />

浏览器内核控制

国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。

国内双核浏览器内核模式为:

  1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
  2. 360极速浏览器、搜狗浏览器:Webkit内核(极速模式)

而添加meta标签的网站可以控制浏览器选择何种内核渲染。

    <meta name="renderer" content="webkit|ie-comp|ie-stand" />

页面关键字(important)

关键词最好控制在12个以内,非越多越好。

    <meta name="keywords" content="your tags, ..." />

页面描述(important)

描述字数控制在120~150之间,标点符号也包括在内。

    <meta name="description" content="120| 150 words" />

搜索引擎索引方式

    <meta name="robots" content="index,follow" />

    all:        文件将被检索,且页面上的链接可以被查询

    none:        文件将不被检索,且页面上的链接不可以被查询

    index:        文件将被检索

    follow:        页面上的链接可以被查询

    noindex:    文件将不被检索

    nofollow:    页面上的链接不可以被查询

页面重定向和刷新

    <meta http-equiv="refresh" content="0;url=" />

    content内的数字代表时间(秒),即多少时间后刷新;假如加url,则会重定向到指定网页

    搜索引擎能够自动检测,很容易被引擎视作误导而受到惩罚

网页作者信息

    <meta name="author" content="author name" />

针对移动设备

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

WebApp全屏模式

伪装app,离线应用

    <meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    content的值为default|black|black-translucent

添加到主屏后的标题

    <meta name="apple-mobile-web-app-title" content="标题" />

    content的值为default|black|black-translucent

忽略数字自动识别为电话号码

    <meta content="telephone=no" name="format-detection" />

    当为yes时,电话号码显示为拨号的超链接(默认情况下即为打开,当为这个时就没有必要写)

忽略识别邮箱

    <meta content="email=no" name="format-detection" />

    当为yes时,把文字默认为邮箱地址(默认情况下即为打开,当为这个时就没有必要写)

CSS单位

本文主要介绍几种长度单位

px

px指像素,是相对于显示器的屏幕分辨率而言,较为固定,即

    p{font-size=20px}

em

em也称倍数,是相对单位,是相对于父级的字号来设置的,浏览器默认1em=16px;或者当父级有设置font-size时,继承父级的font-size再对em的单位相乘。

    <div style="font-size:15px;">
        <span style="font-size:2em"> </span>
    </div>

如上,即span的font-size为2em=30px。

rem

rem=root em即根元素的font-size,也就是对整个html文档来说相对于<html>为元素设定字体大小,仍然是相对单位,只不过仅相对于<html>元素,而不会受到父级的影响。

<html>默认设置最小字体为12px,当<12px时,浏览器默认为12px

max-width

max-width设置元素的最大宽度

max-height

max-height设置元素的最大高度

min-width

min-width设置元素的最小宽度

min-height

min-height设置元素的最小宽度

vw

vw主要是指视窗宽度,1vw=1/100视窗宽度

vh

vh主要是指视窗高度,1vh=1/100视窗高度

%

%即指百分比,以百分比为单位的长度值是继承其父级元素的长度值。

 body{
     width:1000px;
 }
 其子元素
 p{
     width:50%;
 }
 即子元素p的font-size=1000*50%=500px

max-width,max-height,min-width,min-height,%,vh,vw主要用来做html文件对浏览器窗口的自适应

HTML简述

HTML(超文本标记语言)

html规范

  1. 所有的标签都要正确的闭合
  2. 大小写要统一,所有的属性都要小写(建议小写,html不区分大小写)
  3. 注意缩进(关系结构要清晰)
  4. 所有的文本内容都要用标签包裹起来
  5. 同级标签,最好display相同
  6. 养成注释的习惯
  7. 命名要规范:不要数字开头;不要纯汉字;建议用字母开头,数字下划线中划线组合使用;命名要贴近语义
  8. 组合标签要正确的嵌套
    ul li;ol li;dl dt dd;select option;table tbody tr th td

html基础模板

  1. 创建html文档
    (1)command+N新建文档输入文件名和后缀,然后保存
    (2)通过slideBar插件,右键创建
    (3) 通过终端,touch+space+文件名和后缀创建
  2. 版本声明doctype
  3. 创建html标记
  4. html必须有head头部和body身体
  5. head有个必备标记叫title,文档标题
  6. 支持中文要有meta charset=”utf-8” 使文档支持中文
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>

        </body>
    </html>

html常用标签的特性

1.html分为单标签和双标签

单标签大致如下:

    <meta />
    <br />
    <hr />
    <img />
    <input />
    <link />

余下的都为双标签,在此就不一一熬述。

2.标签的默认样式

间距:        margin,padding

字体:        font-size

修饰:        font-weight,font-style,color,text-decoration

边框:        border

display:    none,block,inline,inline-block,list-item,table,table-row,table-cell,flex

3.标签的默认属性

charset=""

href=""

title=""

alt=""

src=""

target=""  主要针对a form

width=""

height=""

border=""

value=""

type=""

name=""

action=""

4.块级标签

也就是指属性为display:block;的标签,大致列举如下:

    标签名        默认属性
    div            display
    h1~h6        margin display
    p            margin display
    hr            border margin display
    ol            margin padding list-style-type display
    ul            margin padding list-style-type display
    dl            margin display
    dt            display
    dd            margin display
    form        margin display
    body        margin:8px display
    html        display
    option        padding font-weight display white-space min-height
其特点有:(1)默认独占一行(2)没有设置width,height的情况下,继承父级容器宽度,高度由内容撑开(3)可以设置margin:0 auto居中(4)支持所有样式属性(5)一般作用于容器 **5.行级标签** 也就是指属性为display:inline;的标签,大致列举如下:
    标签名        默认属性
    a                color text-decoration cursor
    span
    strong            font-weight
    em(强调)            font-style
    var(变量声明)    font-style
    sub(上标字)        vertical-align font-size
    sup(下标字)        vertical-align font-size
    small(小字)
    del(删除)        text-decoration
    img                可以支持尺寸设置的行级标签
    br

其特点有:(1)不会独占一行(2)不可以设置尺寸,内容撑开宽度个高度img除外 width:auto;height:auto;(3)支持border,background,margin-left,margin-right,padding-left,padding-right

6.行块级标签

也就是指属性为display:inline-block;的标签,大致列举如下:

    input
    select
    textarea

其特点有:(1)不会独占一行,可以和行级标签、行块级标签并列一行(空间足够的情况下)(2)尺寸由内容撑开,没有默认的宽高度,可以设置尺寸

搭建HEXO博客

本文主要针对Mac电脑。

第一步:安装node.JS

  1. 首先下载node.JS
  2. 解压后运行,根据提示安装。
  3. 打开终端,输入”node -v”,当出现”v4.4.5”这类的说明你的Mac已经安装了node;否则重新步骤1。

第二步:安装git

  1. 作用是把本地的hexo内容上传到github
  2. 安装Xcode就有git,输入”git –version”当出现git的数字即为已经装好。

第三步:安装hexo

  1. 在命令行输入”npm install hexo -g”来开始安装hexo
  2. 当出现error或者其他报错时候,可以添加”sudo”来增加权限,即”sudo npm install hero -g”
  3. 之后会让你输入电脑密码(假如你设置的话),之后等待你下载并安装完成
  4. 输入”hexo”检查你的电脑是否已经装好hexo
  5. 创建一个存储的hexo目录并”cd”其进入,输入”hexo init”初始化hexo目录
  6. 输入”hexo server”启动本地服务,当出现如下即可复制网址在浏览器中查看。
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
    

第四步:配置github

  1. 必要条件:github账号,没有可以点击这里注册
  2. 在创建的hexo目录下输入”git”回车启动git,再输入”ssh-keygen”之后连续按回车三次,当出现如下时候,可以进行下一步

    +—[RSA 2048]—-+
    | o.++|
    | . .+o|
    | = +++ B|
    | B =.o+B.|
    | S
    +.o=+|
    | = E ooo=|
    | = + oo|
    | o +. .|
    | +.o+.|
    +—-[SHA256]—–+
  3. 输入”vim ~/.ssh/id_rsa.pub”完整复制如下代码,注意不要多带也不要少
    ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCt4KbeDTOxGyFWUcVo77axVpRLNY1ArBKpcSYGBsy1pRUIzkRQRJHFw4NSsiMYLrw6B/sngvtERSS4MoQVSueiy978kwNw5tU+RQ4hCCAd9XBvTJh7cyXm4VI3lPq1nGjrNcLgN1mFphg7npru2HSr0za2mGc0DfdJgurh1zbLYkIpXM70AKcfWtCBe9ghOQ3GSgA+TM675L6TjGxPsejvbP8qVvM8kbe8ucdL0ykkcCz1HcdRrqfu5T815JaCiEOabkkIMQ6qQOnQnXwD/B5lUMazb3e9UYqcNsZn2S3ujJ06HHe9lsyKlCSaIVAauBIsApKrHvNzwdBpkZ0YHnQD lanou@YF06-4.local
  4. 然后在github->setting->SSH and GPG keys->SSH keys下title随意命名,在key中粘贴,点击”ADD SSH key”即可
  5. 配置github与本地机器验证,输入“git config –global user.name”””的引号中输入你的github用户名,回车,输入“git config –global user.emall”””的引号中输入你的github注册邮箱,回车即可
  6. 在github右上角+号下拉框选择”New repository”,在”Repository name”中输入”your name+.github.io” 勾选 “Initialize this repository with a README”,再点击”Creat repository”即可创建博客域名仓库。

第五步:发布博客

  1. 在本地创建的hexo文件找到”config.yml”在Sublime Text中打开,找到”#Site”,可以在里面更改你认为需要更改的。代码如下
    # Site
    title:
    subtitle:
    description:
    author:
    language: zh-CN
    timezone:
  2. 下拉至最后,找到”deploy”在”type:”中输入” git”(注意空格)
  3. 在新创建的博客域名仓库找到”Clone or download”点击选择”Use HTTPS”复制https://地址,在type下回车另起一行输入"repo:",然后空格+域名仓库的https地址,保存即可
    deploy:
    type: git
    repo: https://github.com/liuxiaomengzy/liuxiaomengzy.github.io.git
  4. 然后在终端中输入”npm install hexo-deployer-git –save”等待其流程运行完成出现如下代码即可
    [fsevents] Success: “/Users/lanou/Desktop/blog/node_modules/hexo-deployer-git/node_modules/hexo-fs/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v46-darwin-x64/fse.node” is installed via remote
    hexo-deployer-git@0.2.0 node_modules/hexo-deployer-git
    ├── moment@2.13.0
    ├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, strip-ansi@3.0.1, has-ansi@2.0.0)
    ├── hexo-util@0.6.0 (striptags@2.1.1, html-entities@1.2.0, bluebird@3.4.1, highlight.js@9.4.0, cross-spawn@4.0.0, camel-case@3.0.0)
    ├── hexo-fs@0.1.6 (escape-string-regexp@1.0.5, graceful-fs@4.1.4, bluebird@3.4.1, chokidar@1.5.2)
    └── swig@1.4.2 (optimist@0.6.1, uglify-js@2.4.24)
  5. 输入”hexo g”是md文件转换为html文件,完成后即可输入”hexo d”发布上传到github。
  6. 新文件创建方法:输入”hexo new XXX(新的文本文件)”,编辑完成后输入”hexo server”本地运行ok后,输入”hexo g”是md文件转换为html文件,完成后即可输入”hexo d”发布上传到github了。