The front page
Static pages - not only able to view and interact with users
Dynamic pages - can be updated in real time and be able to interact with the user
Three Musketeers pages written in HTML CSS JS
HTML- rough housing
CSS- decoration
Smart Furniture JS-
JQ belong to a library of JS
HTML:
HTML, the markup language is composed of a set of markup tags, learning HTML, in fact learn markup tags.
1、块级标签：<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
2、内联标签：<a>/<input>/<img>/<sub>/<sup>/<textarea>/<span>
3, block-level elements features:
Always start on a new line
Height, outside a line height can be controlled and Padding
Default width, it is 100% of the container
He can receive inline elements and other block elements
4, inline elements Features:
And other elements on the line
High, line height, and margins and padding can not be changed
Its width is the width of the text or pictures, can not be changed
Inline elements can only receive text or other inline elements
HTML text:
<! DOCTYPE html> <-! Document type ->
<HTML lang = "EN"> <-! Root tag ->
<head> <-! Page header ->
<Meta charset = "UTF ! -8 "> <! - international Numbering ->
<title> this is our first lesson </ title> <- title page ->!
<style>
the Table {
border: 1px Solid Red;
}
td {
;: Black Solid border 1px
}
</ style>
</ head>
<! - the main page, visual area -> <body>
<a href="#aaa"> Baidu jump back to point I </ a >
<!- paragraph tags ->
<the p-> I am a paragraph tag </ the p->
<the p-> I am a paragraph tag </ the p->
<-! Title tag ->
<h1> I am a tag </ h1>
<h2> tag is the second I </ H2>
<H3> I three tag </ H3>
<H4> tag four I </ H4>
<H5> is a five tags I </ H5>
<H6 > I was six tag </ H6>
<-! bold, italic, strikethrough ->
I am a common word <br>
<strong> I am a common word </ strong> <br>
< b> I am a common word </ b> <br>
I am honest word <br>
<i> <b> I bent sentence </ b> </ i> <br>
<b> big spring Sale, do not <s style = "font-size : 30px"> 998 </ s>, as long as 688 </ b> <br>
<- - list tag!>
ordered list
<OL>
<li> first </ Li>
<Li> second </ Li>
<Li> third </ Li>
</ OL>
unordered list
<UL>
<Li> 111 </ Li>
<Li> 222 </ Li>
<Li> 333 </ Li>
</ UL>
<br>
custom list
<DL>
<dt> Meat
<dd> pot package of meat </ dd>
<dd> flavored pork </ dd>
<dd> Panji </ dd>
</ dt>
<dt> dish </ dt>
<dd> Mala </ dd>
<dd> pot </ dd>
<dd> fish </ dd>
</ DL >
<br>
<img src = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484851367,2985998441&fm=26&gp=0.jpg" alt = "Oh, the picture made a mistake">
<br>
<a href = "https://www.baidu.com/" target = " _ blank" title = " I do not point"> let me go to Baidu </a> <--_ blank: new window Jump; _self:! local window Jump ->
<the p-the above mentioned id = "aaa"> I jump over the position </ the p->
<a href="#"> I go back to the top of the </a>
<br>
& lt; <- <! less-than sign ->
& gt;<! -> larger than the symbol ->
& the equals;! <- = equal to the symbol ->
<P> I & nbsp;! Word </ p> <- space character ->
<p> I & emsp; <! - character width symbol -> words </ the p->
<br>
<! - Form ->
<the Table> <-! colspan column merger ->
<thead> <-! rowspan are consolidated ->
<TR>
<td colspan = "3" style = "text-align = left: Center"> Monday menu </ td>
<- <td> Tuesday menu </ td> -! ->
<-! <td> Wednesday menu </ td> ->
</ TR>
<TR>
<td rowspan = "2"> chicken </ td>
<td> duck </ td>
<td> fish </ TD>
</ TR>
<TR>
<TD> chick </ td>
<td> Duck </ td>
<-! <td> fish </ td> ->
</ TR>
</ tbody>
</ the Table>
<br>
<-! Forms - >
<form action="https://www.baidu.com/s" method="get" target="_blank">
关键词<input type="text" name="word">
<input type="password">
<input type="submit" value="提交">
</form>
<br>
</body>
</html>