关于html:html入门

38次阅读

共计 2057 个字符,预计需要花费 6 分钟才能阅读完成。

一、概念

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> 页脚,通常蕴含作者、版权信息或者相干链接等;
起源 – 简书

正文完
 0