html5学习笔记（一）html基础
2016-11-18 20:01
375 查看
1.2基本格式
1. <!DOCTYPE html> 文档声明，告诉计算机这是一个HTML5文档，不分大小写但一般都这样写。对比一下HTML4 的声明文档：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2. <html> </html> 双标签，所有的文档内容均包含在这个标签里面。
3. <head></head> 不可见内容，包含文档标题、字符编码等。
4. <body></body> 可见内容,图片、文本表单等所有可见内容
<!DOCTYPE html> <!-- 文档声明 --> <html> <!-- 表示文档的开始 -->开始标签 <head> head标签存放文档的基本信息，不可见元素 <meta charset="utf-8"> <!-- 声明字符编码 --> <title></title> <!-- 声明文档标题 --> <script> alert(‘xxx’)</script> 弹出对话框输出内容“xxx” </head> <body> <!—body标签存放文档可见内容 --> </body> </html> <!-- 表示文档结束 -->结束标签
1.3 元素的概念与3个常用标签
HTML 元素指的是从开始标签到结束标签的所有代码。| 开始标签 | 元素内容 | 结束标签 |
| <h1> | h标签用来表示标题 | </h1> |
| <p> | p标签表示一个段落 | </p> |
| <hr> | 我是一个单标签，我会给文档加一个横线 | *注意我没有结束标签哦！ |
1.5 文本元素
文本元素，就是讲一段文本设置成相匹配的结构和含义1.b元素： 我的作用就是 加粗文字；
2.br元素： 我的作用就是强制换行；在同一个段落要换行用这个<br>
3.i元素： 我的作用就是让 文字倾斜；
4.del元素：我的作用就是 删除文子
5.strong元素：我的作用是强调一段文本我的实际作用也是加粗文字.
6.wbr元素： 我的作用是表示安全换行Theshiyigehenchanghenchangdedanci.
再来对比一下没有安全换行的文本Theshiyigehenchanghenchangdedanci.
7.em元素： 我的作用是强调，我的实际作用也是让文字倾斜
8.s元素：我的实际作用就是 删除线;从语义上来看，表示不准确的删除。
9.u元素： 我的实际作用就是 给文字加下划线
10.ins元素： 我的实际作用也是 给文字加下划线；从语义上来看，是添加一段文字，起到强调作用。
11.small元素： 我的作用是 添加小号字体 ，从语义上来看，用于免责声明和澄清声明。
12.sub和sup元素：我们的作用就是添加下标和上标： sub表示下标：HTML5;sup表示上标我的房子100m2
13.dfn元素： 我的作用从语义上看表示定义术语，是对一个词或短语的解释，实际效果就是倾斜文本
14.abbr元素： 我的作用是表示一段文本的缩写,在文本显示上没有任何实际效果，比如WTO
15.q元素： 我的作用从语义上看表示引用来自其他地方的的内容， 我的实际作用就是给文本加上双引号
16.code等元素： code元素用来表示计算机代码片段；function(){}
var元素用来表示编程语言中的变量； num
samp元素表示程序或计算机的输出您没有权限浏览该网页
kbd元素表示某部分内容是由用户利用键盘输入如：请按Enter键
*这几个元素属于英文范畴，必须将lang="en",英语才能体现效果。
17.ruby元素： 我的作用是表示位于表意文字上方或右方的注音符<ruby>英雄<rt>yingxiong</rt></ruby>***不常用，浏览器支持不太好，很多浏览器不支持此功能
18.cite元素： 我的作用从语义上来看就是表示引用其他作品的标题。 实际效果就是文本
19.bdo元素： 我的功能是设置文字方向，必需使用dir属性才可以设置，共两个值，rtl（从右到左）；ltr（从左到右）默认为ltr
rtl就是从右到左，即：right to left
20.mark元素： 我的作用是突出显示文本，用于记号， 我的实际作用就是加上一个黄色的背景。
21.time元素： 我的作用从语义上来看就是表示日期和时间，例如 2015-9-18
22.span元素： 我的作用就是表示一般性的文本，没有特殊效果
dir
属性规定元素内容的文本方向, 共两个值，rtl（从右到左）；ltr（从左到右）默认为ltr ;
dir
属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>以及<script>。
1.7超链接1
学习要点：掌握a标签建立连接的几种方式1.连接其他网址（输入要连接到的网址）
<a href="http://www.baidu.com">1.百度一下</a><br>
2.连接本地文档 （直接输入本地文件地址）
<a href="1_3.html">八阵图</a><br>
3.图片链接（必须假后缀名啊）
<a href="http://www.baidu.com"> <img src=”图片地址.后缀名” alt=” ”> </a><br>
这个是元素的嵌套，图片地址必须要有后缀名不然无法打开 通过点击图片会跳转到对应链接
src属性：加图片链接地址，可以是本地的也可以是网页的；
<img src="http://www.baidu.com/img/bdlogo.gif" /> <img src="bdlogo.gif" />
4.邮箱连接（服务器配置要发邮件就会自动打开）
<a href="mailto:1048355336@qq.com">联系我</a><br>
5.下载链接（服务器要提供下载的东西，当浏览器不能解析就是下载）
<a href="11.tar.gz">11</a>目录语法：
同一个目录：直接写文件名称或
./文件名比如：tp.jpg或者./tp.jpg
在下级（子）目录：xxx/tp.jpg
在下下级目录：xx/xxx/tp.jpg
在上级（父）目录：../tp.jpg
在上上级目录：../../tp.jpg
1.7超链接2
1.target属性的四个值：_self：点击超链接时就在当前位置打开页面，默认值；
<a href="1_3.html" target=”_self”>八阵图</a><br>_blank:点击超链接时新建一个窗口打开;
<a href=”http://www.baidu.com target=”_blank”>百度</a>_top(最顶层框架)和_parent(父框架)
2.id属性：通用属性，可以理解为元素的身份证；name属性：可以理解为元素的名字
<a href=”#id属性值”>锚点1</a> 作用：点击上面的就会定义到下面对应的内容 <a href=”#id属性值”>锚点2</a> href属性值是#+下面定义的id属性值 <a href=”#id属性值”>锚点3</a> <a id=”a”>锚点1 只有<a>标签没有结束标签 这里就可以输入锚点1的内容了 <a id=”b”>锚点2 锚点2内容 <a id=”c”>锚点3 锚点3内容
1.9元素嵌入图片
img的属性1.src:必要属性，指定图片来源的路径;
2.alt属性：当图片无法显示时的替代文字；
3.width和height属性，指定图片的宽度和高度；单位是像素px或百分比（width百分比是相对与body页面大小，heigth百分比无意义）
<img src=”1.png” alt=”当图片无法显示时的替代文字” width=”100px” height=”100px” title=”11221”>title属性
title属性：属性值为字符串，效果是当鼠标移动到该位置时显示该内容。
1.10绝对路径和相对路径
绝对路径需要指出链接资源的绝对位置，与你的HTML文档的位置无关；
1. 服务器中的位置：href="http://www.nipic.com/show/2/52/8144173k9c3cc84f.html"
2. 本地存储的位置：file:///D:\桌面\HTML5课程\HTML5入门实例课程\lesson9\西施.png
相对路径
如果链接资源与你的HTML文档位于同一个路径或者文件夹里，可以省略；否则必须指出相对路径，和HTML文档的位置有关；
目录语法：
同一个目录：直接写文件名称 或 ./文件名 比如：tp.jpg或者./tp.jpg
在下级（子）目录：xxx/tp.jpg
在下下级目录：xx/xxx/tp.jpg
在上级（父）目录：../tp.jpg
在上上级目录：../../tp.jpg
1.11列表
无序列表1无序列表的基本格式
<ul>定义无序列表，<li>是列表项
<ul> <li> 列表内容</li> <li>列表内容</li> <li>列表内容</li> …………… </ul>
2无序列表type的属性
无序列表的type属性有三个值：1.disc（默认值实心小圆；2.circle空心小圆；3.square小方块
<ul style="list-style:none">这个样式表示列表前面什么都没有
<ul type=”disc”> <li> 列表内容</li> <li>列表内容</li> </ul> <ul type=”circle”> <li> 列表内容</li> <li>列表内容</li> </ul>
注意：type属性，html5不提议直使用type属性设置样式，应该用css样式表实现内容和样式的分离来。css可以设置复杂的样式。
有序列表
1有序列表的基本格式
<ol> <li>列表内容</li> <li>列表内容</li> <li>列表内容</li> …………… </ol>2有序列表的type属性
整数（默认值）；2.大（小）写字母A\B\C...3.大小写的罗马字母：i
ii .../I II III
<ol type=”a/A”> <li> 列表内容</li> <li>列表内容</li> </ol> <ol type=”I/i”> <li>列表内容</li> <li>列表内容</li> </ol>3有序列表的start属性
定义列表的开始序号，比如第一项不是数字1，而是从10开始.......
<ol start=”10”> <li>列表内容</li> <li>列表内容</li> </ol>4有序列表的value属性
定义某个单个列表项的序号.......value属性是放在<li>标签里面的
<ol type=”1”> <li>列表内容</li> <li>列表内容</li> <li value=”10”>列表内容</li> <li>列表内容</li> <li value=”19”>列表内容</li> <li>列表内容</li> </ol自定义列表
自定义列表项组成：由 dl定义列表；dt定义列表项目；dd定义列表内容
<dl> <dt>列表名称1</dt> <dd>列表内容</dd> <dt>列表名称2</dt> <dd>列表内容</dd> <dt>列表名称3</dt> <dd>列表内容</dd> </dl>
1.12表格元素
学习要点：表格的基本构成
表格的属性
表格的合并
1.表格构成的3个基本要素
table：表格的范围，外框；用来定义表格，表格的其他元素包含在table标签里面；
tr: 表格的行；
td:表格的单元格
border属性定义表格的边框宽
<table border=”1”> <tr><td>单元格1</td><td>单元格2</td></tr> 第一行 <tr><td>单元格1</td><td>单元格2</td></tr> 第二行 </table><table style=”border:1;text-align:center;margin:0”> margin属性设置页面外边距为0，margin:0; padding:0; list-style:none;全部布满网页中所有的元素的外边距和内边距都为0项目列表前的类型为无
2.关于表格的一点说明
HTML5中删除了HTML4中table的大部分属性，HTML5中推荐使用CSS设定原来table属性实现的效果
3.th元素，为表格添加标题行
th元素用来定义表格的标题单元格，他是tr元素的子元素，必须放在tr标签里边(和td元素一样)；tr元素的内容会自动居中对齐并加粗文字
<table> <tr><th>标题1</th><th>标题2</th><th>标题3</th></tr> --->表格的标题 <tr><td>单元格1</td><td>单元格2</td></tr> 第一行 <tr><td>单元格1</td><td>单元格2</td></tr> 第二行 …………………… </table>4.colspan元素用来横向合并单元格
属性值为正整数，表示该单元格合横向合并的列数，语法为 <td colspan="3"> </td>则在右边两列删除2个单元格才行
<table> <tr><th colspan=”2”>标题1</th><th>标题2</th></tr> --->表格的标题 <tr><td colspan=”2”>单元格1</td></tr> 第一行 <tr><td>单元格1</td><td>单元格2</td></tr> 第二行 …………………… </table>5.rowspan元素用来纵向合并单元格
属性值为正整数，表示该单元格合纵向向合并的行数数，语法为 <td colspan="3"></td>则在下面两行分别删除一个单元格才行
<table> <tr><th rowspan=”3”>标题1</th><th>标题2</th><th>标题3</th></tr> <tr><td >单元格1</td><td>单元格2</td></tr> 第一行 <tr><td>单元格1</td><td>单元格2</td></tr> 第二行 <tr><td>标题1</td><td>标题2</td><td>标题3</td></tr> <tr><td>单元格2</td></tr> <tr><td>单元格2</td></tr> …………………… </table>6.caption元素用来为表格添加标题
用来制定表格的标题或者说明；是table的子元素，必须放在table中使用。
caption的align属性可以设置标题的位置，但是，在HTML5中已经被废弃，不推荐使用，建议使用CSS样式设置。
<table border=”1”> <caption>表格标题</caption> <tr><td>单元格1</td><td>单元格2</td></tr> 第一行 <tr><td>单元格1</td><td>单元格2</td></tr> 第二行 </table>7.thead/tbody/tfoot元素
thead元素：表格的表头；tfoot元素:表格的页脚；tbody元素：表格的主体；表格规范的写法应该包含这三部分内容。注：这三个主要结合CSS、javaScript来使用
<table border="1"> <caption>标题</caption> <thead style=”background:blue”> --表格的表头 <tr><th colspan="3">标题行1</th><th>标题行2</th></tr> </thead> <tbody style=”background:green”> 表格的主体 <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr> <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr> <tr><td>单元格1</td><td rowspan="3">单元格2</td><td>单元格3</td><td>单元格4</td></tr> <tr><td>单元格1</td><td>单元格3</td><td>单元格4</td></tr> <tr><td>单元格1</td><td>单元格3</td><td>单元格4</td></tr> <tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr> </tbody> <tfoot style=”background:blue”> 表格的页脚 <tr><td>备注：</td><td colspan="3"></td></tr> </tfoot> </table
8.colgroup元素 设置列的宽度
colgroup元素用来组合列，他的span属性可以设置组合列的数目；它可以包含一个子元素
col;
colgroup元素为table元素的子元素，必须放在caption元素之后，thead元素之前。
<table border="1"> <caption>table</caption> <colgroup span="1" style="width:100px"><col style=”background:red”></colgroup> span默认为1，表示1列，span=n表示n列都是后面的宽度， <colgroup span="1" style="width:300px"></colgroup> 要设置不同列不同宽度，就像这样写几个colgroup。 <colgroup span="1" style="width:600px"></colgroup> <thead> <tr><th colspan="3">title</th></tr> </thead> <tbody> <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr> <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr> <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr> <tr><td style=”height:25px”>单元格</td><td>单元格</td><td>单元格</td></tr> 设置这行单元格高度 <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr> </tbody> <tfoot> <tr><td>备注：</td><td colsapn="2"></td></tr> </tfoot> </table>
9.col元素 是单标签，设置列的属性，如颜色
col元素用来设定列的属性，他也可以使用span属性；
col元素一般作为colgroup元素的子元素配合使用。
<colgroup span="1" style="width:100px"><col style=”background:red”></colgroup>表格例子：
<!DOCTYPE HTML>
<html>
<head>
<title>css样式表格</title>
<meta charset="utf-8">
<style type="text/css">
caption{font-size:30px;color:red}
td{height:25px;font-size:15px;align:center}
th{height:25px}
thead{background:blue}
tfoot{background:blue}
</style>
</head>
<body>
<table border="1" align="center">
<caption >特殊符号的使用</caption>
<colgroup span="1" style="width:100px"><col span="1" style="background:#FAEBD7"></colgroup>
<colgroup span="2" style="width:200px">
<col span="1" style="background:#00FFFF">
<col span="1" style="background:#8A2BE2">
</colgroup>
<colgroup span="1" style="width:100px"><col style="background:#006400"></colgroup>
<thead>
<tr><th>符号</th><th>实体名称</th><th>实体数值</th><th>描述</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</tbody>
<tfoot>
<tr><td colspan="4">其他的特殊符号大家可以在网上查看就可以。</td></tr>
</tfoot>
</table>
</body>
</html>
1.14特殊符号的使用
1.HTML 实体在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
实体元素：有些特殊符号浏览器是不能解析的，就要用特殊符号的实体代替，eg：
表示一个空格，参考
《HTML实体符号参考手册》
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML基础第六讲---表格
- Html的表单基础知识
- HTML基础学习笔记
- html基础 — area(图像的作用区域标记)
- Lesson01_01 HTML基础
- html基础知识
- html精简总结基础部分
- HTML 基础
- 视频下载：HTML基础及应用
- HTML基础-第一讲
- CDHtmlDialog类的使用心得 -- [今天转几篇基础桌面技术文章]
- 基础html代码大全参考
- 1.文档基础：为HTML文档提供基本结构的标记。
- HTML基础－HTML文档基本结构
- HTML基础-第二讲
- HTML基础第四讲---图像
- [HTML基础知识]Meta标签详解
- W3C的HTML工作组主席Steven pemberton回答的关于XHTML的常见基础问题
- Lesson01_01 HTML基础
- xml 基础 《 xml+xsl=>html 》