HTML+CSS基础一有序列表：1. 英文状态下数字+. 空格 HTML：Hyper text makeup lang

- 人生的目的就是遇见更好的自己
- MarkDown用法
标题一

人生的目的就是遇见更好的自己

MarkDown用法

标题二

标题三

标题四

标题五

标题：Ctrl+(1-5)

文字加粗：Ctrl+b

斜体

：Ctrl+i

分割线：3个以上* 或者-
列表：
无序列表：+ 、 - 空格

苹果
梨
- 大梨
香蕉
tab 子列表
shift+tab 回退
有序列表：1. 英文状态下数字+. 空格
1. 哈哈哈
2. 嘿嘿
  1. 啦啦啦啦
3. 巴拉巴啦
  连按两次enter 退出列表编辑
  
  这是一段引用
  尖括号 > 空格

代码块Ctrl+k 连按三次
Ctrl+k 特殊标记

插入链接：Ctrl+l
百度
插入图片：Ctrl+g
本地：
网上在线图片：
QQ：Ctrl+Alt+A
帮助文档：Ctrl+ \
最大编辑区：Ctrl+enter
最大预览区：Ctrl+Alt+enter

常用浏览器

谷歌 chrome:Webkit内核（v8引擎），现在是blink内核
- 一些国产的浏览器也是Webkit内核，Safari、QQ浏览器、360、猎豹、搜狗等
火狐：Gecko内核
IE：Trident内核
欧朋：Presto内核

语言

HTML：Hyper text makeup language，超文本标记语言。（骨架）
CSS：Cascading style sheets，层叠样式表。（衣服）
JS：JavaScript 轻量级的编程语言。（行为/动态）

工作流程

需求–产品出一个原型图需求文档 – 需求会重新修改– UI根据原型图做成设计稿
web前端还原设计稿–网页，包含数据的获取，以及业务逻辑的实现
测试（专门的测试人员）
上线—再测试（线上环境和本地环境不一样）
测试

HTML

HTML标签的规则

标签语法：

用尖括号包裹关键词
成对出现：开始标签和结束标签
结束标签比开始标签多了一个反斜杠/

特别的：
比如 meta br img 等，这一类标签叫做“单标签”或者“自闭合标签”或者“空标签”。

<img />
</br>
<meta />

html的基本结构

<!DOCTYPE html>
<!-- 文档声明：告诉浏览器这是一个HTML文件 -->
<html lang="en">
    <!-- 语言：
        不写就是中文
        lang="en" :英文
        lang="zh-cn":中文
    -->
<head>
    <meta charset="UTF-8">
    <!-- utf-8：国际通用编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="描述内容">
    <meta name="keywords" content="关键词" >
    <!-- 推广、运营 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页标题</title>
</head>
<body>
    可视区域
    啦啦啦啦啦啦啦啦
    <p>段落</p>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="描述的内容">
        <meta name="keywords" content="关键字">
        <title>网页标题</title>
    </head>
    <body>
        可视区
    </body>
</html>

标题标签

h1~h6
快捷键：

<!-- h${标题$}*6   快速生成6级标题-->

段落标签

<p>这是一个段落</p>

图片标签

<img src="" alt="">
<!-- src 图片地址
     alt  图片加载错误时候的提示
     title  鼠标划到图片上的提
 -->

src ：图片的路径
alt ：代表的是当网比较慢或者图片路径错误导致图片加载失败，如果在alt里面设置有图片说明，这个文字就会出现在裂的图片旁边，更加有利于用户体验。
title ：当鼠标划上图片的时候，会出现跟随文字

a标签（超链接）

<!-- 超链接 -->
         <!-- target 超链接窗口打开方式：
                    -seft:在当前窗口打开
                    -blank:在新窗口打开
 -->
<a href="http://www.baidu.com" target="_blank">百度</a>

target:_blank 在新窗口打开
target:_self 在当前窗口打开

浏览器截全图

blog.csdn.net/llwy1428/ar…

打开目标网站，比如：www.google.cn/
按下键盘上 “F12” 或者 “Ctrl + Shift + L” 打开调试页面
按下键盘上 “Ctrl+Shift+P”
键入内容“ apture full size screenshot ” 后，按下回车
此时会下载图片
打开文件

HTML+CSS基础一