您的位置：首页 > Web前端

前端基础快速学习- HTML

2017-03-29 00:00 609 查看
例1.首先看看<head>标签的内容

1
2
3
4
5
6
7
8
9
10
<head>
<!--自闭合标签-->
<metacharset="UTF-8"/>
<!--<metahttp-equiv="Refresh"Content="2"/>-->
<!--<metahttp-equiv="Refresh"Content="2;Url=http://www.autohome.com.cn"/>-->
<!--标签属性name="alex"-->
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
<title>老男人</title>
<linkrel="shortcuticon"href="favicon.ico">
</head>
<meta>里面指定字符集，IE兼容模式

<tite>显示标题

<link>显示标题的图标

效果如下：




例2：<body>里面一些常见的标签

1
2
3
<!--内联和块级-->
<divstyle="background-color:red;">12</div>
<spanstyle="background-color:green;">12</span>
标签分为内联标签和块级标签，比如<div>就是块级，可以看见颜色是应用到整行，<span>就是内联标签，颜色只是应用到文字上面。





1
2
<!--符号-->
<a b>
<小于符合；>大于符号； 空格

1
2
3
4
<!--段落和换行-->
<p>asdfuo<br/>iuasdkfjlkjasdfkj<br/>alskdjfas;dlfj</p>
<p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
<p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
<p>是段落标签，他和直接敲文字的区别是他可以自动换行，如果要手动换行，可以通过<br>实现





1
2
3
4
5
6
7
8
<!--标题-->
<h1>a</h1>
<h2>a</h2>
<h3>a</h3>
<h4>a</h4>
<h5>a</h5>
<h6>a</h6>
<h6style="font-size:65px;">a</h6>
<h1>，<h2>等等是设置字体的大小，数字越小，字体越大；当然也可以通过style来指定大小





1
2
3
4
5
6
7
8
9
10
11
12
<!--a标签-->
<ahref="http://www.baidu.com">跳转1</a>
<ahref="http://www.baidu.com"target="_blank">跳转2</a>
<!--<divhref="http://www.baidu.com">阿萨德发送到</div>-->
<!--寻找页面中id=i1的标签，讲其标签放置在页面顶部-->
<ahref="#i1">第一章</a>
<ahref="#i2">第二章</a>
<ahref="#i3">第三章</a>
<!--id没有一个标签的id属性值不允许重复；id属性可以不写-->
<divid="i1"style="height:500px;">第一章内容</div>
<divid="i2"style="height:500px;">第二章内容</div>
<divid="i3"style="height:500px;">第三章内容</div>
<a>标签是跳转，可以通过href指定跳转的对象，这个对象可以是一个网页的Url，也可以是其他标签的

如果不指定target=_blank,会从当前tab跳转，否则新开一个tab页面跳转





例3嵌套div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<divstyle="color:green;">
asdfasdf
<divstyle="color:red;">
<div>
<a>asdf</a>
</div>
</div>
<divstyle="color:red;">asdfas\</div>
asdf
</div>
</body>
</html>




例4表格和各种输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<form>
<inputtype="text"/>
</form>
<form>
<divstyle="border:1pxsolidred;">
<p>用户名：<inputtype="text"/></p>
<p>密码：<inputtype="password"/></p>
<p>邮箱：<inputtype="email"/></p>
<p>性别(单选框)：
<br/>男<inputtype="radio"name="ee"/>
<br/>女<inputtype="radio"name="ee"/>
</p>
<p>爱好（复选框）：
<br/>男1<inputtype="checkbox"/>
<br/>男2<inputtype="checkbox"/>
<br/>男3<inputtype="checkbox"/>
<br/>男4<inputtype="checkbox"/>
<br/>男5<inputtype="checkbox"/>
</p>
<p>城市：
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<selectmultiplesize="10">
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
<select>
<optgrouplabel="AAA">
<option>上海</option>
<option>北京</option>
</optgroup>
<optgrouplabel="BBB">
<option>广州</option>
</optgroup>
</select>
</p>
<p>文件：<inputtype="file"/></p>
<p>备注：<textarea></textarea></p>
<inputtype="submit"value="submit"/>
<inputtype="button"value="button"/>
<inputtype="reset"value="reset"/>
</div>
</form>
</body>
</html>
文本框很直接，就是输入值

密码框，邮箱自动隐藏密码和判断邮件格式；

单选框，复选框都是通过指定name联系在一起

下拉列表框可以指定默认的选项，调整大小，甚至通过<optgroup>分组

所有的这些数据可以通过form的submit来提交给后台





例5：列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ul>
<ol>
<li>1asdfasdf1</li>
<li>2asdfasdf</li>
<li>2asdfasdf</li>
</ol>
<dl>
<dt>DT</dt>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dt>DT</dt>
<dd>dd</dd>
</dl>
</body>
</html>
<ul>和<li>是星点隔开；

<ol>和<li>是数字隔开；

<dl>和<dt>是缩进格式隔开





列6表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<body>
<tableborder="1";background-color="red">
<tr>
<thcolspan="3">标题一</th>
<th>标题二</th>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容三</td>
</tr>
<tr>
<td>内容一</td>
<tdrowspan="2">内容二</td>
<td>内容三</td>
<td>内容三</td>
</tr>
<tr>
<td>内容一</td>
<td>内容三</td>
<td>内容三</td>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
<td>内容三</td>
</tr>
</table>
<hr/>
<tableborder="1">
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
<th>第四列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
<td>第四列</td>
</tr>
</tbody>
</table>
</body>
注意事项：

<table>里面分<thead>和<tbody>,前者是标题，后者是内容；<tr>是一行；<td>是列，<th>是自动加粗的标题

横跨可以指定colspan的属性，竖跨可以指定rowspan的属性





例7iframe

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
<h1>sina</h1>
<iframestyle="width:100%;height:2000px;"src="http://www.sina.com.cn"></iframe>
</body>
</html>




登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信，还有更多惊喜哦~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航