test: 博客美化中……

【前端】:HTML

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

 

posted @ 2017-02-10 17:39  前程明亮  阅读(711)  评论(1)  编辑  收藏  举报