|
|
前言: 最近开始学前端了，这篇博客主要介绍html的一些主要标签，写完这篇博客，我会用刚学的html做一个简单的登陆界面~~
一、HTML介绍
HTML(Hyper Text Mark-up Language)超文本标记语言，是一种制作万维网页面标准语言。相当于定义一套规则，大家都来遵守它。这样就可以让浏览器根据标记语言的规则去解释它。
浏览器(客户端)向服务端发出请求，服务端会返回字符串，浏览器会根据自己规定的规则，将字符串渲染成相应的界面。
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档.
二、<head>头部
meta
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
页面编码:
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8:
1 <meta charset="UTF-8">
每2秒刷新:
1 <meta http-equiv="refresh" content="2"/>
跳转:
打开html文件，5秒后会自动跳转到www.etiantian.org:
1 <meta http-equiv="refresh" content="5; url=http://www.etiantian.org">
title:
标签页显示为hello: <title>hello</title>
如果要在hello前加小图片，可到别人的网站，copy图片到电脑，然后在head头部加上下面的代码:
1 <link rel="icon" href="favicon_1c83d380.ico">
效果图:
注意的点:
- 规范: html需小写; 每一个级别都要缩进
- 注释: 可多行注释也可单行注释,eg: <!--<meta http-equiv="refresh" content="5"/>-->
- Ctrl + ? :可将选中的一次性加注释
三、<body>
标签一般分为两种: 块级标签和内联标签.
块级标签(会占一整行) eg:<h1></h1>
内联标签(只占字体所占的空间大小) eg:<a></a>
1、p标签
p表示段落，默认段落之间是有间隔的。
2、br标签
br是换行<br/>
3、a标签
点击百度，当前界面则跳转到www.baidu.com:
1 <a href="http://www.baidu.com">百度</a>
点击百度，打开新界面www.baidu.com:
1 <a href="http://www.baidu.com" target="_blank">百度</a>
点击S2,跳转到本机文件s2.html:
1 <a href="s2.html" target="_blank">S2</a>
在html中，每一个标签都可以有一个id,该id必须是唯一的。点击"看第二章"，当前界面会跳到第二章的界面:
1 <ahref="#tt">看第二章</a>
2 <divstyle="height:1000px;background-color:red;">第一章</div>
3 <divid="tt"style="height:1000px;background-color:yellow;">第二章</div>
4、div标签
用于布局
5、img 图片标签
和a标签结合点击图片直接跳转，title指定鼠标放到图片后显示的内容，style定义宽高，alt指定图片不存在时的显示信息
1 <a href="https://www.baidu.com">
2 <img src="i.png" title="大帅锅" style="height: 300px;width: 220px;" alt="索隆">
3 </a>
6、H标签(标题)
1 <h1>h1</h1>
2 <h2>h2</h2>
3 <h3>h3</h3>
4 <h4>h4</h4>
5 <h5>h5</h5>
6 <h6>h6</h6>
7、select标签
1 <select>
2 <option>北京</option>
3 <option>上海</option>
4 <option>广州</option>
5 <option>惠来</option>
6 </select>
7
8 <select size="2">
9 <option>北京</option>
10 <option>上海</option>
11 <option>广州</option>
12 <option>惠来</option>
13 </select>
14
15 <select size="3" multiple="multiple">
16 <option>北京</option>
17 <option>上海</option>
18 <option>广州</option>
19 <option>惠来</option>
20 </select>
21
22 <select>
23 <optgroup label="广东省">
24 <option>惠来</option>
25 <option>广州</option>
26 </optgroup>
27 <optgroup label="山西省">
28 <option>太原</option>
29 <option>平遥</option>
30 </optgroup>
31 </select>
运行界面:
以第一个复选框为例，在未选时默认是北京，如果想默认为惠来，可加上一个属性selected，PS:提交数据时，是提交value
1 <option value="4" selected="selected">惠来</option>
8、input系列标签
复选框(eg: 兴趣): <input type="checkbox"/>
单选框(eg: 男女): <input type="radio"/>
上面两种框默认都是未选中的状态，加上checked属性则默认为选中状态
1 <input type="radio" checked="checked"/>
radio的name相同，则表示选中的时候是互斥
1 <p>男:<input name="gender" type="radio"/></p>
2 <p>女:<input name="gender" type="radio"/></p>
文本框/密码框/button按钮/submit按钮/上传文件
1 <input type="text"/>
2 <input type="password"/>
3
4 <input type="button" value="btn"/>
5 <input type="submit" value="sub"/>
6 <hr />
7 <input type="file"/>
运行界面:
9、form标签
form相当于一个表单，配合input标签submit可以把表单的内容提交到指定位置，提交内容以字典的形式提交{‘user’:xx,'email':xx,'pwd':xx},key值为name属性值
button只是一个简单的按钮; submit是提交表单的按钮(往后台提交数据)
1 <h2>Form</h2>
2 <form action="http://www.baidu.com">
3 <div>
4 主机名:<input name="host" type="text"/>
5 </div>
6 <div>
7 端口:<input name="port" type="text"/>
8 </div>
9 <div>
10 用户名:<input name="username" type="text"/>
11 </div>
12
13 <input type="button" value="提交"/>
14 <input type="submit" value="提交"/>
15 </form>
运行界面:
如果想要提交文件，需要在其所在的form标签中添加特殊的一个属性: enctype="multipart/form-data" method="POST".
action＝“A”: A表示数据提交的地方
1 <form action="A" enctype="multipart/form-data" method="POST">
2 <input type="text"/>
3 <input type="file"/>
4 </form>
10、textarea标签
可输入多行的文本框
1 <textarea>zcl</textarea>
2 <input type="text" value="zcl"/>
运行界面:
11、label标签
label标签中的for属性与input标签中的id相同，效果是只要点击文字就选中了对应的checkbox
1 <label for="cb1">婚否</label>
2 <input id="cb1" type="checkbox"/>
12、列表标签ul,ol,dl
1 <ul>
2 <li>111</li>
3 <li>222</li>
4 </ul>
5 <ol>
6 <li>aaaa</li>
7 <li>bbbb</li>
8 </ol>
9 <dl>
10 <dt>标题</dt>
11 <dd>内容1</dd>
12 <dd>内容2</dd>
13 </dl>
运行界面:
13、<hr />标签
<hr/> 水平分割线
14、table标签
border="1": 设置边框 colspan: 合并列 rowspan: 合并行
1 <table border="1">
2 <thead>
3 <tr>
4 <th>第一列</th>
5 <th>第二列</th>
6 <th>第三列</th>
7 </tr>
8 </thead>
9 <tbody>
10 <tr>
11 <td colspan="2">h1 h2</td>
12 <td>h3</td>
13 </tr>
14 <tr>
15 <td rowspan="2">hh1 hhh1</td>
16 <td>hh2</td>
17 <td>hh3</td>
18 </tr>
19 <tr>
20 <td>hhh2</td>
21 <td>hhh3</td>
22 </tr>
23 </tbody>
24 </table>
运行界面:
15、span标签
对文本中的一部分进行着色
1 <p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
总结:
- id,style,name所有标签都可以定义的属性
- target, href是a标签特有的属性
- src是img标签特有的属性
|
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-6-21 21:31:37
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡