下个学期要开始上JS了，有点紧张，培训之前，抓紧自己先过一遍，so，下面是html的重点只是罗列。

下面是思维导图源文件：http://pic.yuti.site/dwewqewqeererw.xmind。

[toc]

常用浏览器

IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera

浏览器内核：渲染引擎：负责读取网页内容，整理讯息，计算网页的显示方式和显示页面

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
Firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	chrome/opera浏览器内核。Blink其实是WebKit的分支

Html语法规范

1、基本语法

html标签是由尖括号包围的关键词，例如
html标签通常是成对出现的，称之为双标签, 例如和
有些特殊标签必须是单个标签，称之为单标签例如

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

2、标签关系

包含关系 and 并列关系

3、特殊字符

Html 基础

1、Formatting 文本格式化

标签	英文描述	中文描述
OR	Important text	加粗
OR	Emphasized text	斜体
	Marked text	标记
	Smaller text	字体缩小
OR	Deleted text	删除文字
OR	Inserted text	下划线
	Superscript text	上标
	Subscript text	下标

效果图如下：

2、Quotation 引用

标签	英文描述	中文描述
	defines a section that is quoted from another source	进行缩进处理
	defines a short quotation	添加“ ”
	defines an abbreviation or an acronym	缩写
	defines the contact information for the author/owner of a document or an article	定义文档或文章的联系信息
	defines the title of a creative work	定义著作标题
	is used to override the current text direction	字段反过来写

3、Comment 注释

1	<!-- Write your comments here --> ctrl + /

4、colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

在这个链接可以找到你想要的颜色名字：https://www.w3schools.com/colors/colors_names.asp

rgb:

<style>
div {
    background-color: rgb(0, 191, 255);
    color: rgb(255, 255, 255);
}
</style>

hex:

<style>
div {
    background-color: #00bfff;
    color: #ffffff;
}
</style>

5、CSS 样式

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS在html文件中有三种表现方式：

Inline - by using the style attribute inside HTML elements

1	<h1 style="color:blue;">A Blue Heading</h1>

Internal - by using a <style> element in the <head> section

<!DOCTYPE html>
<html>
  <head>
  <style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    p    {color: red;}
  </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

External - by using a <link> element to link to an external CSS file（建议使用）

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
单独另起一个文件，方便管理，后缀是.css

6、Link 链接

HTML links are hyperlinks. You can click on a link and jump to another document.

href：define the link address

target：specifie where to open the linked document.

属性	英文描述	中文描述
_self	Default. Opens the document in the same window/tab as it was clicked	原来窗口打开
_blank	Opens the document in a new window or tab	新的窗口打开
_parent	Opens the document in the parent frame	主要是针对于框架网页中的跳转
_top	Opens the document in the full body of the window	整个窗口一起跳转到新的链接网页

for example

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

an img as a link
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.

visited, unvisited, active, hover

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

7、bookmarks 书签

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Use the id attribute (id=”value“) to define bookmarks in a page
Use the href attribute (href=”#value“) to link to the bookmark

<!DOCTYPE html>
<html>
    <body>
        <p><a href="#C4">Jump to Chapter 4</a></p>

        <h2>Chapter 1</h2>
        <p>This chapter explains ba bla bla</p>

        <h2>Chapter 2</h2>
        <p>This chapter explains ba bla bla</p>

        <h2 id="C4">Chapter 4</h2>
        <p>This chapter explains ba bla bla</p>
    </body>
</html>

8、img 图片

attributes 属性

src - Specifies the path to the image
alt - Specifies an alternate text for the image

background image

<img src="img_chania.jpg" alt="Flowers in Chania">
--------------------------------------------------------
background image
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

tag 标签

img
usemap： is used to create a relationship between the image and the image map

map - defines an image map. （ An image map is an image with clickable areas. ）

area
- shape：define the shape of the clickable area
  - rect - defines a rectangular region （长方形）
  - circle- defines a circular region （圆形）
  - poly- defines a polygonal region （多边形）
  - default - defines the entire region

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

picture - <picture> element allows you to display different pictures for different devices or screen sizes.

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

9、table 表格

tr：行   th：标题   td：内容  table>(tr>th*3)+(tr*2>td*3)
<table style="width:100%">
  <caption>Who are you</caption>
  <tr>
    <th colspan="2">Firstname+Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>


代码	中文解释

表头

行
		标题
		内容
colspan	行合并
rowspan	列合并
border: 1px solid black;	双实线
border-collapse: collapse;	双实线合一
text-align: left;	文字内容居左

10、List 列表

无序（没有数字）：ul li
- list-style-type: disc, circle, square, none
有序（数字或字母）：ol li
- type：”1”, “A”, “a”, “I”, “i”
  1
  2
  3
  <ul style="list-style-type:circle;">
  
  <ol type="A">

11、Block and Inline 块元素和内联元素

Block 属于块元素的标签

Inline 属于内联元素的标签

12、Iframe

The HTML <iframe> tag specifies an inline frame
The src attribute defines the URL of the page to embed
Always include a title attribute (for screen readers)
The height and width attributes specifies the size of the iframe
Use border:none; to remove the border around the iframe

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

13、设备自适应

A responsive web design will automatically adjust for different screen sizes and viewports.

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

14、Layout 布局

15、Form

Input type

Type	Description
	Displays a single-line text input field
	Displays a radio button (for selecting one of many choices) 单选
	Displays a checkbox (for selecting zero or more of many choices) 多选
	Displays a submit button (for submitting the form)
	Displays a clickable button

for example

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
  <input type="submit" value="Submit">
</form>

action：The action attribute defines the action to be performed when the form is submitted. 表格内容提交后展示的页面
target：The target attribute specifies where to display the response that is received after submitting the form.
- _blank
- _self
- _parent
- _top
method：The method attribute specifies the HTTP method to be used when submitting the form data.
- Always use POST if the form data contains sensitive or personal information! （POST更安全）
autocomplete：If is on, the browser automatically complete values based on values that the user has entered before. （输入框有记忆功能）

Form Elements

Tag	Description
	Defines an HTML form for user input
	Defines an input control
	Defines a multiline input control (text area)
	Defines a label for an element
	Groups related elements in a form
	Defines a caption for a element
	Defines a drop-down list
	Defines a group of related options in a drop-down list
	Defines an option in a drop-down list （下拉列表的选项内容）
	Defines a clickable button
	Specifies a list of pre-defined options for input controls
	Defines the result of a calculation （计算结果输出）

前端系统学习之html

前端系统学习之html

常用浏览器

Html语法规范

1、基本语法

2、标签关系

3、特殊字符

Html 基础

1、Formatting 文本格式化

2、Quotation 引用

3、Comment 注释

4、colors

rgb:

hex:

5、CSS 样式

6、Link 链接

href：define the link address

target：specifie where to open the linked document.

for example

visited, unvisited, active, hover

7、bookmarks 书签

8、img 图片

attributes 属性

tag 标签

9、table 表格

10、List 列表

11、Block and Inline 块元素和内联元素

Block 属于块元素的标签

Inline 属于内联元素的标签

12、Iframe

13、设备自适应

14、Layout 布局

15、Form

Input type

for example

Form Elements