下个学期要开始上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、基本语法

  1. html标签是由尖括号包围的关键词,例如
  2. html标签通常是成对出现的,称之为双标签, 例如和
  3. 有些特殊标签必须是单个标签,称之为单标签例如
1
2
3
4
5
6
7
8
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:
1
2
3
4
5
6
<style>
div {
background-color: rgb(0, 191, 255);
color: rgb(255, 255, 255);
}
</style>
hex:
1
2
3
4
5
6
<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

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!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(建议使用)

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!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

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

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
1
2
3
4
5
6
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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
    1
    2
    3
    4
    5
    6
    7
    <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.

    1
    2
    3
    4
    5
    <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 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
2
3
4
5
<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
1
2
3
4
5
6
7
<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 (计算结果输出)