html skeleton
- Basic skeleton
<html> <head> <title> </title> </head> <body> </body> </html>
- Complete skeleton
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
meta: Yuan
Attribute: charset: character set
Prevent garbled code
html syntax rules
- Double label: example: < p > this is a double label</p>
- Double label = = start label < p > + end label</p>
- Single label: < HR >, < br >
Container and text level labels
Text level labels: p, span,img, form labels, etc.
* The content displayed on the web page can only insert text, or==Other level text labels==. **Cannot nest the same text label**. * Otherwise, the page layout will be affected when learning styles.
Container level labels: div, h1,dl,dt,dd,ul,ol,li, etc
* You can insert any content(Text, text level label)， Or other container labels.
Label properties
-
Attribute: includes attribute name and attribute value. It has an impact on the whole web page.
Example: < H1 class = "box" id = "123" ></h1>
h series label
- Level 1 ~ 6 titles can be displayed, h1~h6
- It is a double label and a container label. (container label: any content can be inserted)
<h1>La La La</h1>
<h2>Ha ha ha</h2>
//....
<h6>Interesting</h6>
// Can only be side-by-side and cannot nest other h labels. A web page can only have one h1 tag
p tag
- p: paragraphs
- p: Double label, text level label
- Show a paragraph on a web page
- Note: text level label: the content displayed on the web page can be text, other types of text level labels, but container level labels cannot be inserted.
img tag
- img: image.
- Common formats: jpg, png, gif
- Level: text level label, single label, use "" when text.
- Common attributes:
- src: source setting path
- Width: sets the width
- Height: sets the height
- Title: move the mouse over the picture to display the title (prompt text).
- Border: sets the width of the outer border of the picture.
- alt: set the picture to replace with text when there is no image.
// The default is inside the body <img src="web.jpg" width=500px height=500px title ="What are you looking at" border =10px alt=""Unable to load picture" />
Relative path
. note:.... /: represents the upper level directory of the folder where the current file is located
if(Pictures and html The files are in the same folder)
src = "Picture name.Suffix“
else {
if(Picture in html Subordinates of documents) // That is, imges and html files in the folder containing pictures are at the same level and under the same folder.
src = "imges/web.jpg"
if(Picture in html Parent of the document)
src = "../web.jpg"
}
Absolute path
- This is the general path. (starting from the drive letter).
a label
- A: anchor anchor, commonly known as hyperlink
- Double label, text level label
- Common properties
- href: jump to link (relative path, absolute path) and enter another web page
- title: move the mouse to prompt the text. (it can be any type of character)
<a href="http://baidu.com">baidu</a> <a href="http://baidu.com" target="_self">baidu</a> <a href="http://baidu.com" target="_blank">baidu</a> <!-- href : Set the address of the connection. target : Set the target to jump. _self : Represents the current page. _blank : Indicates to open a new page for jump. -->
Anchor point
Jump between two positions
href attribute value: # + id
<p id="mao">xxxxxxxxxxxxxxxxxxxxxxx</p> // Pretend there's a lot in the middle. <a href="#Mao "> anchor link</a> // One anchor link, jump to the first p
list
- Unordered list
- Function: you can build a list without order in the web page.
- Two labels are required: ul and li.
- UL: unorder list indicates the container
- Li: list item indicates the container
- li should be nested in ul and cannot be used alone. In addition, only li can be placed in ul
- li you can put any content in it.
<ul>
<li>xxxxxxxxxxx</li>
<li>
<h2>llll</h2>
<ul> .... </ul>
</li>
<li></li>
</ul>
- Ordered list
- Function: you can build an orderly list in the web page.
- Two labels are required: ol and li.
- UL: order list indicates the container
- Li: list item indicates the container
- li should be nested in ol and cannot be used alone. In addition, only li can be placed in ol
- li you can put any content in it.
<ol>
<li>xxxxxxxxxxx</li>
<li>
<h2>llll</h2>
<ol> .... </ol>
</li>
<li></li>
</ol>
- Definition list
-
Definition: a custom title and content list.
-
Use requirements: `dl,dt,dd` The three labels are used together.
-
dl: definition list Equivalent to the outermost container of the list, large structure.
-
dt: definition term Represents a list subject or term.
-
dd: definition description Represents an explanation of a subject term.
-
dl Internal placement dt and dd ，(dt and dd Are juxtaposed.)
-
dt There can be more than one in the back dd (There can be multiple explanations, no problem)
-
==dt and dd All belong to container level labels, and everything can be put in them==
-
<dl>
<dt>the Great Wall</dt>
<dd>Great Wall( The Great Wall)，The Great Wall, also known as the Great Wall, is a military fortification in ancient China. It is a tall, solid and continuous wall to limit the actions of the enemy. The Great Wall is not a simple and isolated wall, but a defense system with the wall as the main body and combined with a large number of cities, barriers, pavilions and signs.</dd>
<dt>Beijing Forbidden City</dt>
<dd>The Imperial Palace in Beijing is the imperial palace of the Ming and Qing Dynasties, formerly known as the Forbidden City. It is located in the center of the central axis of Beijing. Centered on the three main halls, the Imperial Palace in Beijing covers an area of about 720000 square meters and a construction area of about 150000 square meters. There are more than 70 large and small palaces and more than 9000 houses.</dd>
</dl>
effect:
the Great Wall
The Great Wall, also known as the Great Wall, is a military fortification in ancient China. It is a tall, solid and continuous wall to limit the actions of the enemy. The Great Wall is not a simple and isolated wall, but a defense system with the wall as the main body and combined with a large number of cities, barriers, pavilions and signs.
Beijing Forbidden City
The Imperial Palace in Beijing is the imperial palace of the Ming and Qing Dynasties, formerly known as the Forbidden City. It is located in the center of the central axis of Beijing. Centered on the three main halls, the Imperial Palace in Beijing covers an area of about 720000 square meters and a construction area of about 150000 square meters. There are more than 70 large and small palaces and more than 9000 houses.
Layout label
-
Layout labels: div and span, commonly known as "box".
-
div: division area
- div is a dual label, container level label.
- Function: divide page area and assist page layout.
-
Span: small area, small span.
- span is a double label, a classic text level label.
- Function: it can be used for local adjustment without affecting the overall layout.
Table label
- At least 3 labels are required
- Table: it means table itself, which can be understood as the outermost frame
- tr: table rows, which defines the rows inside the table
- td: table dock (table cell), which defines the number of cells in each row
- th: table header header cell. Default style: the font is centered and the word is relatively large. You can replace td
- Nested relationship: table - > tr - > td
<table border = 1px>
<tr>
<td>First row first column</td>
<td>First row, second column</td>
</tr>
<tr>
<td>Second row first column</td>
<td>Second row, second column</td>
</tr>
</table>
effect:
| First row first column | First row, second column |
| Second row first column | Second row, second column |
Form Elements
- Form elements are input boxes.
form label
- Form: form
- The form tag is not a structural tag, but a functional tag.
- All form elements generally need to be written inside the form tag.
- Function: you can set who form elements collect data and submit it to, and set the data submission method.
- Important attributes:
- Method: set the data submission method, get or post
- action: set the path to whom to submit the collected list data.
Text box
- input: form element
- Single label, equivalent to a special text.
- Important attribute
- type: you can create different form elements
- Value: set default value (custom content)
<form>
<input type=test value =Xiao Bai is the most handsome/>
</form>
effect:
Password box
- Just set the type to password
<form>
password:<input type=password value =Input password />
</form>
effect:
password:radio button
- Just set the type to radio
- Radio boxes: appear in groups and may be mutually exclusive.
- How to set mutual exclusion:
- Also add the name attribute with the same value.
<form>
<p>
Gender:
<input type=radio name=sex/> male
<input type=radio name=sex/> female
</p>
</form>
effect:
Gender: male and female
Check button
- Just set the type to checkbox
<form>
<p>
What languages do you speak:
<input type=checkbox name=hobby/> cpp
<input type=checkbox name=hobby/> java
<input type=checkbox name=hobby/> python
<input type=checkbox name=hobby/> GO
</p>
</form>
effect:
What languages do you know: cpp java python GO
Button
- Through the input tag, you can also get three different types of buttons
- Button: normal button
- Reset: reset button (after pressing, all form elements inside the form tag will return to the initial state and)
- Submit: Submit button to submit data to the server.
<form>
password:
<input type=text value=""Enter password" />
<p>
Gender:
<input type=radio name=sex/> male
<input type=radio name=sex/> female
</p>
<p>
<input type="button" value="Point me point me">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</p>
</form>
effect:
password:Gender: male and female
Text field
- Text fields allow users to enter text content on multiple lines.
- textarea: double label, text level label. It can be displayed as a text.
- Common attributes:
- Rows: the number of rows displayed in the row setting text field (a scroll bar will appear if the number of rows exceeds the number of rows), and the attribute value is a number
- cols: column sets the number (width) of columns displayed in the text field, and the attribute value is a number
<textarea name="" id="" rows=5 cols=10>default text</textarea>
effect
default text
drop-down menu
- Drop down menu: you need to use the nested combination of select and option tags.
- Both select and option are double labels, text level labels.
- Nested relationships: select – > option
- select: indicates the overall structure of the drop-down menu.
- option: represents each item in the drop-down menu.
Note: the drop-down menu displays the first option by default.
If you want an item to be displayed by default, you need to add a selected attribute to the option tag. The attribute value is selected
Your choice is:
<select name="" id="">
<option value="">Little sister 1</option>
<option value="" selected="selected">Little sister 2</option>
<option value="">Little sister 3</option>
</select>
effect:
Your choice is:
Little sister No. 1 miss sister No. 2 miss sister No. 3Other miscellaneous knowledge points
notes
- Writing method:
<!-- Write notes here -->
Character entity
: Full name: non breaking space
< : Full name: less than sign<
> : Full name: greater than sign >
© : Full name: copy right version symbol@
- Character entity: starts with & and ends with; ending.