首页 > > 网页制作 > css >

【前端】:HTML

2018-06-24 00:57:56来源：未知阅读 ()

前言: 最近开始学前端了，这篇博客主要介绍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:
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标签特有的属性

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：flex布局——回顾

下一篇：HTML_<select>

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签