HTML知识点总结_csdn html知识点总结-CSDN博客

本文链接：https://blog.csdn.net/qq_43247214/article/details/101920925

HTML

1.简介：

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
超文本：超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

2.版本

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML 4.0：1997年12月18日，W3C推荐标准。
HTML5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

3.特点

简易性
可扩展性
平台无关性
通用性

4.开发工具

DreamWeave
Webstrom
IDEA
HBuilder

5.HTML骨架标签

<!--文档声明：声明 HTML的版本及约束条件-->
<!DOCTYPE html>
<!--html的开头 属性lang(language)="属性值"   en英文/cn中文 -->
<html lang="cn">
<!--html的头部-->
<head>
<!--    网页的字符集为utf-8 -->
    <meta charset="UTF-8">
<!--    网页的标题-->
    <title>你好 World</title>
</head>
<!--html的身体-->
<body>
<!--网页的内容-->
    Hello World 你好世界。
</body>
</html>

6.标签的分类

单标签

<meta charset="UTF-8" >
<meta charset="UTF-8" />
<meta charset="UTF-8" ></meta>

双标签

<title>你好 World</title>

按是否独占一行，是否能设置大小可分为

块元素：独占一行，能设置大小。例如：
行内元素：不独占一行,不能设置大小。例如:
行内块元素:既不独占一行，也能设置大小

7.文字标签

 <br>换行
 <hr>水平分割线
 <font>字体 size大小从1到7，依次变大，color字体的颜色，不建议使用,用css的方式
 颜色的表示方式
     1.颜色的单词
     2.rgb(0,0,255)蓝  rgb(0,0,0)黑色   rgb(255,255,255)白色,在<font>中有问题
     3.#ff0000 红色  等价于  #f00   #ccc 灰色#cccccc
 <h1>到<h6> 字体加粗，依次变小。每一个独占一行。
 例如;
 <hr/>
    <font size="7" color="red">文字标签</font>

8.图片标签

 img 图片标签  ：  height  高，width   宽
                 为了图片不变形，一般 只设置 一个 宽或者高
 src 图片的路径   source
     相对路径： /   代表 当前路径
               ../  代表  上一级
                    
     绝对路径：从盘符开始的路径
              走服务器访问网页，不能直接访问本地资源，但，相对路径可以

    写静态网站，用的是 相对路径
    写动态网站，用到时 服务器的绝对路径（从域名开始）

 alt ： 图片丢失的提示，图片在不显示
 title ： 图片的标签，鼠标放上去 会提醒文字
                   
 图片的格式
            jpg/jpeg
            png    支持透明色
            gif    动图
            bmp
            位图，拉伸，会失真
            矢量图，拉伸，不会失真
例如：<img src="./img/lh.jpeg" height="600" title="图片">
    <img src="../luhan.jpeg" height="200" alt="图片跑丢了">

    <img src="F:\sjt1907\code\project20190827\img\lh.jpeg" width="200">

9.超链接标签

a 超链接标签

        href="跳转地址"
                相对路径/绝对路径
                访问网络资源，加协议  http://www.baidu.com
                ""  访问的自己
                不加href ，没有任何效果
        target="打开链接的位置"8
                _self  本页面打开，默认
                _blank 新页面打开
                _parent 父级页面打开
                _top    顶级页面打开

 <h1><a href="http://www.baidu.com" target="_blank">HTML</a>文字标签</h1>

超链接的锚点使用：锚链接

锚链接
        设置锚点
                <a name="锚点名"></a>
         跳转本页面锚点
                <a href="#锚点名"></a>
         跳转另一个页面锚点
                <a href="另一个页面的路径#另一个页面锚点锚点名"></a>

10.列表标签

有序列表

有序列表 order list
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

无序列表

 un order list-->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

自定义列表

 define list
    <dl>
        <dt>标题</dt>
        <dd></dd>
        <dd></dd>
        <dd></dd>
        <dd></dd>
    </dl>

11.表格标签

<table>
            border 边框
                0 没有边框，默认
                1 有边框
                1+ 外部的边框加粗
            cellspacing 单元格与单元格之间距离
                0 没有距离，取消了表格双边框
            cellpadding 单元格里的内容 与 单元格的边框的四周距离。填充单元格

            <caption>  表格的标题，默认 关于表格水平居中
            <tr>    一行
                <td>    一行里的一列，单元格
                    colspan  合并列，横着合并
                    rowspan  合并行，竖着合并
                    合并后，要把多余的td删掉

           <center>里面的内容会水平居中</center>
           空格：之间打空格 不起作用，需要使用 特殊符号 &nbsp; 代表一个半角空格
                 可以切换输入，为 全角，此时的空格会起作用，一个全角 相当于俩个半角

12.框架标签

frameset

注意：frameset不能与body一起使用

 属性：
        rows   按行分割，分上下   有多个值，逗号隔开；有几个值，就有几块区域;值可以是百分比或者是像素，* 代表剩余大小
        cols   按列分割，分左右  有多个值，逗号隔开；有几个值，就有几块区域;值可以是百分比或者是像素，* 代表剩余大小
        border 边框的粗细，0没有边框
 每个块区域 用 frame来 表示
            src 引入的区域路径
            noresize 不能鼠标拖动改变区域大小
            name 定义 此frame的名字，在 超链接的target使用该名字，该超链接的内容会在 此frame的区域显示。

        如果子区域还需要分割，可以嵌套 framset继续分割。

<frameset rows="15%,*,10%" border="1" >
    <frame src="top.html" noresize="true" >
    <frameset cols="15%,*,15%">
        <frame src="left.html" noresize>
        <frame src="center.html" name="center" noresize="noresize">
        <frame src="right.html" noresize="true">
    </frameset>
    <frame src="bottom.html" noresize>
</frameset>

iframe

可以和body一起使用

        多个页面组合到一个大页面中
        达到 异步的效果
            src 链接的地址
            name frame的名字
            width
            height
            frameborder 是1否0有边框

<br/>
    <a href="">学院介绍</a>
    <a href="demo01_a.html" target="my">组织架构</a>
    <a href="">院系设置</a>
    <a href="">招生部</a>
    <a href="">就业部</a>
    <a href="">教务处</a>
    <a href="">留言箱</a>
    <br/>
    <iframe src="http://www.baidu.com" name="my" width="900" height="500" frameborder="0"/>

13.表单

input系列

name
value
type

file文件上传
text文本
password密码框
radio单选
checked
要实现单选，name要- -样
checkbox多选
checked
date(H5)日期
range(H5)范围滑块
submit提交按钮
reset
重置按钮
button普通按钮

非input系列

select下拉框
option下拉的选项
selected
textarea文本域，多行文本
rows：行数
cols：列数,
button默认是提交按钮
type=button改成普通按钮