CSS/CSS3

01 - HTML5知识点汇总一

2016-10-24  本文已影响74人  西巴撸

内容LongLongLong是一种情怀

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

在学习HTML5之前有几点忠告给大家

1.HTML5要学习的内容很多很杂,会越来越难,如果有人给你说H5一点都不难的话,那一定是坑你 ! 或者是对你有所图.HTML5相对于别的语言来说可能稍微有点轻松,但是绝对不简单!
2.其实,前期学H5的一些标签和样式挺简单的,你会感觉很轻松 ! 但是后面的内容会越来越难.
3.首先你得明白得学习一些什么东西,包括那些内容.下面是我给大家罗列的全部内容
4.在你学习任何一门语言的时候,一定要有心里准备和坚韧不拔的毅力.
下面废话不多话,直接上代码
**HTML5全部内容**

浏览器功能

服务器

什么是URL

**
http://127.0.0.1：80/index.html（完整的格式） http://URL协议类型
127.0.0.1服务器的IP地址
:80服务器的端口号
index.html需要访问的资源名称**

认识HTML

字符集

<meta charset="GBK">     GBK中文汉字 国标  纯中文网站
<meta charset="UTF-8">   UTF-8 国际通用 字库很全

DTD文档声明

<!DOCTYPE html>     作用告诉浏览器  我是一个文档

H系列标签

h1 h2 h3 h4 h5 h6 标签 只有h1到h6   主标题  字体依次变小
<!--在浏览器上显示一条分割线-->
<!--注意：独占一行-->
<hr/>标签
<!--注意：在浏览器中独占一行-->
<p>我是一段文本</p>
<!--快速添加前后标签--><!--选中文字，然后快捷键：Ctrl+Alt+T-->

注释

<!--<p>我是段落</p>-->  工作中注释非常重要 注释的内容不会显示在页面上
<!--快捷键：Ctrl + / -->

img标签和路径问题

img标签是英文的缩写，用来显示一张图片

img标签的格式

注意点

和H系列的标签不一样，img标签不会独占一行- 如果我们手动指定图片的宽度和高度，会使图片变形 如果不想图片变形，只指定一个值，系统会自动自动高度，都是等比拉伸，不会变形

img包含的属性 ：

路径问题：

**1.通过相对路径赋值相对路径就是每次从.html中查找
2.同级就是图片和.html存储在同一个文件夹中格式：src="QRCode.jpg"含义：在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片
下级下级就是存储图片的文件夹和.html文件在同一个文件夹中格式：在.html文件所在的文件夹中找到名称教程images的文件夹

上级上级就是存储图片的位置和存储代码的文件夹在同一个文件夹中格式：src="../QRCode.jpg"../代表跳出现在的文件夹从上级文件夹中查找名称叫做QRCode.jpg的文件
3.通过绝对路径赋值绝对路径每次都是从指定的硬盘开始查找
4.注意：
路径中不要出现中文，否则会导致无法显示图片
通过相对路径指定，不能跨硬盘**

换行标签

a标签

**1.a标签不仅可以让文字可以点击跳转，还可以让图片跳转
2.一个a标签必须有一个href属性，不然无法实现跳转

3.如果通过a标签的href属性指定一个URL地址的时候，前面必须加上(http:)//或(https://)
4.a标签除了可以指定网络地址以外，还可以指定本地地址**

<a href="https://www.跳转地址">内容页</a>
<a href="https://www.跳转地址">
  ![](图片地址)
</a>

<a href="本地地址.html">内容标题.html</a>

<a href="https://www.链接地址" target="_self">地址页</a>
<a href="https://www.链接地址" target="_blank">地址页</a>

<a href="https://www.nuomi.com/?cid=002540" title="友情提示:会跳转到百度糯米首页">糯米</a>

base标签

1.base标签必须写在head标签的开始标签和结尾标签中间
2.如果既在base标签中指定了target，又在a标签中指定了target，那么浏览器会按照a标签中指定的方式打开

<base target="_blank">   控制整个页面的跳转  插入在head标签之中
<a href="https://www.跳转地址" target="_self">比如百度糯米</a>
<a href="http://news.跳转地址">比如百度新闻</a>
<a href="https://www.跳转地址">比如hao123</a>
<a href="http://跳转地址">比如百度地图</a>
<a href="http://跳转地址">比如百度贴吧</a>
<a href="http://跳转地址">比如百度视频</a>

假链接

锚点

1.通过a标签跳转到指定位置的时候，是没有过度动画效果的，直接一下就跳到指定位置
2.a标签除了可以跳转到当前界面的指定位置以后，还可以跳转到其他界面的时候直接跳转到指定位置格式：

<a href="13-锚点的测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面3333</h2>

<a href="13-锚点的测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>
<h2>我是顶部</h2>
<a href="#center">跳转到中部</a>
<br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/>
<h2 id="center">我是中部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>我是底部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

无序列表

<ul> 
      <li>需要显示的内容</li>
</ul>
li其实就是list item（列表条目）的缩写  list：（列表） item：（条目）

1.ul标签是用来给一堆数据添加语义的，而不是给用来给它们前面添加小圆点的
2.ul标签和li标签是一个组合，一般情况同时出现，不会单个出现
3.ul标签和li标签是一个组合，所以ul标签中不推荐包含其他标签无序列表的

1.新闻列表
2.商品列表
3.导航条

<h2>中国的城市有那些</h2>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>武汉</li>
        <li>天津</li>
    </ul>

练习
<hr width="500px" align="left">
<ul type="circle">
    <li>男子帮前车拆穿碰瓷 遭"碰瓷党"砸穿车窗</li>
    <li>老鼠咬坏天然气胶管 户主点火做饭气灶闪爆</li>
    <li>小区业主和物业激战多年 老师被逼成“泼妇”</li>
    <li>体操美女不幸爆菊身亡！下体血肉模糊</li>
    <li>小伙陷传销欲骗家人钱 PS剁手指照被识破(图)</li>
</ul>
**无序列表练习**

1.一定记住ul标签中最好只放li标签
2.但是li标签中还可以继续添加其他的标签
3.无序列表中的li标签除了可以添加别的标签丰富界面以后，还可以添加ul标签ul中可以有li，li中又可以有ul

有序列表

        <ol>(ordered list缩写)
            <li>需要显示的内容</li>
        </ol>

定义列表

        <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
        </dl>

1.dt是英文definition title的缩写，所以dt的含义就是用来定义列表
2.dd是英文definition description的缩写，所以dd的含义就是用来定义标题对应的描述

**1.和ul和ol一样，dl和dt/dd是一个整体，所以他们一般都是同时出现的，不会单独出现
2.和ul和ol一样，由于dl和dt/dd是一组合标签，所以dl中建议只放dt和dd标签

3.一个dt可以没有对应的dd，也可以有多个对应的dd，但无论有或者没有dd都不推荐使用，只推荐一个dt对应一个dd
4.和li标签一样，需要丰富界面时，我们可以在dt和dd标签中继续添加其他标签**

表格标签基本使用

    <table>
        <tr>
            <td>需要显示的内容</td>
        </tr>
    </table>
    table代表整个表格，一对table标签就是一个表格
    tr标签代表表格中的一行数据，一对tr标签就是一行数据
    td标签代表表格中一行的一个单元格，一对td标签就是一行中的一个单元格

1.表格标签中有一个边框属性，这个属性决定了边框的宽度，默认情况下属性值是0，所以看不到
2.表格标签和列表标签一样，是一个组合标签，所以table/tr/td同时出现，不会单独出现

表格标签的属性

1.可以给td标签和table标签使用
2.表格的宽度和高度默认按照内容的尺寸来调整，也可以给table标签设置width和height来手动指定
2.如果给td标签设置width和height属性，会修改当前单元格一行的宽度和高度，不会影响整个表格

1.其中水平对齐可以给table和tr和td标签使用
2.垂直对齐只能对tr和td标签使用
3.给table标签设置align属性，可以控制表格在水平方向的对齐
4.给tr标签设置align属性，可以控制当前行中单元格内容的水平方向对齐
5.给td标签设置align属性，可以控制当前单元格内容在水平方向的对齐方式

**1.如果td和tr中都设置了align属性，那么单元格中的内容会按照td中设置的来对齐

2.给tr标签设置valign属性，可以控制当前行中所有单元格的内容，在垂直方向的对齐方式
3.外边距和内边距属性 只能对table标签使用
4.外边距就是单元格和单元格之间的距离 默认情况下，外边距的距离是2px
5.内边距就是表格中的内容和单元格边框之间的距离 默认情况下内边距是1**

    <table border="1" width="500px" height="300px" align="center" cellspacing="12" cellpadding="20">
        <tr valign="bottom">
            <td width="150px" height="50px">11</td>
            <td valign="top">22</td>
        </tr>
        <tr align="center">
            <td align="right">33</td>
            <td>44</td>
        </tr>
    </table>

细线表格

**1.给table标签设置backgroundcolor为黑色
2.给tr标签设置backgroundcolor为白色
3.给table标签设置cellspacing = "1px"
**

    <table bgcolor="black" cellspacing="1">
        <tr bgcolor="white">
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr bgcolor="white">
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
**细线表格**

表格标签的其他标签

表格的标题

标题单元格标签

单元格合并

<table bgcolor="black" cellspacing="1px" width="500px" height="300px" align="center">
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td colspan="2" rowspan="2"></td>
        <!--<td></td>-->
    </tr>
    <tr bgcolor="white">
        <td></td>
        <!--<td colspan="2"></td>-->
        <!--<td></td>-->
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>

书山有路勤为径 学海无涯苦作舟

更多精彩内容 请点击跳转

上一篇下一篇

猜你喜欢

热点阅读