html5学习笔记(一)html基础

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/JOJOY_tester/article/details/53222425

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中删除了HTML4table的大部分属性,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元素:表格的主体;表格规范的写法应该包含这三部分内容。注:这三个主要结合CSSjavaScript来使用

 <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实体符号参考手册》


















阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页