HTML overview

Source: Internet
Author: User

Tags: HTML overview tab

One: HTML overview
The Html:hyper Text Markup Language Hypertext Markup Language, a programming language designed to create Web hypertext documents, tells the Web browser how to display information about a Web document (that is, a Web page) and how to link various information.
1.HTML Basic Structure

<html>

<head>

<title> My first page </title>

</head>

<body>

My first page

</body>

</html>

<head></head> mainly includes basic information of Web page

Page title

Meta Data labels
<body></body> mainly includes web content.

2. Web basic information
A.doctype statement

<!DOCTYPE html">

<html>

  <head>   <meta charset=“utf-8" />   <title>无标题文档</title>

</head>
<body>

   网页主体  </body></html>

<meta charset= "gb2312" >

<meta name= "search keyword" content= "content description"/>

Two: HTML tags
1. Title Label

 <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>2.段落标签 <p>…</p>3.换行标签

<br/>

4.水平线标签

<hr/>

5.注释<!-- 注释内容 --> 特殊符号特殊符号    字符实体    示例空格      &nbsp;      <a href="#">百度</a>&nbsp;|&nbsp;<a href="#">新浪</a>大于号(>)  &gt;        如果时间&gt;晚上6点,就坐车回家小于号(<)  &lt;        如果时间&lt;早上7点,就走路去上学引号(")       &quot;      W3C规范中,HTML的属性值必须用成对的&quot;引起来版权符号    &copy;      &copy; 6.图像标签 常见的图像格式

Jpg
Gif
Png
Bmp
<img src= "path" alt= "text" width= "x" height= "Y"/>

 <img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>7.链接标签 <a href="path" target="目标窗口位置">链接文本或图像</a> <a  href="hetao.html"  target="_blank">无漂白薄皮核桃</a>

<a href= "hetao.html" target= "_blank" ><img src= "image/hetao.jpg" alt= "Bleach-free thin-skinned walnut" title= "bleached-free thin-skinned walnut"/></a >

 超链接使用场合  1.页面间链接:

Link to another page from one page
2. Functional links

Three: HTML list
1. Unordered list

 <ul>  <li>桔子</li>  <li>香蕉</li>  <li>苹果</li> </ul> ul标签的type属性取值  disc    项目符号显示为实体圆心,默认值  square  项目符号显示为实体方心  circle  项目符号显示为空心圆2.有序列表  <ol>       <li>桔子</li>       <li>香蕉</li>       <li>苹果</li>      </ol> ol标签的type取值  1 使用数字作为项目符号  A/a   使用大写/小写字母作为项目符号  I/i   使用大写/小写罗马数字作为项目符号3.定义列表 <dl>  <dt>所属学院</dt>    <dd>计算机应用</dd>  <dt>所属专业</dt>    <dd>计算机软件工程</dd>

</dl>

4.列表小结类型      说明              项目符号无序列表    1.以<ul>标签来实现    通过type属性设置项目符号

Disc (default), square, and Circle
2. Show list items as <li> tags
Sequence List 1. Set Item order By Type property with <ol> tag
1 (number, default), a (capital letter), a (lowercase letter), I (uppercase Roman numerals), and I (lowercase roman numerals)
2.
Representing list items as <li> tags
Define Class Table 1. <dl> tags are implemented
No bullets and display order
2. Define list items with <dt> tags

        3.以<dd>标签定义内容5.表格语法<table>  <tr>   <td>第1个单元格的内容</td>   <td>第2个单元格的内容</td>          ……  </tr>  <tr>   <td>第1个单元格的内容</td>   <td>第2个单元格的内容</td>        ……  </tr></table>6.对齐方式表格对齐方式

Default alignment, center alignment (align=center
), left-justified, right-aligned

Cell alignment
Horizontal alignment, vertical alignment

属性          值   说明align

Horizontal alignment left-justified
Center Center alignment
Right Justify
valign
Vertical alignment top Top Align
Middle Center Alignment
Bottom bottom Alignment
Baseline baseline Alignment

7.表格的跨列<table> <tr>  <td colspan="n">单元格内容</td>

n indicates the number of columns spanned
</tr>

<tr>  <td>单元格内容</td>       ……</tr>     ......</table>表格的跨行<table ><tr>  <td rowspan="n">&nbsp;</td>//n表示所跨的行数  <td>&nbsp;</td></tr><tr>  <td>&nbsp;</td></tr></table>

Four: Form labels

表单(form)

is the label used to receive user information

Form syntax: <form method= "POST" action= "Request Server side path" > <p> name: <input name= "username" type= "text" > &LT;/P&G      T <p> Password: <input name= "pwd" type= "password" > </p> <p> <input type= "Submit" value= "Submit" > <input type= "reset" value= "reset" > </p> </form> FORM element format: <input type= "text" n Ame= "FName" value= "text" > Property description type Specifies the kind of element.    text, password, checkbox, radio, submit, reset, file, hidden, image, and button, the default text name specifies the name of the form element. The initial value of the value element. When type is radio, you must specify a value of size to specify the initial width of the form element. When type is text or password, the size of the form element is in characters.  For other types, when the width is in pixels maxlength type is text or password, the maximum number of characters entered is checked the type is radio or checkbox when the specified button is a selected form element text box: <input   Type= "text" name= "UserName" value= "User name" maxlength= "> Password box: <input type=" password "name=" pass "size=" > " radio button: <input name= "GEN" type= "Radio" value= "Boy" checked= "checked" > Male <input name= "Gen"Type=" Radio "value=" Girl "> Female check box: <input type=" checkbox "name=" interest "value=" Sports "> Motion <input type= "checkbox" name= "interest" value= "talk" checked= "checked" > Chat <input type= "checkbox" name= "interest" value= "pla        Y "> Play the Game drop-down list box: <select name=" list name "> <option value=" option value "Selected=" selected ">...</option > <option value= "option value" >...</option > </select> button: <input type= "reset" name= "Butreset" value= " Reset Button "> <input type=" Submit "Name=" Butsubmit "value=" submit Button "> <input type=" button "Name=" Butbutton "value=" button "/> Picture button: <input type=" image "src=" Images/login.gif "/> Multiline text field: <textarea name=" showt Ext "cols=" x "rows=" y "> Text content </textarea > file domain: <form action=" "method=" POST "enct Ype= "Multipart/form-data" > <p><input type= "file" name= "Files"/> <input type= "Submit" name= "up  Load "value=" upload "/>    </p> </form> Form Elements Advanced Properties: Read-only readonly= "true" Disable disabled= "true"

HTML Overview

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: