乐趣区

关于html:html入门

jiezi

一、概念

1.1 超级文本

超文本是用超链接的办法，将各种不同空间的文字信息组织在一起的网状文本。

1.2 标记

<div>hello world</div>

div 标记“hello world”为一个块级元素的内容

1.3 语言

  1. 标记语言：html、xml

  2. 编程语言：

    • java、c、python（强类型编程语言）
    • js、php（弱类型编程语言）

二、实质

html 实质是一个在互联网上传递信息的载体的 协定，这个协定规定了咱们如何定义网页，程序员依据这个协定编写网页代码，浏览器依据这个协定解析程序员编写的代码。

三、构造

<!DOCTYPE html>
    <html>
           <head>
                <meta>
                <title></title>
            </head>
            <body>
            </body>
    </html>

<!DOCTYPE html> 示意⽂档类型申明，阐明该⽂档为 Html5 ⽂档，告知浏览器以何种形式渲染文档。
<html> 示意 html ⽂件的根标签，所有的 html 标签应该位于 html 标签外部
<head> 示意 html 的头部，head 外部标签次要⽤于设置或者导⼊内部⽂件，⼀般不间接显示在浏览器视⼝中，常⽤的⼦标签为 meta、title、link、script，别离示意元信息设定、⽂档题目、css、js
<body> 示意 html 的体部，其外部次要放⽹⻚内容，其内容会显示到浏览器视⼝中

四、语法

4.1 正文

<!– 正文 –> html 有且只有这一种正文形式

4.2 元素

  • 按标签个数

    • 单标签元素
    • 双标签元素

  • 按元素性质

    • 块元素
    • 行内元素
  • 按元素性能

4.3 属性

<u> 属性名不辨别大小写，属性值辨别大小写，且能够用引号引起来 </u>

  • 外围属性
    绝大多数标签都领有的属性
  • 自有属性
    某标签特有的属性

五、单标签元素

  • <meta>
  • <br>
  • <hr>
  • <img>
    <u>alt</u> 属性：图片显示谬误时，在图片地位显示的文字。本质是通过文字代替图片的内容。
    <u>title</u> 属性：图片失常显示时，鼠标悬停于图片上显示的文字。本质是对图片的一种 正文或形容。

六、块元素

作用：搭建网页构造
特点：

  • 独占一行空间
  • 默认宽度占父元素的 100%
  • 高度由子元素或内容决定
  • 能够通过 css 为其指定宽高

实例：

div（无意义的块元素）/html / body / h1~h6 题目 / p / ul>li / ol>li / dl>dt,dd

七、行内元素

作用：在构造中填充网页内容
特点：

  • 与其余行内元素共享同一行的空间
  • 宽高由本身决定
  • 不能通过 css 为其指定宽高
  • 设置浮动后能够设置宽高，即变为相似行内块级元素

实例:
span / a / video / audio / img（非凡的行内元素）

八、性能元素

8.1 table

格局：

<table>
    <caption></caption>
    <thead>
        <tr>
            <td\th></td\th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td\th></td\th>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

属性：

border / cellspacing（单元格之间的间距）/ rowspan / colspan

8.2 form

  • input

    • 单行文本框 type=text
    • 明码框 type=password
    • 单选按钮 type=radio
    • 复选框 type=checkbox
    • 附件 type=file
  • select
  • textarea
  • button

8.3 iframe 蕴含另外一个文档的内联框架

九、语义化

9.1 概念

语义化是指对文本内容的结构化（内容语义化），抉择合乎语义的标签（代码语义化），便于开发人员浏览、保护、编写出更优雅的代码，同时辅助搜索引擎的无效爬取。

9.2 作用

  • 丢掉 css 款式时能够让页面也呈现出清晰的构造。
  • 和搜索引擎建设良好沟通，有助于爬虫爬取更多无效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
  • 不便其余设施以标签意义解析网页。
  • 便于团队开发和保护，使代码更具备可读性，缩小差异化。

9.3 html5 中的语义化标签

<header> 定义文章的介绍信息：题目，logo，slogan；包裹目录局部，搜寻框，一个 nav 或者任何相干的 logo；一个页面中 <header> 的个数没有限度，能够为每个内容块增加一个 header；

<nav> 定义文章导航栏，链接等;nav 个别和 u、li 配合做导航栏；

<main> 定义文章的次要内容 main 标签在一份文档中是惟一的，其后辈元素经常包含 <article>；

<article> 定义文档中能够脱离其余局部，一份独立的内容，通常带有题目，当 article 内嵌 article 时，里外层的内容应该是相干的，比方一篇微博和它的评论；

<section> 与 article 的差异在于，它是整体的一部分，或者是文章的一节，一般来说 section 也会带有题目；

<aside> 侧边栏（与 article 并列存在）或者嵌入内容（在 article 内），通常认为是独立拆分进去而不受整体影响的一部分，作为次要内容的从属信息，如索引，词条列表，或者页面及站点的从属信息，如广告，作者材料介绍等；

<footer> 页脚，通常蕴含作者、版权信息或者相干链接等；
起源 – 简书

退出移动版