【前端】-HTML

来源：互联网发布：淘宝上通过网盘交易的编辑：程序博客网时间：2024/06/05 09:11

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

0 0