What is a website
The website is composed of many web pages.
Website construction process:
1. Domain name (URL)
2. Lease space (server)?
3. Website construction (1. Determine website theme, 2. Collect information, 3. Plan website, 4. Make page)
4. Website promotion
5. Website maintenance
2. What is a web page?
Web standards (composition of web pages): structure (html) + performance (css) + behavior (js)
1. HTML: implement web page structure (web page content)
2. CSS: implement web page decoration and performance
3. JS: implement is Interactive effect, can make the page move
3. History of HTML
html Hyper Text Markup Language (Hyper Text Markup Language) www descriptive language of the World Wide Web, hyper text refers to the web page contains text, pictures, input boxes, audio and video, etc., so it is not pure text, but hyper text; Hypertext is a hyperlink, and tags are labels
The basic structure of H5
1. Two areas 1. Head description area 2. Bady content area
2. HTML tags 1. Single label "Empty label" 2. Double label "Paired"
HTML syntax description
1. The first word after the sharp corner is the name of
the label 2. After the label, the space is separated by the attribute
3. The attribute and the attribute value are connected with an equal sign
4. The attribute value is placed Inside the quotation marks (both single and double quotation marks are acceptable)
5. If a label has multiple attributes, the attributes are separated by spaces
Common tags
1; title tags
Difference: have their own default size, the text is bold and unique: h1 can only appear once on a page,
h2-h6 can be the title of the web page section, there is no uniqueness
2: text bold mark Distinguish strong and emphasize the role of tone
3: text slant mark
4: Underline mark
5: Forced line breaks
Features: As long as the browser encounters content behind the party into the next line br
6: horizontal mark
7: Up and down marks (upper) (under)
8: Paragraph mark
9: represents a short paragraph of text after a single text Use CSS to achieve font color change
10: escape characters & nbsp; (space) & gt; & lt; (left and right angled corners) & copy; version symbol (record icon)
11: div Role: specifically for the layout of the web page
html list
ordered list
Unordered list
Custom list
-
（
- Place pictures in general ）（
- Put it to explain the picture ）
Expansion: Change the style of the list symbol: type = "attribute value" Attribute value: a / A i / I
change the symbol of the start of the list symbol: start + "attribute value" The attribute value refers to a number, and the number is the number from the first Start
Hyperlink
The attribute href = "jumping address" in a starts with http: // URL
target = "attribute value" The attribute value is _self (default value: open on the current page) _blank (open in a new window)
title = "" The prompt information can also be used as a subtitle of the picture (most tags support the title attribute)
Application of the
tag The attribute src = "image path" in the img tag
alt = "text replacement image" (the attribute value is empty and cannot be deleted) Note: when the image cannot be loaded, the text in the alt replaces the image
width = "" The width of the picture = "" The height of the picture border = "" The border of the
picture Find the picture location (relative path) The
target and you are in the same file at the same level. Find the same level. / Current path
parent find the child. / Folder name / Picture name
Find the parent of the child ... / Return to the previous level / Picture name
Table row and column
width = "" wide hight = "" high border = "" border bordercolor = "" border color
cellspacing = "" spacing between adjacent cell borders
cellpadding = "" content spacing between borders
align = "properties Value "Horizontal alignment attribute value: left center right
valign =" "Attribute value" Vertical alignment attribute value: top bottom middle
merged cells: merged rows are all merged rows and not cross column rows are merged column
merged row attributes: rowspan merge column: colspan Note: No matter merge rows or columns, merge rows in columns first in td operation
Form tag (tag field)
attribute action = “url (path)” Path to form submission
method = “get / post” data transmission method
maxlength = "" Maximum length of input characters
name = "name of form"
Form control: label input
attribute: type = "" specifies the type of input generation (input box, submit button, empty button, etc.)
value = "" According to the type of type, the role is different
name = "" The name of the current form element
size = "" In character units, controls the size of form elements
(text box (input box)
(submit button)
(password box)
reset button (returns the current form to the initial state)
empty button
css syntax: selector {attribute: attribute value;} Note: all css codes must be placed in the css style sheet
css syntax description 1: the selector dangles and says html tags
2: all css declarations must be placed in braces
3: css declaration includes attributes and attribute values
4: css attributes and attribute values are connected using colons
5: each statement is followed by a semicolon at the end
6: if an attribute has multiple attribute values, attribute values and attribute values Separated by spaces
css style sheet 1: internal style sheet <style type = “test / css” Note: internal style sheet, try to put it in the head description area
2: There are two ways of external style sheet
(1) first create a suffix named .css The file
hrel = "" connection path rel = "stylesheet" to establish relevance
(2)
the difference between the two: the essential difference link belongs to html a tag @import belongs to a method provided by css
2: loading order link import css and html The structure is loaded at the same time. @import Load the structure first and then load the style
3: Compatibility difference The compatibility of the link is better
4: Wipe the DOM style of js #import Imported css cannot be dynamically modified by js
3: Inline style sheet (row Style, inline style) <tag style = “inline style”> </ tag>
The weight relationship
of the style sheet : 1. The weight of the inline style sheet is the largest!
2. The weight of internal and external styles is related to the order of writing!
(The ones placed at the back will overwrite the styles placed at the front, only the styles with the same attributes will be overwritten, and the styles with different attributes will continue to be executed.)
! Important-> The current declaration has the highest weight! Syntax: background: red! Important;
css syntax:
selector {attribute: attribute value;}
selector: selector is to name the label.
一：类型选择符（标签选择符）
所有的html标签可以直接当作选择符进行应用。
比如：div\p\em\i\b\strong.............
特点：能选中当前结构里面全部同名标签。
应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候
.
Two: id selector
Syntax:
Name: <tag id = “name”> </ tag>
Write style with name: #NAME {attribute: attribute value}
Features: uniqueness! On the same page, an id name can only be used once.
Application: to divide the peripheral structure of a web page
三: 类选择符(class选择符)
语法:
其名称: <标签 class="名称1 名称2 名称3 名称4..."></标签>
用类名写样式 .名称{属性:属性值;}
特点:
1:一个元素可以有多个类名,类名可以重复出现
2:可以制定一类样式.
(Id, class) naming convention:
try to start with lowercase letters.
A combination of arrays, letters, underscores, and hyphens.
You cannot use keyword naming (all tags and attributes belong to keywords).
Name as much as possible to reflect the content of the section, or to reflect the structure (semantic).
Can be Pinyin, but Chinese characters and special characters cannot appear.
四: 群组选择符
语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
比如:.名称1，.名称2，.名称3.....
五: 包含选择符(子代选择器\后代选择符) ( 通过父元素找子元素 )
语法:
父元素 子元素{ 属性:属性值; }
六: 伪类选择器
a:link {color: red;} 未访问的链接状态
a:visited {color: green;} 已访问的链接状态
a:hover {color: blue;} 鼠标滑过链接状态
a:active {color: yellow;} 鼠标按下去时的状态
比如a：lingk{
color:red
} 就会显示未访问的连接状态颜色为红色
七：通配符
*{ }
* 选择页面中所有的元素！
*{
margin:0; 盒子外围间距清零
padding:0; 盒子内部的距离清零
}
Selectors weight relationship:
ID> class> tag
four numbers represent weight:
inline style sheet -> 1000
ID -> 100
class -> 10
Label -> 1
Pseudo Class Selector -> 10
Wildcard -> 0
comprising selector The weight is the sum of weights
eg:
id class {} 100 + 10 == 110
id id class tag {} 100 + 100 + 10 + 1 == 211 When the
weights are the same, the style written after will be given to the style written before Overwrite.
! The important weight is the highest, such as background: red! important
Text attributes:
1： font-size:; 控制文本大小
1:为了消除系统之间显示差异，规定：16px 为标准字体大小。
2:文本大小设置，设置为偶数。
3:PC端项目，设置最小尽量别低于12px ;
4:从ps中获取文本大小，汉字量取文本高度。
5:文本单位： px \ em \ pt(磅)【常用在印刷领域】
12px == 9pt
em ( 相对大小单位，相对于父元素的font-size值而定 ) (默认情况下， 1em == 16px)
6:
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2：color:; 控制网页中的文本颜色
颜色值：
a：十六进制表示颜色值：
16进制数字：0 - 9 a - f
颜色值： #ff0000
6个数字：
前两位 红色
中间两位 绿色
最后两位 蓝色
b: RGB(255,0,0) 模式
拓展： rgba(255,0,0,0.5)0.5 指定文字透明度
3：font-family:;控制的是网页中字体类型。
默认的字体类型："微软雅黑"
系统能支持的字体：web安全字体：微软雅黑、宋体、楷体...
英文默认的字体：Arial
语法：font-family:字体1,字体2,字体3,......
注：
1:中文字体必须放在引号里面
2:如果一个字体多个单词组成 也要放在引号里面
3:如果字体是一个单词 不需要引号。
4:先写英文字体，后写中文字体。
4：font-weight:;控制文本是否加粗
属性值：
bold 加粗
bolder 加粗
normal 清除加粗，恢复常规文本
100 - 900
100 - 500:不加粗
600 - 900:加粗的状态
5: font-style:;控制文本的倾斜
属性值：
italic 倾斜
oblique 倾斜（倾斜幅度更大，但是一般不会有明显变化）
normal 恢复常规文本
6: line-height:; 控制文本的行高。
a: 从ps设计图上：怎么获取行高:从第一行开始量到第二行开始。
b:
单行文本：
如果让单行文本在容器里面上下居中，line-height设置容器高度即可
显示状态：
小于容器高度的时候：文本往上移动
大于容器高度的时候：文本往下移动
7：text-align:; 控制文本的水平对齐方式
属性值：
center 居中对齐
left 左对齐
right 右对齐
justify 两端对齐
8:text-decoration:; 文本修饰（下划线、上划线、删除线）
属性值：
none 清除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线
9: text-indent:;
text-indent:2em；首行缩进：
text-indent能设置负值：文字往左走。（悬挂式缩进）
10：字间距、词间距
letter-spacing:; 字间距
word-spacing:; 词间距
11: text-transform:; 控制文本大小写。
属性值：
uppercase 大写
lowercase 小写
capitalize 每个单词的首字母大写
Floating
attribute: float
attribute value:
left
right
none
Features:
1: After adding the float, the element does not occupy space.
2: If multiple elements are arranged horizontally, all the arranged elements must be added to float.
3: If the child element is added to float, and the width is greater than the parent element, the following elements are squeezed to the next line.
