html初级

2018-03-13 本文已影响0人莣忧草_3b53

2018-3-13

搭建http-sever本地开发环境

1.安装http-server-------在命令行中输入npm install –g http-server
2.进入自己创建的文件夹要进行挂起的http文件
3.在命令行中执行http-server –c-1
4.在浏览器中打开命令返回的IP地址
5.退出挂起Ctrl+c
6.刷新浏览器Ctrl+r

认识http

什么是HTTP

超文本标记语言

扩展名

.htm/.html

http结构

<!DOCTYPE html>                                                         文档类型声明
<html>                                                                  文本描述网页
    <head>                                                              文档头部信息
        <meta charset="UTF-8">                                           UTF-8编码
        <link rel="shortcut icon" href="路径" type="image/x-icon">       icon图标
    </head>
    <body>                                                              网页的可见内容
        <h1>一级标题</h1>                                               一级标题
        <blockquote>引用内容<blockquote>                                 引用内容 
        <p>段落</p>                                                     段落文字
        <img src="图片路径" height="高度" alt="文字修饰">                 图片
        <a href="跳转目标路径">绑定链接对象</a>                           链接
    </body>
</html>

注意：空白（空格 Tab 换行）
标签可以嵌套

注释

<--注释内容-->

例子：文章结构美化

1.进入git官网
2.输入框中查找搜索github markdown css
3.点击 sindresorhus/ github markdown
4.点击CDNJS
5.复制第一条
https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.css
6.在head中使用link标签
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.css">
7.复制style标签粘贴head中

.markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 45px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }

8.复制class="markdown-body"粘贴于body中，即

<body  class="markdown-body">

html5是什么

是html的最新版本：文档类型声明* 语义化的标签 *（历史了解）