认识html

时间 2019-11-06

标签认识 html 栏目 HTML 繁體版

原文原文链接

html：超文本标记语言html

Hyper text markup languageweb

超文本：超连接，实现页面的跳转webstorm

html结构标准工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>hello, world</p>
    <p>你好，世界</p>
</body>
</html>

声明文档类型：<!DOCTYPE html>开发工具

根标签：<html>字体

头标签：<head>ui

标题标签：<title>spa

主体标签：<body>code

html和htm的区别？orm

html与htm是同样的。

html标签分类

是否成对出现

单标签：<!doctype html>，<br />

双标签：<html></html>，<head></head>

包含（嵌套关系，父子）

好比<head><title></title></head>

并列关系（兄弟，姐妹）

好比<head></head><body></body>

开发工具

webstorm，由于IDEA已经用熟了

ctrl+/ 注释一行

输入标签 tab 能够补全标签

ctrl+shift+上下箭头可将当前行快速上移，下移

html标签

注释： ctrl+/

换行标签：<br />

水平线标签： <hr />

段落： <p></p>

标题标签

<h1>一行白鹭上青天</h1>

<h2>一行白鹭上青天</h2>

<h3>一行白鹭上青天</h3>

<h4>一行白鹭上青天</h4>

<h5>一行白鹭上青天</h5>

<h6>一行白鹭上青天</h6>

由于SEO的缘由，h1在一个页面中只能出现一次

字体标签：<font></font>，已弃用

加粗：<strong></strong>，<b></b>，推荐用<strong></strong>

文字倾斜：<em></em>，<i></i>，推荐使用<em></em>

删除线：<del></del>，<s></s>，推荐使用<del></del>

下划线标签：<ins></ins>，<u></u>，推荐使用<ins></ins>

使用<strong>，<em>，<del>和<ins>有语义化的效果。

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--输入标签, 而后按tab能够补全标签-->
    <!--换行标签-->
    你好，<br>世界
    <hr>
    <p>
        充分确定了5年来自贸试验区建设取得的重大成就，并对下一步改革探索提出明确要求，
        为把自贸试验区建设成新时代改革开放新高地指明了方向，为自贸试验区建设注入新的强大动力。
    </p>
    <h1>一行白鹭上青天</h1>
    <h2>一行白鹭上青天</h2>
    <h3>一行白鹭上青天</h3>
    <h4>一行白鹭上青天</h4>
    <h5>一行白鹭上青天</h5>
    <h6>一行白鹭上青天</h6>
    <!--只能取值到h6-->
    <font size="6" color="red"></font>

    <strong>strong用来加粗的</strong><br />
    <b>这个也能够加粗</b><br />
    <em>文本倾斜</em><br />
    <i>这个也能够文本倾斜</i><br />
    <del>66.66</del><br />
    <s>55.55</s><br />
    <ins>我是下划线</ins><br />
    <u>不推荐使用这个下划线</u>
</body>
</html>

效果演示