HTML
1, a set of rules, the browser know the rules.
2, Developer:
Html learning rule
Development Background:
- Write Html files (acting as role templates) ******
- a database to obtain data, and then replace the html file to the specified location (Web framework)
3, local test
- Locate the file path directly to the browser opens
- pycharm open test
4, write Html files
- doctype correspondence between
- html tags, internal tags can write properties ====> Only one
- Comment: <- Content comment -!>
5, label classification
- self-closing tags
<meta charset="UTF-8">
- Active closing tag
title> Old Boys </ title>
6、
head Tags
- <meta -> encoding, jump, refresh, keywords, description, IE compatible
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title tags
- <link /> engage icon, owe
- <style />欠
- <script> 欠
7, body tag
- 图标， > <
- p label, paragraph
- br, wrap
======== ===== small summary
All labels are divided into:
Block-level tags: div (white), H series (increase bold), p labels (with spacing between paragraphs and paragraphs)
The tag line: span (white)
Tags can be nested between
Meaning tag exists, css operation, js operation
Use chorme review elements: ps
- Positioning
- View style
- h Series
- div
- span
- input Series + form tag
input type = 'text' - name attribute, value = "Zhao Fan"
input type = 'password' - name attribute, value = "Zhao Fan"
input type = 'submit' - value = 'submit' submit button, the form
input type = 'button' - value = 'Login' button
input type = 'radio' - checkbox value, checked = "checked", name attribute (name of the same mutex)
input type = 'checkbox' - box value, checked = "checked", name attribute (bulk data acquisition)
input type = 'file' - dependent form in the form of an attribute enctype = "multipart / form-data"
input type = 'rest' - Reset
<Textarea> Default </ textarea> - name attribute
select label - name, internal option value, submit to the background, size, multiple
- a label
- Jump
- anchor href = ID '# a tag ID' tag does not allow repeated
- img
src
alt
title
- List
the
at the
ol
at the
dl
dt
dd
- Form
table
thead
tr
th
tbody
tr
td
colspan = ''
rowspan = ''
- label
Click on the tab for the file so that the cursor associated with the acquisition
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
- fieldset
legend
--20 tags
CSS
Style attribute is provided on the label:
background-color: #2459a2;
height: 48px;
...
Write css style:
1. style attribute tag
2. Write in the head inside style tag writing style
- id selection area
#i1{
background-color: #2459a2;
height: 48px;
}
- class selector ******
.name{
...
}
<Tag class = 'name'> </ tab>
- tag selector
div{
...
}
All settings on this div style
- level selector (space) ******
.c1 .c2 div{
}
- a combination of a selector (comma) ******
#c1,.c2,div{
}
- Attribute selectors ******
The choice of the label and then conduct further screening by property
.c1[n='alex']{ width:100px; height:200px; }
PS:
- Priority, the label style of priority, written order, the principle of proximity
2.5 css styles can also be written in a separate file
<link rel="stylesheet" href="commons.css" />
3 comments
/* */
4, Borders
- the width, style, color (border: 4px dotted red;)
- border-left
5、
height, height percentage
width, the width of the pixel, the percentage of
text-align: ceter, horizontal center
line-height, the height of the vertical direction according to the label
color, font color
font-size, font size
font-weight bold font
6、float
Let the waves up label, block-level tags can be stacked
I uncontrollable:
<div style="clear: both;"></div>
7、display
display: none; - let labels disappear
display: inline;
display: block;
display: inline-block;
Has inline, default they have accounted for how much
Block has, can not be provided to set the height, width, padding margin
******
Inline tags: can not set the height, width, padding margin
Block-level tags: set the height, width, padding margin
8、padding margin(0,auto)