html5学习笔记（一）html基础

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>

扫描二维码关注公众号，回复： 4933393 查看本文章

我是一个单标签，我会给文档加一个横线

*注意我没有结束标签哦！

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表示下标：HTML₅;sup表示上标我的房子100m²

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:[email protected]">联系我</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：

&#160表示一个空格，参考

《HTML实体符号参考手册》

开始标签	元素内容	结束标签
<h1>	h标签用来表示标题	</h1>
<p>	p标签表示一个段落	</p>
<hr> 扫描二维码关注公众号，回复： 4933393 查看本文章	我是一个单标签，我会给文档加一个横线	*注意我没有结束标签哦！