请选择 进入手机版 | 继续访问电脑版

QQ登录

只需要一步,快速开始

 注册地址  找回密码
查看: 4423|回复: 0

HTML所有知识点全面复习

[复制链接]
字体大小: 正常 放大

889

主题

62

听众

17万

积分

  • TA的每日心情
    开心
    2023-3-15 17:49
  • 签到天数: 224 天

    [LV.7]常住居民III

    社区QQ达人 邮箱绑定达人 元老勋章 发帖功臣 新人进步奖 优秀斑竹奖 金点子奖 原创写作奖 最具活力勋章 助人为乐奖 风雨历程奖

    发表于 2021-7-8 17:29 |显示全部楼层
    |招呼Ta 关注Ta
    [color=rgba(0, 0, 0, 0.75)]文章目录
      • 什么是HTML
      • HTML 标签
      • HTML 元素
      • !DOCTYPE 声明
      • HTML头部head
        • HTML title元素
        • HTML base 元素
        • HTML link 元素
        • HTML meta 元素
      • HTML 属性
      • HTML 属性常用引用属性值
      • 标题
      • HTML 段落
      • HTML 链接
        • HTML 链接 - target 属性
        • HTML 链接- id 属性
      • HTML 图像
        • HTML 图像- 图像标签( img)和源属性src
        • HTML 图像- Alt属性
        • HTML 图像- 设置图像的高度与宽度
      • HTML标题
      • HTML 元素语法
      • HTML中如何使用CSS
        • 内联样式
        • 内部样式表
        • 外部样式表
      • HTML 表格
        • HTML 表格表头
        • HTML 表格和边框属性
      • HTML 列表
        • HTML无序列表
        • HTML 有序列表
        • HTML 自定义列表
      • HTML的块级元素和内联元素
        • HTML 块级元素
        • HTML 内联元素
        • HTML元素
        • HTML 元素
      • HTML 表单和输入
        • HTML 表单
        • HTML 表单 - 输入元素
        • 文本域(Text Fields)
        • 密码字段
        • 单选按钮(Radio Buttons)
        • 复选框(Checkboxes)
        • 提交按钮(Submit Button)
      • HTML 框架Iframe
        • iframe语法
        • Iframe - 移除边框
      • HTML 颜色
        • 颜色值
      • HTML 脚本
      • HTML



    什么是HTML

    HTML 是用来描述网页的一种语言。
    HTML 指的是超文本标记语言: HyperText Markup Language
    HTML 不是一种编程语言,而是一种标记语言
    标记语言是一套标记标签 (markup tag)
    HTML 使用标记标签来描述网页
    HTML 文档包含了HTML 标签及文本内容
    HTML文档也叫做 web 页面

    HTML 标签

    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
    HTML 标签是由尖括号包围的关键词,比如
    HTML 标签通常是成对出现的,比如 和
    标签对中的第一个标签是开始标签,第二个标签是结束标签
    开始和结束标签也被称为开放标签和闭合标签

    <标签>内容</标签>
    • 1
    HTML 元素

    "HTML 标签" 和 “HTML 元素” 通常都是描述同样的意思.
    但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:
    HTML 元素:

    !DOCTYPE 声明

    <!DOCTYPE>声明有助于浏览器中正确显示网页。
    网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
    doctype 声明是不区分大小写的,以下方式均可:
    . doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。
    在HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。
    HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。
    HTML5 不是基于 SGML,因此不要求引用 DTD。
    2. 对于中文网页需要使用 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 。
    目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候需要在头部将字符声明为 UTF-8。

    HTML头部head

    元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
    可以添加在头部区域的元素标签为:

    HTML title元素HTML base 元素[color=rgba(0, 0, 0, 0.75)]标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
    <head>
    <base  target="_blank">
    </head>
    HTML link 元素
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

    HTML meta 元素

    meta标签描述了一些基本的元数据。

    [color=rgba(0, 0, 0, 0.75)]标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

    META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

    元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

    为搜索引擎定义关键词:


    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    为搜索引擎定义关键词:

    <meta name="description" content="免费 Web & 编程 教程">

    每30秒钟刷新当前页面:

    <meta http-equiv="refresh" content="30">
    HTML 属性

    HTML 元素可以设置属性
    属性可以在元素中添加附加信息
    属性一般描述于开始标签
    属性总是以名称/值对的形式出现,比如:name=“value”。

    HTML 属性常用引用属性值

    属性值应该始终被包括在引号内。
    双引号是最常用的,不过使用单引号也没有问题。
    Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John “ShotGun” Nelson’

    标题

    HTML 标题(Heading)是通过<h1 - h6> 标签来定义的.


    <h1>这是一个标题</h1>
    <h2>这是一个标题</h2>
    <h3>这是一个标题</h3>

    HTML 段落

    HTML 段落是通过标签 p来定义的.


    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>

    HTML 链接

    HTML 链接是通过标签 a> 来定义的.


    <a >这是一个链接</a>

    HTML 链接 - target 属性

    使用 target 属性,你可以定义被链接的文档在何处显示。

    下面的这行会在新窗口打开文档:

    实例


    <a  target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

    HTML 链接- id 属性

    id属性可用于创建在一个HTML文档书签标记。

    提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

    HTML 图像
    <img src="/images/logo.png" width="258" height="39" />

    HTML 图像- 图像标签( img)和源属性src

    在 HTML 中,图像由 标签定义。

    img 是空标签,意思是说,它只包含属性,并且没有闭合标签。

    要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。


    <img src="url" alt="some_text">

    HTML 图像- Alt属性

    alt 属性用来为图像定义一串预备的可替换的文本。

    替换文本属性的值是用户定义的。
    在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。


    <img src="boat.gif" alt="Big Boat">

    HTML 图像- 设置图像的高度与宽度
    <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

    假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
    注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。

    更多图像标签


    1.png


    HTML标题HTML 元素语法

    HTML 元素以开始标签起始
    HTML 元素以结束标签终止
    元素的内容是开始标签与结束标签之间的内容
    某些 HTML 元素具有空内容(empty content)
    空元素在开始标签中进行关闭(以开始标签的结束而结束)
    大多数 HTML 元素可拥有属性
    注释: 您将在本教程的下一章中学习更多有关属性的内容。

    1. 一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签。(尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合)
    2. 标签写法要用小写字母(有些版本对大小写可认为相同,而xhtml中强制使用小写)

    HTML中如何使用CSS

    CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

    CSS 可以通过以下方式添加到HTML中:

    内联样式- 在HTML元素中使用"style" 属性
    内部样式表 -在HTML文档头部 区域使用

    在本站的HTML教程中我们使用了内联CSS样式来介绍实例,这是为了简化的例子,也使得你能更容易在线编辑代码并在线运行实例。

    你可以通过本站的 CSS 教程 学习更多的 CSS 知识。

    内联样式
    <body style="background-color:yellow;">
    <h2 style="background-color:red;">这是一个标题</h2>
    <p style="background-color:green;">这是一个段落。</p>
    </body>
    <h1 style="font-family:verdana;">一个标题</h1>
    <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

    内部样式表

    当单个文件需要特别样式时,就可以使用内部样式表。你可以在 部分通过


    <head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
    </style>
    </head>

    外部样式表

    当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。


    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    HTML 表格

    表格由

    [color=rgba(0, 0, 0, 0.75)]标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由[color=rgba(0, 0, 0, 0.75)]
    标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    HTML 表格表头

    表格的表头使用 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本:


    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    HTML 表格和边框属性

    如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

    使用边框属性来显示一个带有边框的表格:


    <table border="1">
        <tr>
            <td>Row 1, cell 1</td>
            <td>Row 1, cell 2</td>
        </tr>
    </table>
    剩余内容请前往原文地址查看:

    https://blog.csdn.net/weixin_43342105/article/details/106271856?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162572467016780264064409%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162572467016780264064409&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-2-106271856.pc_search_result_before_js&utm_term=html&spm=1018.2226.3001.4187








    zan
    您需要登录后才可以回帖 登录 | 注册地址

    qq
    收缩
    • 电话咨询

    • 04714969085
    fastpost

    关于我们| 联系我们| 诚征英才| 对外合作| 产品服务| QQ

    手机版|Archiver| |繁體中文 手机客户端  

    蒙公网安备 15010502000194号

    Powered by Discuz! X2.5   © 2001-2013 数学建模网-数学中国 ( 蒙ICP备14002410号-3 蒙BBS备-0002号 )     论坛法律顾问:王兆丰

    GMT+8, 2024-3-29 23:33 , Processed in 0.283042 second(s), 55 queries .

    回顶部