First, acquaintance html

<! DOCTYPE> 1, document type
usage:

<!DOCTYPE>

Role:
<! DOCTYPE> declaration as a document of the front position before in the tag that tells the browser class which regulate the use of HTML
2, page language lang

<html lang="en">//指定语言种类

The two most common:
(1), defined as the language to English EN
(2), zh-CN Chinese language is defined as
use:
(1) to set a different language format according css lang attribute or font
(2 ), tells the search engine to do accurately identify
(3), so grammar checkers do speech recognition
(4), translation tools do help identify the
3 character set (character set)

<meta charset="UTF-8"/>

UTF-8 is the most common character set encoding
usage:

<head>
        <meta charset="UTF-8">
<head/>

4, semantic html tags
so-called semantic tags, meaning the meaning of the label
purposes:
(1) easy to read and maintain code,
(2) while allowing the browser or web crawler can be well resolved in order to better analysis the contents
(3) using semantic tags would be better search engine optimization

Two, HTML tags used

1, the label layout

Css layout and major labels with the use of display labels page structure, page layout is the most commonly used labels
(1) Title Tag h (memorize)
role: to make pages more semantic, highlight the title, add a caption text becomes too bold, font size will become very large. Note that a line can only put a title
basic format is as follows:

<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>

(2) paragraph tag p (memorize)
the abbreviation: paragraph
role semantics: segment landing page displayed in the text

<p>段落</p>

(3) horizontal tab hr (horizontal)
effect semantics: forming a horizontal line (dividing line) in the page

<hr />单标签

(4) wrapping the label br (break) (memorize)
play a role wrap

<br />单标签

(5) div (division partition) and span (separate) tag (Key)

<div > 内容1</div>
<div > 内容2</div>//布局用，第一行显示内容1第二行显示内容2

<span>内容1</span>
<span>内容2</span>//第一行显示内容1和内容2，用空格隔开

Typesetting tag summary

Here Insert Picture Description

2, text formatting tags

We often need to set the text bold, italic, underlined in the text, then need to use text formatting tags in the html of the text displayed in a special way.
Here Insert Picture Description

3, the image tag img (image emphasis)

Role: display the image in the page
syntax:

<imag src="图像URL"  />//src表示图片的路径

<Imag /> tag attributes

Here Insert Picture Description

Demo code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image演示代码</title>
</head>
<body>
    <h3>显示文件中的一张图片：</h3>
    <img src="E:\web前端\马云福.jpg" />
    <h3>带有alt替换图片：</h3>
    <img src="E:\web前端\马云福2.jpg" alt="马云的福" />
    <h3>带有title提示的图片（鼠标放在上面，会显示提示）：</h3>
    <img src="E:\web前端\马云福.jpg" alt="马云的福 " title="马云写的福气" />
    <h3>放大的图片：</h3>
    <img src="E:\web前端\马云福.jpg" width="800" />
    <h3>带有边框的图片：</h3>
    <img src="E:\web前端\马云福.jpg" width="800" border="10" />
</body>
</body>
</html>

img tag summary

(1) a plurality of tags can have attributes, img src = "Path" must EDITORIAL
(2) regardless of the order between the properties, the intermediate separated by a space
(3) key = "value" is written as

4, the link tag (Key)

English abbreviations: anchor
syntax:

<a href="跳转目标"  target=“目标窗口的弹出方式”>文本或图像</a>

Here Insert Picture Description

Note:
(1) external links need to add http://www.baidu.com
(2) Internal link Internal link directly to the page name, such as <a href="index.html"> home, indicates that the link temporarily to an empty link
if the link target was not identified, usually href (3) link tags attribute is defined as "#" (i.e. href = "#"), it indicates that the link is a temporarily empty link.
(4) not only can create a text hyperlink on the page in a variety of page elements, such as pictures, tables, etc. can also add a hyperlink
Code Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试外部链接</title>
</head>
<body>
    <h4>外部链接</h4>
    <a href="http://baidu.com">百度一下</a>
    <h4>内部链接</h4>
    <a href="04-image属性.html">福气图</a>
        <h4>空链接</h4>
    <a href="#">空链接</a>
    <h4>图片链接</h4>
    <a href="http://baidu.com" target="_blank"><img src="E:\web前端\马云福.jpg"> </a>
</body>
</html>

Heavy and difficult:
（1）链接标签中href=" "必须要写的，表示跳转的目的地
（2）在新窗口中打开一个新的链接网页用 target="_blank"，系统默认是"_self"表示在当前窗口打开链接

5，注释标签

作用：起到注释的作用，是不会显示到网页中去的

语法格式：

<!--注释语句-->

快捷键：ctr+/或者ctr+shift+/

团队约定（规范）：

<--注释语句-->
<div></div>

6，路径（重点难点）

相对路径：

（1）概念：以引用文件之网页所在的位置为参考基础，而建立的目录路径

Here Insert Picture Description
注意：
下一级路径要用 /（正斜杠）
上一级路径要用../“”(..正斜杠)

绝对路径：

概念：

绝对路径以web为站点根目录为参考基础的目录路径，之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

(1)电脑文件夹中：用(反斜杠表示一层一层路径)
例如：d:\软件下载\常用软件
(2)在网上的图片也有绝对地址，鼠标点击右键,复制地址，就是绝对地址

三，今日总结：

Here Insert Picture Description

综合实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>除夕节日</h1>
<a href="#时间"> <h4>1，除夕节的时间</h4></a>
<a href="#由来"> <h4>2，除夕节的由来</h4></a>
<a href="#风俗"> <h4>3，除夕节的风俗</h4></a>
<h4 id="时间">除夕节的时间</h4>
<p>除夕，为岁末的最后一天夜晚。岁末的最后一天称为“岁除”，意为旧岁至此而除，另换新岁。除，即去除之意；夕，指夜晚。“除夕”是岁除之夜的意思，又称大年夜、除夕夜、除夜等，时值年尾的最后一个晚上。除夕是除旧布新、阖家团圆、祭祀祖先的日子，与清明节、七月半、重阳节是中国民间传统的祭祖大节。除夕，在国人心中是具有特殊意义的，这个年尾最重要的日子，漂泊再远的游子也是要赶着回家去和家人团聚，在爆竹声中辞旧岁，烟花满天迎新春。</p>
<img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1117850635,4148742208&fm=58"/>
<h4 id="由来">除夕节的由来</h4>
<p>在童话传说中古代有一只四角四足的恶兽——夕，因冬季大雪覆盖而短缺了食物常到附近的村庄里去找吃的，因其身体庞大、脾气暴躁、凶猛异常，给村民带来了很大的灾难。每到腊月底，人们都整理衣物扶老携幼，到附近的竹林里躲避夕。</p>
<p>这一年，村里的人们在收拾东西逃走的路途中遇到一位年纪约七八岁的孩子，饿倒在路旁。有位好心的老婆婆将孩子救醒，并要这孩子一起上山躲避恶兽——夕，这个聪明的孩子便与老婆婆一起跟着村子里的人来到了村后的竹林里。由于冬季在竹林里寒气逼人，大家冷得纷纷伐竹盖房、烧火取暖。这个被老婆婆救来的孩子就好奇地问大家：我们这竹林离村子那么近，就不怕夕会来到这里吗？有位老人回答他说：“我年小的时候就随乡亲们来这里躲避夕，雪很大的那几年因为它饿极了也追来过，可是它每次都看到乡亲们在这竹林里伐竹就匆匆忙忙的走了。”这个孩子想了想告诉大家：“我有办法除掉‘夕’让大家从今以后不用每到腊月里就出来逃难。”大家听后都非常高兴，纷纷问该怎么办？这个聪明的孩子告诉大家：多砍一些竹节带着，今夜全村人都可以回家！在你们各家的门外挂一块红布，就好了，等到明天天亮之后夕就再也不会来了。乡亲们半信半疑的听着这个孩子的话，由村里的老者带着各自回了自己的家。</p>
<p>很快入夜了，村民们由于害怕“夕”会来没有人敢睡觉，除都在自家的门外悬挂了红布条之外，就来到村中间的空地上，守着一些从竹林里带回来的一些碎的竹节。天气寒冷大家点了火堆取暖，饿了就拿些吃的出来……子夜，便听到一声震天的巨吼，大家恐惧的缩做一团。这时那个聪明的孩子突然间站出来告诉大家说：“我去把他引来，然后大家就往火堆里扔我们守了一夜的碎竹节。”</p>
<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D360%2C280%2C50/sign=7a167bdab23eb1354492e4fbc0239be5/cb8065380cd791236dc1c346a3345982b2b780db.jpg" />
<h4 id="风俗">除夕节的风俗</h4>
<p>一、年夜饭 除夕这一天对华人来说是极为重要的。这一天人们准备辞旧迎新,吃团圆饭。家庭是华人社会的基石,一年一度的团圆饭充分表现出中华族家庭成员的互敬互爱,这种互敬互爱使一家人之间的关系更为紧密。...
</p>
<p>二、贴年红 年红,是春联、门神、窗花、年画、福字等过年时所贴的红色喜庆元素统称。过年贴年红(挥春),是中国民间由来已久的风俗,寄托了人们对幸福生活的向往,对美好未来的祝愿。 春联 根据《玉烛宝典...</p>
<p>三、燃爆竹 中国民间有“开门爆竹”一说。即在新的一年到来之际,家家户户开门的第一件事就是燃放爆竹,以哔哔叭叭的爆竹声除旧迎新。爆竹是中国特产,亦称“爆仗”、“炮仗”,唐代时写作“爆竿”,南方各地又...</p>
<p>四、祭祖 古时,这种礼俗很盛。因各地礼俗的不同,祭祖形式也各异,有的到野外瞻拜祖墓,有的到宗祠拜祖,而大多在家中将祖先牌位依次摆在正厅,陈列供品,然后祭拜者按长幼的顺序上香跪拜。古人祭祖,多半做...</p>
<p>五、守岁 除夕守岁是年俗活动之一,守岁之俗由来已久。守岁的民俗主要表现为所有房子都点燃岁火,合家欢聚,并守着“岁火”不让熄灭,等着辞旧迎新的时刻,迎接新年到来。</p>
<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=a22c5a825c3d26972ad30f5f65fab24f/e850352ac65c10385183a98abf119313b17e89fc.jpg" /><tr/>
<h4>更多详情请百度：</h4>
<a href="http://www.baidu.com" target="_blank"> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1244367615,2028532212&fm=26&gp=0.jpg" width="400" />
</body>
</html>

四，拓展阅读

1,锚点定位（难点）:

（1）作用：通过创建锚点链接，用户能够快速定位到目标内容
（2）锚点的创建：分为两步

1）使用相应的id名标注跳转目标的位置（找目标）
2) 创建链接文本（被点击的文本）

示意图：

Here Insert Picture Description

2,base标签：

（1）作用：使得所有网页链接都可以从新页面中打开
（2）语法：写在head语句之间

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <base target="_blank" />
</head>
<body>
    <a href="http://www.baidu.com"> 百度</a>
    <a href="http://www.163.com"> 网易 </a>
    <a href="http://www.sohu.com"> 搜狐</a>


</body>
</html>

3，预格式化文本pre标签

< pre> 标签可以定义预格式的文本，即是你写的文字中的空格和换行符都会在网页中原封不动地显示出来

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<pre>
      静夜思
           --李白
    窗前明月光
    疑是地上霜
    举头望明月
    低头思故乡
</pre>
    
</body>
</html>

4,特殊字符

(1) a space character: & nbsp;
(2) <: & lt;
(. 3)>: & gt;

Here Insert Picture Description

web front end 2020/1/17 study notes

First, acquaintance html

Two, HTML tags used

1, the label layout

Typesetting tag summary

2, text formatting tags

3, the image tag img (image emphasis)

img tag summary

4, the link tag (Key)

5，注释标签

作用：起到注释的作用，是不会显示到网页中去的

语法格式：

快捷键：ctr+/或者ctr+shift+/

团队约定（规范）：

6，路径（重点难点）

相对路径：

（1）概念：以引用文件之网页所在的位置为参考基础，而建立的目录路径

绝对路径：

概念：

绝对路径以web为站点根目录为参考基础的目录路径，之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

(1)电脑文件夹中：用(反斜杠表示一层一层路径)
例如：d:\软件下载\常用软件
(2)在网上的图片也有绝对地址，鼠标点击右键,复制地址，就是绝对地址

三，今日总结：

综合实例：

四，拓展阅读

1,锚点定位（难点）:

（1）作用：通过创建锚点链接，用户能够快速定位到目标内容
（2）锚点的创建：分为两步

1）使用相应的id名标注跳转目标的位置（找目标）
2) 创建链接文本（被点击的文本）

示意图：

2,base标签：

（1）作用：使得所有网页链接都可以从新页面中打开
（2）语法：写在head语句之间

3，预格式化文本pre标签

< pre> 标签可以定义预格式的文本，即是你写的文字中的空格和换行符都会在网页中原封不动地显示出来

4,特殊字符

(1) a space character: & nbsp;
(2) <: & lt;
(. 3)>: & gt;

Guess you like

web front end 2020/1/17 study notes

First, acquaintance html

Two, HTML tags used

1, the label layout

Typesetting tag summary

2, text formatting tags

3, the image tag img (image emphasis)

img tag summary

4, the link tag (Key)

5，注释标签

作用：起到注释的作用，是不会显示到网页中去的

语法格式：

快捷键：ctr+/或者ctr+shift+/

团队约定（规范）：

6，路径（重点 难点）

相对路径：

（1）概念：以引用文件之网页所在的位置为参考基础，而建立的目录路径

绝对路径：

概念： 绝对路径以web为站点根目录为参考基础的目录路径，之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

(1)电脑文件夹中：用(反斜杠表示一层一层路径) 例如：d:\软件下载\常用软件 (2)在网上的图片也有绝对地址，鼠标点击右键,复制地址，就是绝对地址

三，今日总结：

综合实例：

四，拓展阅读

1,锚点定位（难点）:

（1）作用：通过创建锚点链接，用户能够快速定位到目标内容（2）锚点的创建：分为两步

1）使用相应的id名标注跳转目标的位置（找目标） 2) 创建链接文本（被点击的文本）

示意图：

2,base标签：

（1）作用：使得所有网页链接都可以从新页面中打开 （2）语法： 写在head语句之间

3，预格式化文本pre标签

< pre> 标签可以定义预格式的文本，即是你写的文字中的空格和换行符都会在网页中原封不动地显示出来

4,特殊字符

(1) a space character: & nbsp; (2) <: & lt; (. 3)>: & gt;

Guess you like

6，路径（重点难点）

概念：

绝对路径以web为站点根目录为参考基础的目录路径，之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

(1)电脑文件夹中：用(反斜杠表示一层一层路径)
例如：d:\软件下载\常用软件
(2)在网上的图片也有绝对地址，鼠标点击右键,复制地址，就是绝对地址

（1）作用：通过创建锚点链接，用户能够快速定位到目标内容
（2）锚点的创建：分为两步

1）使用相应的id名标注跳转目标的位置（找目标）
2) 创建链接文本（被点击的文本）

（1）作用：使得所有网页链接都可以从新页面中打开
（2）语法：写在head语句之间

(1) a space character: & nbsp;
(2) <: & lt;
(. 3)>: & gt;