HTML5 入门笔记

目录

01. 基础框架

02. 结构性标签 (Structural Tags)

03. 文本内容标签(Text Content Tags)

04. 列表标签(List Tags)

05. 链接标签(Link Tags)

06. 表单标签 (Form Tags)


Tips & Concept: 

1. HTML is Not Case Sensitive

2. Nested HTML structure create a Document Object Model (DOM) Tree

Source: HTML 标签参考手册https://www.w3school.com.cn/tags/index.aspHTML Tutorialhttps://www.w3schools.com/html/default.asp

HTML元素通常可以分为两种类型:inline elements,block-level elements

Inline Elements:

  • 不会打断并开启新的一行,相邻的 inline elements 会在同一行显示
  • 它的宽度和高度由内容决定,不能设置固定的宽度和高度
  • 常见元素有 <span>, <a>, <strong>, <em>, <img>, <input>

Block-level Elements:

  • 块级元素会独占一行,create a new block,在前后都会自动换行。
  • 它的宽度默认为父元素的100%,可以设置固定的宽度和高度。
  • 常见元素有 <div>, <p>, <h1>, <ul>, <li>, <section>, <pre> 等 

01. 基础框架

<!-- DOCTYPE:告诉浏览器,我们要使用什么规范,不属于HTML标签,在HTML外面 -->
<!DOCTYPE html>
<html>
    <head> <!-- head:代表网页头部,包含所有附加信息,都是用户不可见的 -->
        <title> HTML Learning </title>
        <!-- title:阐明网页标题,标签里的文字会显示在tab上面 -->
        <style> ... </style>
        <!-- <style> used to define style info (CSS) for a document -->
    </head>

    <body> <!-- body:表示网页主体,里面写网页的显示内容,全部为用户可见的内容 -->
        hello
    </body>
</html>

02. 结构性标签 (Structural Tags)

  • <html>
  • <head>
  • <body>
  • <header>
  • <nav>
  • <main>
  • <figure> <figcaption>
  • <footer> always contains:
    • authorship information
    • copyright information
    • contact information
    • sitemap
    • back to top links
    • related documents
<body> 
    <header> <!-- header:定义文档的页眉(介绍信息)-->
        <h1> HTML Tag </h1>
        <nav> 
            <a href="tag1.html"> 结构性标签 </a>
            <a href="tag2.html"> 文本内容标签 </a>
            <a href="#"> ... </a>
        </nav>
        <!-- nav: defines a set of navigation links -->
    </header> 

    <main> <!-- main:阐明文档内容 -->
        <section>
            <h2> 文本内容标签 (Text Content Tags) </h2>
            <p> This is the content. </p>
        </section>
            
        <figure> 
            <img src="img_book.jpg" alt="an HTML Book" hight="200">
            <figcaption> Fig1. HTML and CSS </figcaption>
            <!-- figcaption: defines a caption for a <figure> element-->
        </figure>
        <!-- figure: 文档中的独立内容块,用于嵌入图像,音频,视频等多媒体内容 -->
    </main>

    <footer>
        <p>&copy; HTML Learning. All rights reserved.</p>
    </footer>
</body>

03. 文本内容标签(Text Content Tags)

  1. 标题标签 <h>
    <h1> 一级标题 </h1>
    <h2> 二级标题 </h2>
    <h3> 三级标题 </h3>
    ...
    <!-- 标签内容默认单独起一行,数字越小,标题等级越高,显示字体越大 -->
  2. 段落标签 <p>
    <p> 这是一个段落 </p>
    <!-- 标签里的内容为独立的自然段,跟上下文自动保持一定的行距 -->
  3. 换行标签 <br/>
    故人西辞黄鹤楼<br/>
    烟花三月下扬州<br/>
    孤帆远影碧空尽<br/>
    惟见长江天际流<br/>
    
    <!-- HTML中,打字回车只会显示为空格,需要<br/>才能真正的换行(只换行,不添加行距)
    PS: <br>和<br/>都可以进行换行,后者更为规范 -->
  4. 水平线标签 <hr/>
    总结<hr/>
    回顾一年来的工作,...
    
    <!-- 自动换行,并在新的一行显示水平线,标签后的内容在水平线下一行
    PS: <hr/> <hr> 效果一样,<hr/> 格式更标准 --> 
  5. 字体样式标签
    1. 黑体标签 <strong> </strong>、<b> </b>
    2. 斜体标签 <em> </em>、<i> </i>
    3. 下划线标签 <ins> </ins>、<u> </u>
    4. 删除线 <del> </del>、<s> </s>
    5. 下标字 subsript <sub> </sub>
    5. 上面标字 supersript <sup> </sup>
    <!-- 以2为底log8 -> log<sub>2</sub><sup>8</sup> -->
    <!-- 
    整段斜体或者黑体的话,我们一般用CSS完成,只有个别文字单独特殊时,才用 HTML tag
    黑体标签: <strong> importance urgency、<b> bold
    斜体标签: <em> emphasis italics, <i> visual-only italics -->
  6. 引用类标签
    < blockquote >: Block-level Element,类似于 <figure>, <section>,default style 是左右缩进
    < cite >: Inline Element,定义 the title of a creative work (e.g. a book, a song, a movie, a painting),default style 是斜体样式的
    < q >: Inline Element, define quotation. 会自动添加引用符号,且会根据 lang 定义语言的不同,给出不同的引用符号(法语中是《》, 英文中是 " ")
  7. 时间类标签

04. 列表标签(List Tags)

list 会自动跟上下文保持一定的行距

  1. Ordered List <ol>
    考试排名:
    <ol type="1/a/A/i/I" start="50" reversed>
        <li> Lily </li>
        <li> Bruce </li>
    </ol>
    
    <!-- Attribute
    【type】: 声明 list type, the default type is '1' 
    【reversed】: 出现即代表列表倒叙排列 (9,8,7...)
    【start】: Specifies the start value of an ordered list -->
  2. Unordered List <ul>
    兴趣爱好:
    <ul style="list-style-type:circle/square/disc">
        <li>唱歌</li>
        <li>跳舞</li> 
    </ul>
    
    <!-- List items will usually be displayed with bullet points. 
    the default style is ‘disc’ -->
  3. Description List <dl>
    <dl>
      <dt>Coffee</dt>
      <dd>Black hot drink</dd>
      <dt>Milk</dt>
      <dd>White cold drink</dd>
    </dl>
    
    <!--【dt】defines terms/names,
    【dd】describes each term with an indentation -->

05. 链接标签(Link Tags)

  1. 超链接标签 <a>

    Hyperlink Tag 用于从一张页面链接到另一张页面。
    【Semantic Attributes】
    [ href ]: <a> element 最重要的 attribute,它指示链接的目标。If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.

    <a href="https://www.google.com/"> 这是一个超链接 </a>
    <!-- <a> & </a> 之间的部分是超链接所显示的文字 -->
    
    a link to a page on the World Wide Web (绝对路径):
    <a href="https://www.w3schools.com">Visit W3Schools </a>
    
    a link to a page on this website (相对路径):
    <a href="/html/default.asp"> Visit HTML Tutorial </a>

    [ target ]: The attribute specifies where to open the linked document.

    <a herf=.. target="_blank|_self|_parent|_top|framename">
    
    <!-- Attribute【target】:
    <a target="_blank">: 在新窗口/tab中打开链接
    <a target="_self">: open in the same frame as it was clicked (default)
    -->
  2. 图片标签 <img>
    ⚠️ always specify the width or the height of an image. If width and height are not specified, the page might flicker while the image loads.
    <img src="girl.jpg" alt="Girl in a jacket" width="500" height="600">
    
    <!-- Attribute
    【src】: URL. To specify the path to the image
    【alt】: text. To specify an alternate text for an image
    【height, width】: To specify the width and height of an image -->
    
    总是在 <figure> 里面:
    <figure>
        <img src="moon_on_sea.JPG" alt="a moon on the sea" height="400">
        <figcaption> Fig1: A bright moon hangs over the sea </figcaption>
    </figure>
    

06. 表单标签 (Form Tags)

<form> is used to create an HTML form for user input,它是与用户交互和数据传输的关键标签

<form action="/action_page.php" name="user_info" method="get|post">
    ...
    ...
</form>

<!-- Attributes
【action】: URL, where to send the form-data when a form is submitted
【method】: Specifies the HTTP method to use when sending form-data
【name】: Specifies the name of a form -->

<form target="_blank|_self|_parent|_top|framename">

<!--【target】:规定提交表格过后在哪里显示 received response
<target="_blank">: 在新窗口/tab中打开链接
<target="_self">: open in the same frame as it was clicked -->
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值