table of Contents
Text labels and annotation tags
Title tags, labels and special characters horizon
The use of other commonly-used tags
Introduction to HTML
1.HTML (HyperText Markup Language): HTML, also known as web page language.
Hypertext: beyond the scope of the text, html can easily use this operation
marks: html all operations are implemented by marking, labeling is label, <label name>
2. Run: html extension is .html .htm. Directly through the browser can run
3. html specification, the following specifications must be followed when writing
a) an html file start tag and an end tag <html> </ html>
2) consists of two parts html
<head> information provided </ head>
<body > displayed on the page contents are written in the body inside the </ body>
3) HTML tags have a start tag must have an end tag, one by one.
- <head> </ head>
. 4) HTML code insensitive
5) some labels, the label does not end, the end of the label. <br/> dividing line such as line feed <hr />
4.html the operation idea
There are many pages of data, different data may require different display, the need to use labels to packets to be operated together (encapsulated), effect a change in the tag data pattern by modifying the attribute value tag. A label is equivalent to a container, the container style you want to modify data, you only need to change the property value of the container, the container changes in data patterns can be achieved.
Text labels and annotation tags
Text labels is to modify the text styles.
<font></font>Properties:
size: the size of the text in the range of 1-7, out of 7, default or 7
Color: Text color
- Two notations are
English words: red green blue black white yellow gray ......
using hexadecimal number system represents #ffffff: RGB
Comment tag is to add a comment
<!-- html的注释 --><html>
<head>
<title>初学html</title>
</head>
<body>
<font size = 10 color = "red">红色的十号字体</font><br/>
<font size = 20 color = "yellow">黄色的二十号字体</font><br/>
<font size = 30 color = "green">绿色的三十号字体</font><br/>
<!--注释 -->
</body>
<hr/>
</html>
Title tags, labels and special characters horizon
Title tag
- <h1> </ h1> <H2> </ H2> <H3> </ H3> ....... <H6> </ H6>
- from h1 to H6, successively smaller size, and it will wrap
Horizontal tag
- <HR />
- Attribute
size: thickness in the range of the horizontal line 1-7
Color: Color
<hr size="5" color="blue"/> Special characters
If the label is displayed and there is a conflict, you need to escape special characters
| < | < |
| > | > |
| Blank | |
| & | & |
List tab
1. <dl> </ dl> : represents the range of the list
in which dl <dt> </ dt>: upper contents
in which dl <dd> </ dd>: lower content
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<dl>
<dt>笑一下</dt>
<dd>哈哈</dd>
<dd>嘻嘻<dd>
<dd>嘿嘿</dd>
</dl>
</body>
</html>
2. If you want displayed on the page number Effective
<ol> </ ol>: range ordered list
- property type: Sort 1 set (default) I A
- in which the label ol <li> details </ li >
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<dl>
<dt>笑一下</dt><br/>
<ol type = "a">
<li><dd>哈哈</dd></li>
<li><dd>嘻嘻</dd></li>
<li><dd>嘿嘿</dd></li>
</ol>
</dl>
</body>
</html>
3. want to appear on the page special characters in front of the effect
<ul> </ ul>: unordered list represents the range of
- attributes: type: hollow round circle, solid circle disc (default), solid squares square, the default disc
- in which the label ul <li> details </ li>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<dl>
<dt>笑一下</dt><br/>
<ul type = "a">
<li><dd>哈哈</dd></li>
<li><dd>嘻嘻</dd></li>
<li><dd>嘿嘿</dd></li>
</ul>
</dl>
</body>
</html>
Image tag
<img src="图片的路径"/>
- src: 图片的路径
- width：图片的宽度
- height：图片的高度
- alt: 图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容。图片显示出错，提示的内容 <img src="w02.jpg" width="300" height="400" alt="这是图片上的文字">
About paths
1. absolute path, most full path to the file. For example:
- http://www.baidu.com/b.jpg
2. The relative path
1) html files and pictures in a path, you can write directly to the file name
2) picture in the lower html directory of
the html file, use the img folder below the a.jpg: img \ a.jpg [html img in the same path and
3) picture in the parent directory html file
with ../ represents the upper path
Hyperlink label
1. Resource Links
<a href="链接到资源的路径"> 显示在页面上的内容 </a> href: Address resource link
target: Set to open the way, the default is open in the current page
_blank: open in a new window
_self: Opens the default on the current page
when the hyperlink does not require any address in the href inside plus #
- <a href="#">这是一个超链接2</a>2. locate resources
if you want to locate resources:
define a position back to this location +
<a name="top">顶部</a>
<a href="#top">回到顶部</a>Tags pre: is output
Table tags
Table tags can be formatted data, the data show more clearly
1. Form wording:
<table> </ table>: a table showing the scope of the
border: Table lines
bordercolor: color form lines
cellspacing: directly from the cell
width: the width of the table
height: the height of the table
In the table which <tr> </ tr> (line)
provided the alignment align: left center right
Tr inside the <td> </ td> (a cell)
set the display align: left center right
ps: th Use may also represent cells, that can achieve the centering and bold
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<!--4行，每行有3个单元格 -->
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
<caption>人员信息</caption>
<tr align = "center"> <!--这一行居中-->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td align = "right">小白</td> <!--这一个单元格居右-->
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>小黑</td>
<td>男</td>
<td>80</td>
</tr>
<tr>
<th>小红</th> <!--th默认加粗居中-->
<th>女</th>
<th>8</th>
</tr>
</table>
</body>
</html>
2. The title of the form:
<Caption> </ Caption>
3. Merge cells
rowspan: interbank
<td rowspan = "3"> person information </ td>
colspan: across columns
<td colspan = "3"> person information </ td>
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
<caption>人员信息</caption>
<!--3行
第一个行：3个单元格
第二行和第三行都是：2 按行合并年龄那一列-->
<tr>
<td>小白</td>
<td>女</td>
<td rowspan="3">18</td>
</tr>
<tr>
<td>小黑</td>
<td>男</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
</tr>
</table>
</body>
</html>Form tag
Form tag can submit data to the server
1. Form range
<form> </ form>: Form a range defined
attributes
action: submitted to the address, the default page submitted to the current
method: Form submission
- There are two general get and post, the default is the difference between get and post requests get
1 , get the address bar will carry request data submitted, post does not carry (the request body inside. say http protocol on the seventh day, when the time)
2, get a lower security level request, post a higher
limit 3, get the size of the requested data , post no limit
enctype: do file upload when you need to set this property
2. entries : the input content may select content or portion
most entries using <input type = "Type of Entry" />, and requires the entry which has a name attribute, to submit data
1) Normal input item: <iNPUT type = "text" />
2) password entry: <iNPUT type = "password" />
. 3) the radio entry: <iNPUT type = "radio" />
- inside required property name
- name attribute value must be the same
- there must be a value the value of
implementing the default selected attribute: the checked = "the checked"
. 4) check entries: <iNPUT type = "CheckBox" />
- require an attribute name inside
- attribute value name of must be the same
- there must be a value the value of
implementing the default selected attribute: the checked = "the checked"
. 5) file entry: <input type = "file" />
. 6) pull-down entry (not in the input tag inside)
<sELECT name = "birth">
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>
= Default selection Selected "Selected"
. 7) text field: <TextArea cols = "10" rows = "10"> </ TextArea>
. 8) hidden items: not displayed on the page, but which is present in the html code <input type = "hidden" />
. 9) submit button
image for submission: <input type = "image" src = " image path" />
reset button: Back to the initial state of the entry of <input type = "reset" / >
normal button: <input type = "button" value = "" />
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<form action = "mall\images">
手机号码：<input type = "text" name = "num"/><br/>
密码：<input type = "password"/><br/>
性别：<input type = "radio" name = "sex" value = "nv"/> 女
<input type = "radio" name = "sex" value = "nan"/>男<br/>
爱好：<input type = "checkbox" name = "love" value = "a"/>羽毛球
<input type = "checkbox" name = "love" value = "b"/>乒乓球
<input type = "checkbox" name = "love" value = "c">篮球<br/>
文件：<input type = "file" name = "file"/><br/>
生日：<select name="birth">
<option value="0">请选择</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
</select>
<br/>
自我描述：<textarea cols="10" rows="10" name = "tex"></textarea><br/>
隐藏项：<input type="hidden" name = "hid"/><br/>
<input type="submit" value="注册"/>
<input type="reset" value="重置注册"/>
<input type="button" value="普通按钮"/>
<br/>
<!-- <input type="image" src="a.jpg"/>-->
</form>
</body>
</html>The use of other commonly-used tags
b: bold
s: strikeout
u: Underline
i: italic
pre: is output as
sub: subscript
sup: superscript
p: paragraph tag line multiple ratio br tag
div: Wrap
span: in one row
Frame Tag
1. <frameset>
- rows: row are divided according to
<frameset rows = "80, * ">
- cols: divided in columns
<frameset cols = "80, *">
2. <Frame> particular page displayed <frame name = "lower_left" src = "b.html">
NOTE: use a frame label, we can not write inside the body, the tag uses frames, need to remove the body
3. If the page on the left hyperlink want content displayed on the right of the page. Hyperlink is provided inside the target value is set to the attribute name
<a href="http://www.baidu.com" target="right"> hyperlink 1 </a>
<frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="lower_right" src="c.html"> //右边的页面
</frameset>
</frameset> Check the label on the other, if necessary, go to the official document.
