Home > Article > Web Front-end > A must-read, a systematic introduction to the basic knowledge points of front-end HTML and CSS
Front-end
1 What is the front-end
The front-end is the front-end part of the website, which runs on PC, mobile and other browsers and displays the web pages for users to browse. With the development of Internet technology, the application of HTML5, CSS3, and front-end frameworks, cross-platform responsive web design can adapt to various screen resolutions, and perfect dynamic design can bring users a very high user experience.
Front-end technology is generally divided into front-end design and front-end development. Front-end design can generally be understood as the visual design of the website, and front-end development is the front-end code implementation of the website, including basic HTML, CSS and JavaScript
2 Technology stack for front-end development
HTML
Hyper Text Markup Language
"Hypertext ” means that the page can contain pictures, links, and even music, programs and other non-text elements
Responsible for completing the structure of the page
CSS
Cascading Style Sheet
Responsible for the style design, style and beauty of the page
JavaScript
Browser scripting language, you can write programs that run on the browser
Proper programming language
Responsible for writing page special effects, calling the browser's API (BOM), operating to change the page content (DOM), obtaining data from the backend (Ajax), rendering the page, etc.
jQuery is a library of JavaScript
Vue, Angular, React, etc. are JavaScript frameworks
HTML5 basics
1.HTML
1.1 What is HTML
HTML is a markup language used to make web pages
* 双标签(成对):<标签名> 可以加内容标签名> 如:`
* 单标签(不成对):<标签名/> 两个单标签内不可加内容 如: `
` , `
* 标签大小写都可以,推荐使用小写
* 对与HTML标签来将,最重要的是语义
2.2 HTML标签属性
HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。
标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
语法格式如下:
<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
标签名>
单标签
双标签
2.3 HTML代码格式
任何回车或空格在源代码中都是不起作用,一般标签嵌套用缩进所以在编写HTML代码时,都可以使用回车或者空格进行代码排版,这样可以使代码清晰,也便于团队合作。必须保持严格的缩进规则,以Tab键为准。
2.4 HTML 注释
可以在里面写单行注释,也可以写多行
注释里的!符号和-- 要连起来不能空格
2.5 HTML实体
注意:用来表示特殊符号,跟转义字符有像
&nbsq; 表示一个空格
<表示特殊符号 <
> 表示符号 <
©表示版权符号 ©上海公安 版权号333333455
¥表示人民币符号 ¥1000
&表示实体本身& 如果是空格则就显示& 如果是符号 则&符号
3 HTML常用标签
文档声明
3.1 主体结构
此元素可告知浏览器其自身是一个 HTML 文档。
3.2HEAD头部标签
写在最上面,因为下面有输入字符,指定网页的元信息可指定字符编码,关键字,描述信息属性:charset , name ,content
指定编码
导入css 文档,或者指定的网页图标 属性 src , type ,rel
从文件导入css
<script></script>标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
<script></p> <p>alert('OK')</p> <p></script>
3.3 Formatting tags
< /p> Paragraph
Line break
CSS basic syntax
Use CSS
Selector{
CSS property: value;
CSS property: value;
}
Selector{Attribute:value;Attribute:value}
Comments
/* */
CSS length unit
px pixels
em Multiples of the default size
Percent Default size refers to
cm
mm
pt
CSS color unit
colorName: red/green/bue/purple/orange/yellow/pink/skyblue
rgb number rgb(34,45,23) rgb(20%, 57%, 100%)
16 hexadecimal #abcdef #f90 #ccc
5 CSS selector
#tag name selector
tagName {
}
# Class Name
.className {
}
#ID Selector
#idName {
}
# Global selector
* {
}
# Combined descendant elements
Selector Selector .list li
# Combination of child elements
Selector>Selector .list>li
# Group
Selector, selector, selector h1, h2,p,.list
# Multiple conditions .item.frist_item
p.item
6 Selector priority
ID > CLASS > ; tagName > ##font-family font-family: "Arial", "Helvetica", "宋体", sans-serif; or serif font serif
font-size font size 10px 1.3em can be used
font-weight normal/bold font width default and bold
Related videos:
The above is the detailed content of A must-read, a systematic introduction to the basic knowledge points of front-end HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!