Explain HTML and CSS (super detailed)
提示：以下是我的一些经验之谈，下面案例可供参考
1. Initial HTML and CSS
1. The development history of html
HTML 1.0 Hypertext Markup Language (First Edition) - published as an Internet Engineering Task Force (IETF) Working Draft in June 1993 (not a standard)
HTML 2.0 - Published as RFC 1866 in November 1995, declared obsolete after RFC 2854 was published in June 2000
HTML 3.2 – January 14, 1996, W3C Recommendation
HTML 4.0 – December 18, 1997, W3C Recommendation
HTML 4.0 (minor improvements) - December 24, 1999, W3C Recommendation
XHTML 1.0 – Published January 26, 2000 as a W3C Recommendation, revised and republished August 1, 2002
XHTML 1.1 – Released May 31, 2001
HTML5.0 On October 28, 2014, the World Wide Web Consortium announced that after nearly 8 years of hard work, the standard specification was finally formulated
Example: pandas is a NumPy-based tool created to solve data analysis tasks.
2.html
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言(标记语言是一套标记标签)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
3.css
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
Two, HTML
1. Basic framework
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面名字</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
< !DOCTYPE html > is declared as an HTML5 document.
The < html > element is the root element of an HTML page.
The < head > element contains the meta data of the document, such as < meta charset="utf-8" > defines the encoding format of the web page as utf -8.
The <title> element describes the title of the document
The <body> element contains the visible page content The
<h1> element defines a heading
The <p> element defines a paragraph
2. HTML5 commonly used tags and attributes
| Label | describe |
|---|---|
| Base | |
| < p > | define a paragraph |
| < br > | define simple newline |
| < hr > | define horizontal line |
| < !–…-- > | define a comment |
| Format | |
| < b > | define bold text |
| < i > | define italic text |
| < u > | Define underlined text |
| < em > | define emphasized text |
| < del > | Define the text to be deleted |
| < time > | define a time/date |
| < sub > | Define subscript text |
| < sup > | Define superscripted text |
| form | |
| < form > | Define an HTML form for user input |
| < input > | define an input control |
| < label > | Defines the annotation of the input element |
| < button > | define button |
| < select > | Define a selection list (drop-down list) |
| < optgroup > | Defines combinations of related options in a select list |
| < option > | Define options in a select list |
| < datalist > | Specifies a list of possible options for the input element |
| image | |
| < img > | define image |
| < map > | Define an image map |
| < area > | Defines the region inside the image map |
| Audio/Video | |
| < audio > | Define sounds, such as music or other audio streams |
| < video> | define an audio or video |
| < source > | A media resource that defines the media element ( and ) |
| < track > | Define external text tracks for media ( and ) elements |
| Link | |
| < a > | define a link |
| < link > | Define a document's relationship to an external resource |
| < main > | Define the body of the document |
| < nav > | Define navigation links |
| the list | |
| < ul > | define an unordered list |
| < ol > | define an ordered list |
| <li> | define a list item |
| sheet | |
| < table > | define a table |
| < caption > | Define the table title |
| < th > | Define header cells in tables |
| < tr > | define the rows in the table |
| < td > | 定义表格中的单元 |
| < thead > | 定义表格中的表头内容 |
| < tbody > | 定义表格中的主体内容 |
| < tfoot > | 定义表格中的表注内容（脚注） |
| 样式/节 | |
| < style > | 定义文档的样式信息 |
| < div > | 定义文档中的节 |
| < span > | 定义文档中的节 |
| < header > | 定义一个文档头部部分 |
| < footer > | 定义一个文档底部 |
| < section > | 定义了文档的某个区域 |
| < article > | 定义一个文章内容 |
| < aside > | 定义其所处内容之外的内容 |
| 程序 | |
| < script > | 定义客户端脚本 |
Html的一些全局属性
| 全局属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditableNew | 规定是否可编辑元素的内容。 |
| contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-* | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggable | 指定某个元素是否可以拖动 |
| dropzone | 指定是否将数据复制，移动，或链接，或删除 |
| hidden | hidden 属性规定对元素进行隐藏 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码 |
| spellcheck | 检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translate | 指定是否一个元素的值在页面载入时是否需要翻译 |
三、CSS
1.css的使用
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
p{
color: red;
/* 设置字体颜色为红色 */
text-align: center;
/* 设置文本对齐方式为居中 */
}
2.css选择器
大家可以看下面这个选择器参考表
| 选择器 | 示例 |
|---|---|
| 类型选择器 | h1 { } |
| 通配选择器 | * { } |
| 类选择器 | .box { } |
| ID选择器 | #unique { } |
| 标签属性选择器 | a[title] { } |
| 伪类选择器 | p:first-child { } |
| Pseudo-element selector | p::first-line { } |
| descendant selector | article p |
| child selector | article > p |
| Adjacent Sibling Selector | h1 + p |
| Generic sibling selector | h1 ~ p |
- Type, Class, and ID Selectors
This selector group, the first one refers to all HTML elements < h1 >.
h1 {
}
It also contains a class selector:
.box {
}
Or, an id selector:
#unique {
}
- Tag Attribute Selectors
This set of selectors selects elements in different ways based on the presence of a tag attribute on an element:
a[title] {
}
Or select based on the presence or absence of a tag attribute with a specific value:
a[href="https://www.baidu.com"] {
}
- Pseudo-Classes and Pseudo-Elements
This set of selectors contains pseudo-classes used to style specific states of an element. For example: the hover pseudo-class selects an element when the mouse pointer hovers over it:
a:hover {
}
It can also contain pseudo-elements, selecting parts of an element rather than the element itself. For example, ::first-line will select the first line of an element (< p > in the following case), similar to < span > wrapped outside the first formatted line, and then select this < span >.
p::first-line {
}
- Operators
The final set of selectors can be combined with other selectors for more complex selection of elements. The following example uses the operator (>) to select the first child of the <div> element.
div > p {
}
Summarize
The above is mainly a relatively basic document that I think is compiled for the cuties who have just stepped into the front end. You can refer to it, and it will continue to be updated in the future~~