您的位置：首页 > Web前端

前端：HTML

2016-06-24 10:32 507 查看

首先推荐一个可以练习HTML的链接：http://www.w3school.com.cn/html/index.asp

接下来还是简单介绍一下HTML。

什么是HTML

htyper text markup language 即超文本标记语言

HTML不是一种编程语言，而是一种标记语言

标记语言是一套标记标签

HTML 使用标记标签来描述网页

HTML 标签

HTML 标签是由尖括号包围的关键词，比如 <html>。注：所有标签中的单词不可能以数字开头。

HTML 标签通常是成对出现的，比如 <b> 和 </b>。注：标签不区分大小写，推荐使用小写。

标签对中的第一个标签是开始标签，第二个标签是结束标签。两个标签之间的部分叫标签体。

开始和结束标签也被称为开放标签和闭合标签

有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />

标签可以嵌套。注：不能交叉嵌套：<a><b></a></b>

标签的属性：

通常是以键值对形式出现的. 例如 name="alex"

属性只能出现在开始标签或自闭和标签中.

属性名字全部小写. *属性值必须使用双引号或单引号包裹例如 name="alex"

如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

HTML文档 = 网页

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

如图：在浏览器中输入访问域名，服务器将域名对应的.HTML再返回给浏览器，我们就可以看到一个友好的页面

HTML文档树形结构图：

通过树形图可以了解到.HTML的大概组成，接下来就介绍下这些组成。

<!DOCTYPE html>标签

这相当于一个声明，位于文档中的最前面的位置。我们还是使用Pycharm创建一个HTML File文档，创建之后就可以看到自动生成了HTML的一些内容。

head标签：

<meta name="keywords" content="meta,html meta">：设置被搜索关键字，别人通过输入content里面的字就可以快速搜索到此网页。
<meta name="description" content="这是次网站内容描述">：顾名思义，就是描述网页的功能
<meta http-equiv="Refresh" content="2">：每隔两秒刷新网页
<meta http-equiv="Refresh" content="2;https://www.baidu.com">：每隔两秒刷新网页并跳转到百度页面，注意分号
<title>百度</title>：我们打开百度的时候会发现浏览器名字就是一个图标和百度两个字，这就是实现百度那两个字的功能。
<link rel="icon" href="http://www.jd.com/favicon.ico">：网页标题的图标。这里要注意icon，后面的图标是京东的图标。

body标签：

块级标签和内联标签

块级标签（在浏览器显示时，以新行来开始和结束）：<p><h1><table><ol><ul><form><div>

内联标签（在浏览器显示时，不会以新行开始）：<a><input><img><sub><sup><textarea><span>

block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素

inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

一、基本标签

标题：<h1>-<h6>

换行（<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。）：<br>

段落：<p>段落</p>

加粗标签：<b>加粗标签</b> 或者 <strong>strong</strong>

为文字加上一条中线：<strike>为文字加一条中线</strike>

斜体：<em>斜体</em>

上角标：3<sup>2</sup>

下角标：C<sub>1</sub>

水平线：<hr>

特殊字符：< >"©®

<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
<p>段落</p>
<b>加粗标签</b>
<br><strong>strong</strong>
<br><strike>为文字加一条中线</strike>
<br><em>斜体</em>
<br>3<sup>2</sup>
<br>C<sub>1</sub>
<hr>
<br><
<br>>
<br>"
<br>©
<br>®
</body>

效果演示：

更多的基本标签和特殊字符可以去推荐的那个网址找或者可以找度娘。。。。。。

二、图形标签<img>：

src: 要显示图片的路径.

alt: 图片没有加载成功时的提示.

title: 鼠标悬浮时的提示信息.

width: 图片的宽

height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

示例：

<img src="1.jpg" width="600px" height="600px" title="香港街头" alt="图片加载失败">

效果演示图：

三、超链接标签（锚标签）<a>：

　　<a href="url">链接</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

示例：

<a href="https://www.baidu.com">百度</a>
<a href="https://www.baidu.com" target="_blank">百度</a>

第一个链接标签是直接在当前页面转到百度页面，第二个链接标签加了个target="_blank"属性,表示会在新窗口打开百度网页。

效果演示图：

关于实现目录的跳转也是在<a>标签中实现：

比如一本书，我们首先看到的是目录，通过目录找内容，在网页上也可以实现。

注：<a href="#tips">标签体</a> 对应 <h1 id="tips">标签体</h1>。对应可以是标题标签、段落标签、图片标签等。

<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>
<a href="#4">第四章</a>
<a href="#5">第五章</a>

<h1 id="1">第一章</h1>
<h1 id="2">第二章</h1>
<h1 id="3">第一章</h1>
<h1 id="4">第二章</h1>
<h1 id="5">第二章</h1>

效果演示图：这里只展示<a>标签的效果

四、列表标签：

<ul>: 无序列表

<ol>:有序列表

<li>:列表中的每一项

无序：

<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

效果演示图：

有序：

<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>

效果演示图：

<dl> 定义列表

<dt> 列表标题

<dd> 列表项

<dl>
<dt>四川省</dt>
<dd>成都</dd>
<dd>遂宁</dd>
<dd>绵阳</dd>
<dd>攀枝花</dd>

<dt>广东省</dt>
<dd>广州</dd>
<dd>深圳</dd>
<dd>潮汕</dd>
<dd>惠州</dd>
</dl>

效果演示图：

五、表格标签<table>：

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素百分比.（最好通过css来设置长宽）

<tr>: table row

<th>: table head cell

<td>: table data cell

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区

表格一：

<table border="1" cellpadding="10"cellspacing="10" style="width:500px">
<thead>
<tr>
<td>第一列</td>
<td>第一列</td>
<td>第一列</td>
</tr>

</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>

</table>

效果演示：

表格二：

<table border="1" cellpadding="10"cellspacing="10">
<tr>
<td>第一列</td>
<td>第一列</td>
<td>第一列</td>
</tr>
<tr>
<td colspan="2">1,2</td>

<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6,9</td>
</tr>

<tr>
<td>7</td>
<td>8</td>
</tr>

效果演示图：

六、表单标签<from>：

表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset 和 label元素。

1.表单属性

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。

action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get 默认取值就是 get（信封）

get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

get/post是常见的两种请求方式.

2.表单元素

<input> type: text 文本输入框

　　password 密码输入框

　　radio 单选框

　　checkbox 多选框

　　submit 提交按钮

　　button 按钮(需要配合js使用.) button和submit的区别？

　　file 提交文件：form表单需要加上属性enctype="multipart/form-data"

name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。

value: 表单提交项的值.

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

checked: radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

<select> 下拉选标签属性：

name:表单提交项的键.

size：下拉显示个数

multiple：multiple ：按住Ctrl可多选

<option> 下拉选中的每一项属性：value:表单提交项的值. selected: selected下拉选默认被选中

<optgroup>为每一项加上分组

<textarea> 文本域 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行

<label>

<label for="www">姓名</label>
<input id="www" type="text">

<fieldset>

　　<fieldset>
　　<legend>登录吧</legend>
　　<input type="text">
　　</fieldset>

示例：

注：

style：是使用CSS里的功能。

<body>
<h1 style="background-color: aquamarine" method="post" enctype="multipart/form-data">Welcome you to register</h1>
<form>
<p>Name:<input type="text" name="query"></p>
<p>Password:<input type="password" name="pwd"></p>
<br>
<h2>Gender</h2>
<p>Man<input type="radio" name="gender" value="boy"></p>
<p>Woman<input type="radio" name="gender" value="girl"></p>
<br>
<h2>Hobby</h2>
<p>
Sports<input type="checkbox" name="hobby" value="s">
Music<input type="checkbox" name="hobby" value="m">
Travel<input type="checkbox" name="hobby" value="t">
</p>
<br>
<h2>Province</h2>
<select name="language">
<option></option>
<option value="xizang">西藏自治区</option>
<option value="xinjiang">新疆维吾尔自治区</option>
<option value="guangxi">广西壮族自治区</option>
</select>
<p>
<br>
<h2>Notes:</h2>
<textarea name="notes" style="width: 600px;height:100px"></textarea>
</p>
<p><br><input type="file" value="file_name"></p>
<p><input type="submit" value="Submit"></p>

</form>
</body>

效果演示图：

补充<select>：

<h2>Province</h2>
<select name="language" multiple size="3">
<option></option>
<option value="xizang">西藏自治区</option>
<option value="xinjiang">新疆维吾尔自治区</option>
<option value="guangxi">广西壮族自治区</option>
</select>

效果演示图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航