首页 > 代码库 > html基础
html基础
Html基础
2016-11-16 11:32:14
主要知识点有：
1 Html介绍
2 html结构
3 html标签和元素
4 html属性
5 html常用标签
6 html文本格式化
7 html样式
8 html链接
9 html表格（table tr td）
10 html图像
11 html列表
12 html布局
13 html表单
1 Html介绍
Html是一种用来描述网页的语言，英文全称为Hyper Text Markup Language,即超文本标记语言。页面内可以包含图片、链接、音乐等非文字元素。Html是一种标记语言，通过标记标签来描述网页，html文件后缀名是（.html），你可以通过txt编辑器编辑然后保存为.html格式，之后就可以在浏览器中打开，就能看的你所编辑的网页；或者也可以使用专用软件进行编辑，像Dreamweaver、editplus、notepad++、Brackets等。
在任何一个浏览器网页上右键点击-查看源文件，就可以看的网页的html代码。
2 html结构
代码形式如下：
<html>
<head>
<title>.....</title>
</head>
<body>
<p>.....</p>
</body>
</html>
3 html标签和元素
标签是被尖括号包围起来的的对象，绝大多数标签是成对出现的。标签中第一个标签是开始标签，第二个标签是结束标签。也被称为开放标签和闭合标签。
元素是由标签和其包围的内容组成，结构如<开始标签> 元 素 内 容 <结束标签>。例如< p>内容< /p>这就是一个元素，< br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签。
HTML元素语法特点：
a．HTML 元素以开始标签起始
b．HTML 元素以结束标签终止
c．元素的内容是开始标签与结束标签之间的内容
d．某些 HTML 元素具有空内容（empty content）
e．空元素在开始标签中进行关闭（以开始标签的结束而结束）
f．大多数 HTML 元素可拥有属性
4 html属性
属性是对标签信息的进一步补充，为元素提供更多信息。如href="http://www.baidu.com"，这一部分就叫做< a>标签的属性，是对< a>标签的补充说明，既指向的网页。
关于属性有以下语法规则：
a．是在 HTML 元素的开始标签中定义。
b．总是以名称和值对应的形式出现，比如：name="value"。
c．属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
常用的属性有align、bgcolor等
5 html常用标签
5.1< h1> - < h6>标签
Html的标题是通过< h1> - < h6> 等标签进行定义的。示例如：
<h1>这是一个标题</h1>
标签虽然支持大小写，但万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。因此最好一律小写。
5.2< p>标签
HTML段落是通过 < p> 标签进行定义的。示例如：
<p>这是一个段落</p>
5.3 < a> 标签
HTML链接是通过 < a> 标签进行定义的。示例如：
<a href="http://baidu.com">跳转到百度首页</a>
5.4 <img/>标签
HTML图像是通过<img/>标签进行定义的。示例如：
<img src="http://www.mamicode.com/p1.jpg" width="100" height="142" />width为图片宽度，height为图片高度
5.5 <br/>标签
<br/>是换行符。<p>标签结束以后也后一个换行的动作，那< p>标签和< br/>标签有什么异同呢？
相同之处：是<br>和<p>都是有换行的属性及作用
不同之处：<br/>是只需一个单独使用，而<p>和< /p>是一对使用
<br/>标签是小换行提行（相当于我们平时文本中输入一个回车），<p>标签是大换行（分段，相当与两个回车）,各行作用。
5.6 < pre>预格式文本标签
将内容丢到<pre>标签中，这些内容在网页中显示的位置与编辑器的编辑位置差不多。用法为：< pre>....< /pre>
6 html文本格式化
网页中各种各样的字体、式样都是有文本格式化定义的。主要标签如下：
标签 描述
< b> （bold）粗体
< big> （big）大字体
< em> （emphasized）强调字
< i> （italic）斜体
< small> （small）小字体
< strong> (strong)加重语气
7 html样式
Style是一种改变所有html元素样式的通用方法。其可以将背景颜色、字体样式、字体尺寸、字体颜色、对齐方式通过一条语句定义好。如下示例：
<h1 style="background-color:blue; text-align:center">This is a header</h1>
8 html链接
8.1给文字加链接。示例：
< a href="http://www.shiyanlou.com">shiyanlou< /a>当点击shiyanlou这几个字时将会跳转到实验楼网站首页。
< a href="http://www.mamicode.com/another.html">another html< /a>当点击another html时将会跳转another.html
超链接打开方式_self（自我覆盖，默认）、_blank（创建新窗口打开新页面），示例：
< a href="http://www.shiyanlou.com"target="_blank">shiyanlou< /a>
有时希望当光标停留到链接上时会提示下一个链接的内容，提示语言就会显现，会让页面显现的很简介。设计到的属性就是title。示例如：
< a href="http://www.shiyanlou.com"title="this word will link to the wed of shiyanlou">shiyanlou< /a>
8.2給图片加链接。示例：
< a href="http://www.shiyanlou.com"><img src="http://www.mamicode.com/p1.jpg" width="100" height="142" />< /a>当点击p1.jpg时将跳转到实验楼网站首页。
8.3超链接实现书签
<a href="http://www.mamicode.com/#跳转目的地名称">跳转起始字符</a>
...
...
...
<a name="跳转目的地名称">跳转目的地字符</a>。当点击跳转起始字符时，就会跳转到跳转目的地字符。
9 html表格（table tr td）
table、tr 与 td 这几个标签组合起來才是個完整的表格，表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。< th>标签用来定义表头。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。结构如下：
<table>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
</table>
这是一个两行三列的表格。colspan：控制此单位所占列数 rowspan：控制此单位所占行数。
标签：< th>表头< /th>：设置表头
标签：< caption>标题< /caption>：设置表的标题
属性：cellpadding="..."设置单元格边距
属性：bgcolor="..."设置表格背景颜色
属性：background="..." 以某张图片作为表格背景
10 html图像
a.设置一张图片为网页背景图片在body 属性中加入background属性添加背景图片。示例如下：
<body background="./p1.jpg">
</body>
b.三种不同的对齐方式
<p> align top<img src="http://www.mamicode.com/julizi.png" align="top" ></p>
<p>align middle<img src="http://www.mamicode.com/julizi.png" align="middle"></p>
<p>align left<img src="http://www.mamicode.com/julizi.png" align="left" ></p>
c.width height 两个属性是调整图片尺寸大小的。
d. 创建图像映射
< map>标签，用来指定图片,< area>用来指定超链接区域。在< area>标签中我们会涉及到shape ，coords， href属性，分别用来指定超链接区域形状，超链接区域坐标，还有超链接跳转地。示例如下：
<html>
<head>
<title>image test</title>
</head>
<body background="./qwe.gif">
<p>tap the li zi </p>
<img src="http://www.mamicode.com/julizi.png" usemap="#lizi"/>
<map name="lizi">
<area shape="rect" coords="50,10,100,60" href="http://www.mamicode.com/img.html" target="_blank"
</map>
</body>
</html>
11 html列表
HTML列表标记主要有三种：有序列表、无序列表和定义列表。
a． 有序列表。
有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。其type属性"a"表示以小写字母来排序;"A"就是使用大写字母来排序;"i"就是以小写罗马数字来排序;"I"就是以大写罗马数字来排序。start属性决定起始地。示例：
<ol type="a"start="b">
<li></li>
<li></li>
</ol>
b.无序列表
无需列表排序的时候就是给每个列表项加各种小符号其中分为Disc（默认）实心黑点;Cirle小圈;square方点。示例如下：
<ul type="square">
<li></li>
<li></li>
</ul>
c.定义列表
定义列表通常用于术语的定义和解释。定义列表由< dl>开始，术语由< dt>开始，解释说明有< dd>开始，< dd>....< /dd>里的文字缩进显示。示例如下：
<dl>
<dt>shuyu1</dt>
<dd>jieshi1</dd>
<dt>shuyu2</dt>
<dd>jieshi2</dd>
</dl>
12 html布局
网页布局可以通过< table>元素，或者< div>元素实现。详细知识见实验楼网站web前端课程html基础html超文本（二）。网站链接为https://www.shiyanlou.com/courses/19/labs/554/document
13 html表单
表单标签就是用于网页中的数据提交，比如我们注册网页，在留言板中留言、评论等可以填写数据，提交处理地方都需要表单标签，form表单标签内有输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。示例如下：
<form>
user：
<input type="text" name="user">
<br />
password：
<input type="password" name="password">
</form>
下面我们再增增添两种选框，一种是多选，一种是单选。单选框：
<form>
<input type="radio" name="sex" value="http://www.mamicode.com/male" /> Male
<br/>
<input type="radio" name="sex" value="http://www.mamicode.com/female" /> Female
</form>
多选框：
<form>
<input type="checkbox" name="married" />
married
<br/>
<input type="checkbox" name="have a job" />
have a job
<br/>
<input type="checkbox" name="chinese" />
chinese
</form>
本文章是作者在实验楼网站上的学习总结，其中部分内容直接复制了实验楼课程资料。网站地址为
https://www.shiyanlou.com/courses/19，如侵犯了相关权益请联系扣扣913672133
html基础