HTML基础

wilo
127 阅读1分钟

认识HTML

HyperText Markup Language:超文本编辑语言,是一种用于创建网页的标准标记语言.

html的结构:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>声明为 HTML5 文档.

<html>元素是 HTML 页面的根元素

<head>元素是 HTML 页面的头部元素,里面用于写一些元(meta)数据.

<body> 元素包含了用于展示的内容

有一些标签是自闭和标签,这种标签下不会再有子元素,所以可以只写一个标签然后加自闭和符号(/)

DOM树

DOM树是对应于HTML文档结构的 树形数据结构 ,树的根节点就是 html 节点,树的子节点就是 html 的子元素

1.png

HTML标签

<!-- 标题:h1-h6:表示一级标题、二级标题、三级标题、四级标题、五级标题、六级标题 -->

<!-- 列表:<oi> <ul> <ol>-->
    <!-- 有序列表 -->
    <oi>
        <li></li>
    </oi>
    <!-- 无序列表 -->
    <ul>
        <li></li>
    </ul>
    <!-- 自定义列表 -->
    <dl>
        <dt></dt>
        <dl></dl>
    </dl>
    
    <!-- 链接: <a> -->
    <a href = "" target = ""></a>

    <!-- 多媒体 <img> <video> <audio> -->
    <!-- 图片 -->
    <img src = "" alt = ""/>
    <!-- 视频 -->
    <video src = "" controls></video>
    <!-- 音频-->
    <audio src = "" controls></audio>

    <!-- 输入: <input> -->
    <!-- 文本框 -->
    <input type = "text" placeholder="">
    <!-- 滑动条 -->
    <input type = "range">
    <!-- 数字框 -->
    <input type = "number" min = "1" max = "5">
    <!-- 日期 -->
    <input type = "date">
    <!-- 多行文本框 -->
    <texterae></texterae>
    
    <!-- 引用: <p> <blockquote> <cite> <q> <code> <pre>-->
    <!-- 段落 -->
    <p></p>
    <!-- 块级引用,可以表示引用的是一段文字,有cite属性,可以用来表示引用来自于哪里 -->
    <blockquote cite = ""></blockquote>
    <!-- 短引用,可以用来引用一小段文字,和 <q> 标签不同的是,这一般是用来引用书的民名字 -->
    <cite></cite>
    <!-- 也是短引用,用来引用一小段文字 -->
    <q></q>
    <!-- 代码标签,表示引用的是一段代码 -->
    <code></code>
    <!-- pre标签,在pre标签里的元素会保留换行符与空格,文本字体也会呈现等宽字体,一般表示计算机的代码,与<code>标签配合 -->
    <pre></pre>
    <!-- 加粗 -->
    <strong></strong>
    <!-- 斜体 -->
    <em></em>

语义化

语义化:开发html的时候,需要根据不同的内容来选择不同的标签,选择最合适的标签来描述你要表达的内容。

例如:标题可以使用 <h1> 标签,而不是使用 <p> 标签,重要的不是样式,而是内容, 遵守语义化的开发可以帮助维护页面,或者搜索引擎的收录,或者有助于有阅读障碍的人使用

avatar
文章
阅读
粉丝