Learn HTML CSS (1)
1: What are HTML and CSS?
1.HTML is Hypertext Markup Language, a language used to create web pages. It is composed of tags.
2. CSS is the abbreviation of Cascading Style Sheets, and its main function is to beautify the page.
For specific learning, please refer to the documentation: Rookie Tutorial , w3school
2: HTML tags
It is divided into two types: double label and single label. Double label can be divided into two categories: inclusion relationship and parallel relationship. Note: HTML tags must be followed by .html as the suffix.
Three: Character set
1. A character set is a collection of multiple characters.
2. <head>Within the tag, you can <meta> specify which character encoding the HTML document should use through the charset attribute of the tag.
3. <meta charset=" UTF-8" />
4. Commonly used values of charset are: GB2312, BIG5, GBK and UTF-8. UTF-8 is also called Universal Code, which basically includes characters needed to be used by all countries in the world. 5. Note: The above
syntax It is code that must be written, otherwise it may cause garbled code. Under normal circumstances, use "UTF-8" encoding uniformly and try to write it as standard "UTF-8" instead of "utf8" or "UTF8".
Four: Commonly used tags
| Label | meaning |
|---|---|
<h1> - <h6> |
title tag |
<p></p> |
paragraph tags |
<br /> |
newline tag |
<strong></strong> |
Bold font |
<em></em> |
font italic |
<del></del> |
font strikethrough |
<ins></ins> |
Font underline |
<div></div> |
It is a double label without semantics |
<img src="URL" title="" alt="" border="" /> |
image tag |
<a href="" target=""></a> |
Hyperlink->External link |
<a href="" ></a> |
Hyperlink->Internal link |
<a href="#" ></a> |
Hyperlink->Empty link |
<a href="#Url" ></a> <h1 id="Url" ></h1> |
Hyperlink->Anchor link can quickly locate a certain location on the page |
/   |
Special characters->space characters (most commonly used) |
<ul><li></li></ul> |
unordered list |
<ol><li></li></ol> |
ordered list |
<dl> <dt>名词1</dt> <dd>名词1解释1</dd></dl> |
custom list |
<thead></thead> <tbody></tbody> |
Table structure tag |
Thead must have
<tr>a label inside it. Usually located on the first line.
// 表格标签 tr表示行 td表示表格中的单元格
<table>
<tr>
<td>单元格内的文字</td>
</tr>
...
</table>
// 表头单元格标签
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
attributes in table
Merge cells: merge rowspan across rows and merge colspan across columns
. Implementation steps:
- First determine what the merger is
- Find the merged cells and write the merge method = the number of merged cells
- Delete redundant cells
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Five: Form
In HTML tags, tags are used to define form fields to collect and transmit user information.
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>
<form>
// input表单元素 type可以指定不同的类型 name名称 value值
<input type=“text " name=“username” >
// select 下拉框
<select name=“jiguan”>
<option>北京</option>
</select>
// textarea 多行文本输入的控件 rows cols控制最大多少行和列
<textarea name= "message" rows="3" cols="20">
</textarea>
</form>
Six: The role of css selector
All styles are included in
<style>tags, indicating style sheets.
The selector selects different tags according to different needs. Can be divided into basic selectors and compound selectors
Six: css basic selector
1.Tag selector:It uses HTML tag names as selectors and sorts them by tag names 为页面中某一类标签指定统一的 CSS 样式.
标签选择器{
属性：属性值
...
}
2.Class selector:Select one or several tags individually. Tip: style point definition structure class (class) call
<div class="类名">1111</div>
.类名 {
属性1: 属性值1;
...
}
注意： 1.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。 2.类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。 3.可以理解为给这个标签起了一个名字，来表示。 4.长名称或词组可以使用中横线来为选择器命名。 5.不要使用纯数字、中文等命名，尽量使用英文字母来表示。 6.命名要有意义，尽量使别人一眼就知道这个类名的目的。
3.Multiple class name selector:To specify multiple class names for a label
<div class="red font20">2222</div>
注意：1.在标签class 属性中写 多个类名 2.多个类名中间必须用空格分开 3.这个标签就可以分别具有这些类名的样式
4.id selector:The HTML element uses the id attribute to set the id selector, and the id selector in CSS is defined with "#".
#id名 {
属性1: 属性值1;
...
}
注意：id 属性只能在每个 HTML 文档中出现一次 具有唯一性
5.Wildcard selector:Wildcard selectors do not need to be called, and styles are automatically applied to all elements.
// 清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}
Seven: css compound selector
1. Concept: In CSS, selectors can be divided into 基础选择器and according to their type 复合选择器. Composite selectors are built on basic selectors and are formed by combining basic selectors. Compound selectors are composed of two or more basic selectors, combined in different ways, and can select target elements (labels) more accurately and efficiently. Commonly used
compound selectors include: descendant selectors and sub-selectors. , union selector, pseudo-class selector, etc.
2. Descendant selector (important)☆☆☆
(1) Concept: You can select child elements within the parent element
(2)Use:
元素1 元素2 {
样式声明
}
(3)Explanation:
- Element 1 and element 2 are separated by a space.
- Element 1 is the parent, element 2 is the child, and element 2 is ultimately selected.
- Element 2 can be a son, grandson, etc., as long as it is a descendant of element 1
- Element 1 and Element 2 can be any basic selector
3. Sub-selector (important)☆☆☆
(1) Concept: Only the nearest child element of an element can be selected
(2)Use:
元素1 > 元素2 {
样式声明
}
(3)Explanation:
- Element 1 and element 2 are separated by a greater than sign.
- Element 1 is the parent, element 2 is the child, and element 2 is ultimately selected.
- Element 2 must be a biological son, and his grandchildren, great-grandchildren, etc. are not under his control. You can also call him a biological son selector
4. Union selector (important)☆☆☆
(1) Concept: You can select multiple groups of tags and define the same style for them at the same time, connected by English commas (,)
(2)Use:
元素1,元素2 {
样式声明
}
(3)Explanation:
- Element 1 and element 2 are separated by commas.
- Comma can be understood as meaning sum
- Union selectors are often used for collective declarations
5. Pseudo-class selector
(1) Concept: used to add special effects to certain selectors
(2) Usage: The biggest feature of writing pseudo-class selectors is that they are expressed by colons (:), such as:hover, :first-child
6. Link pseudo-class selectors
(1) Concept: Add special effects to links
(2) Usage: The biggest feature of writing pseudo-class selectors is that they are expressed by colons (:)
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
(3) Note: In order to ensure effectiveness, please declare in the order of LVHA: link-:visited-:hover-:active.
Because a link has a default style in the browser, we need to specify a separate style for the link in actual work.
7.:focus pseudo-class selector
(1) Concept: Used to select the form element that receives focus
(2)Usage: Generally, form elements can be obtained
Eight: css font attributes
1. Font size: font-size
2. Font thickness: font-weight
3. Font style: font-style
4. Font: font-family
Nine: css text attributes
1. Text color: color --> can be hexadecimal or RGB or a predefined color
2. Text alignment: text-align: left / right / center
3. Modify text: text-decoration
4. Text abbreviation Enter: text-indent
5. Line spacing: line-height (formed by the upper spacing text height and lower spacing, it will only change the upper spacing and lower spacing)
6. Wait...
Ten: CSS style
1. Inline style sheet (inline style)
The CSS style is set in the style attribute inside the element tag. Suitable for modifying simple styles
eg:
<div style="color: red; font-size: 12px;">11111</div>
2. Internal style sheet (embedded)
Written inside the html page. It extracts all the CSS code and puts it into a separate
<style>tag.
<style>
div {
color: red;
font-size: 12px;
}
</style>
3. External style sheet (linked)
Introducing external style sheets is divided into two steps:
- Create a new style file with the suffix name .css and put all CSS code into this file.
- In the HTML page, use
<link>the tag to introduce this file.
<link rel="stylesheet" href="css文件路径">