search

Home >Web Front-end >H5 Tutorial >Xiaoqiang's road to HTML5 mobile development (1) - Introduction to HTML

Xiaoqiang's road to HTML5 mobile development (1) - Introduction to HTML

黄舟
黄舟Original
2017-01-22 10:17:251343browse

HTML is the abbreviation of HyperText Markup Language (Hypertext Markup Language), which is a combination of text and tags that constitute the basic structure of all web pages.

1. Popular browsers currently on the market

IE/Chrome/firefox/opera

Xiaoqiangs road to HTML5 mobile development (1) - Introduction to HTML

Xiaoqiangs road to HTML5 mobile development (1) - Introduction to HTML

Chrome/firefox/opera and IE 9/10 are all very compatible with HTML5

2. HTML tags

html tags all start with ""End of brackets

such as

Commonly used attributes are: id, class, style, title

id: This attribute provides a name for the object pointed to by the label

class: This attribute provides a class name for the object

style: This attribute applies a corresponding css style

title: Give the object a title, which most browsers will prompt when the mouse passes over it.

We will use the tag in the subsequent Android development. Let's take a look at a use of the tag. , is also our helloword.

<html>  
    <head>  
        <title>first html</title>  
<!--refresh:刷新-->  
        <meta http-equiv="refresh" content="1;url=http://blog.csdn.net/dawanganban&#39;">  
<!-- 表示每隔1秒向url地址刷新 -->  
        <meta http-equiv="content-type" content="text/html;charset=utf-8">  
<!--引入一个样式文件-->  
        <link rel="stylesheet" type="text/css" href="style.css">  
      
    </head>  
    <body>  
        hello word  
    <body>  
</html>

3. Important Marks

(1) Link

target="_black": Open the link in a new window

target="_selt": Default value, in the current window Open

(2) Image link

<a href="地址" border="0"><img  src="test.jpg" alt="Xiaoqiang's road to HTML5 mobile development (1) - Introduction to HTML" ></a>

border attribute value: In order to remove the default border.

(3) Send an email 

<a href="mailto:739299362@qq.com?subject=hello">发邮件</a>
 （4）锚点（在同一页面进行跳转）
<a name="top">跳到这里</a>
<a href="#top">跳到top</a>

(5) Table 

<table border="1" width="60%" cellpadding="10" cellspacing="0">
<tr><td>表格一</td><td>表格二</td></tr><tr><td>BIAOGE</td><td>BIAOGE</td></tr>
</table>

Alignment of the table

align attribute: horizontal alignment. Value: left (default): left/rignt/center
valign attribute: vertical alignment. Value: top/bottom (default)/middle
Irregular table
colspan attribute: merge horizontal cells (merge columns)
rowspan attribute: merge vertical cells (merge rows)
Table Can be nested
Complete definition of table 

<table>
<caption>主题</caption>   只能是0个或者1个
<thead>表头</thead>       只能是0个或者1个
<tfoot>表脚</tfoot>
<tbody>表体</tbody>
</table>

(6) Form 

<form action="服务器端的一个程序" method="get/post">
<!--input标记-->
<!--非input标记-->
      </form>
      1)input标记：
文本输入框:<input type="text" name="username" value="缺省值"/><!--必须加name-->
提交按钮： <input type="submit" value="确认"/>
密码输入框：<input type="password" name="pwd"/> <!--必须加name-->
单选：<input type="radio" name="gender" value="m"/><!--必须加name和value-->
   <!--同一组name必须相同-->
多选：<input type="checkbox" name="interest" value="fishing"/>
重置：<input type="reset" value="取消"/>
普通按钮：<input type="button" value="点我吧"/>
上传文件：<input type="file" name="file1"/>
隐藏域：<input type="hidden" name="userId" value="123">
      2)非input标记

Drop-down list: 

<select name="city" multiple="multiple">
<option value="bj">北京</option>
<option value="wh">武汉</option>
<option value="nj">南京</option>
</select>
<!--加上mutiple属性就成为多选了-->

Multi-line text input box: 

<textarea name="desc" cols="" rows=""></textarea>

(7) List
Unordered list: 

<ul>
<li>item1</li>
<li>item2</li>
</ul>

Ordered list: 

<ol>
<li>item1</li>
<li>item2</li>
<ol>

(8) Frame


The function is to divide a large window into many sub-windows
<frameset rows="200,300,*">  <!--划分为三个窗口-->
<frameset rows="20%,*">  <!--按照百分比划分-->
<frame src="top.html"/>
<frameset cols="30%,*"/>
<frame src="left.html"/>
<frame src="right.html"/>
</frameset>
</frameset>
<iframe>

The function is to embed a sub-window in the current window

<iframe src="some.html" width="" height="">
</iframe>

The above is the content of Xiaoqiang’s HTML5 mobile development road (1)-HTML introduction. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!



Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 study notes concise version (11): new APINext article：HTML5 study notes concise version (11): new API

Related articles

See more