Front-end HTML&CSS study notes 1 (based on Shang Silicon Valley teaching video)

Episode 1 (Introduction to the front end)

Note: HTTP is a public protocol and is not very secure. If you encounter a web page that uses this protocol and the operation involves password privacy and other content, you must be cautious!

Episode 2 (Introduction to Learning Content)

Episode 3 (Introduction to HTML)

HTML (Hypertext Markup Language) hypertext markup language, hypertext refers to hyperlinks, and markup refers to tags.
Web page standard format

1.<html></html>与<head></head><body></body>为父标签与子标签的关系
2.<head></head>与<title></title>为父标签与子标签的关系
3.<html></html>与<title></title>为祖先标签与后代标签的关系
4.网页的所有可见内容都应该写在<body></body>中

下图为标准格式

Episode 4 (HTML comments)


Episode 5 (Attributes of Labels)
For example: <font color="green" size="7">此处是被设置属性的标签</font>

Note: It is not recommended to set labels through attributes, it is recommended to use css

Episode 6 (Document Declaration)
There are multiple versions of HTML in widespread use. In order to tell the browser which version we are using, we need to add a document declaration.
HTML5的文档声明最简洁为<!doctype html>

Episode 7 (Introduction to the Hexadecimal System)
Readers will understand on their own

Episode 8 (garbled code problem)

The root cause of garbled characters is that encoding and decoding use different character sets.
The Chinese system browser uses the GB2312 character set by default when decoding. To avoid garbled characters, there are three solutions:

1.编码时采用GB2312
2.若编码时不是采用GB2312，则在浏览器中键盘点击alt，点击查看->编码->unicode
3.以上两种都不建议使用，建议直接在代码中使用 <meta />自结束标签，告诉浏览器我们所使用的编码字符集，例如<meta charset="utf-8" />

Episode 9 (common tags)

title tag<h1></h1>

1.HTML中共有六级标题，显示效果上h1~h6，逐级减小，h1最重要，表示网页中的主要内容
2.对搜索引擎来说，h1的重要性仅次于title，h1中的内容会影响到网页在搜索引擎中的排名

paragraph tags<p></p>

1.使用段落标签表示一个段落，其中的文字默认会独占一行，并且段落与段落之间会有一定的间距
2.在HTML中，字符之间有再多的空格，浏览器也只会当成一个空格来解析，换行也当成空格解析

line break label <br />
horizontal line label<hr />

Episode 10 (Entities)
Entities are actually similar to escape characters

< 用 &lt; 表示
> 用 &gt; 表示
空格 用&nbsp; 表示
版权声明 用&copy; 表示

Front-end HTML&CSS study notes 1 (based on Shang Silicon Valley teaching video)

Guess you like