HTML(初级)笔记
本文最后更新于 1329 天前,其中的信息可能已经有所发展或是发生改变。

涵盖内容

基本语法、标签、声明、属性
标签属于什么元素,内联/内联-块级/块级元素


  • 元素
    + "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
    + 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,
    + 元素组成:起始标签+元素内容+结束标签

  • 什么是HTML?

    • HTML 指的是超文本标记语言: HyperText Markup Language
    • HTML 不是一种编程语言,而是一种标记语言
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
    • HTML 文档包含了HTML 标签文本内容
    • HTML文档也叫做 web 页面
  • <!DOCTYPE>声明
    • doctype 声明是不区分大小写的
    • html的版本,例如html5 <!DOCTYPE html>
  • 中文编码
        <head>
            <meta charset="UTF-8">
        </head>
    
  • HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。

  • HTML 段落是通过标签 <p> 来定义的。

  • HTML 链接是通过标签 <a> 来定义的。

  • HTML 图像是通过标签 <img> 来定义的.

  • HTML 空元素

    • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

    • <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

    • 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

    • 在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

    • 即使 <br> 在所有浏览器中都是有效的,但使用<br /> 其实是更长远的保障。

  • HTML 属性

    • name="value"
    • style:规定元素的行内样式(inline style)
  • <hr> 标签在 HTML 页面中创建水平线。

  • <!-- 这是一个注释 -->

  • HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

  • HTML 格式化标签

    • HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如:粗体 or 斜体

    • 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

    • <strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。
  • target 属性,你可以定义被链接的文档在何处显示

    • 打开新窗口<a href="" target="_blank" "></a>
  • HTML <base> 元素

    <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

    <head>
        <base href="http://www.runoob.com/images/" target="_blank">
    </head>
    
  • HTML<link> 元素

    <link>标签定义了文档与外部资源之间的关系。

    <link> 标签通常用于链接到样式表:

    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    
  • HTML <style> 元素
    <head>
        <style type="text/css">
            body {background-color:yellow}
            p {color:blue}
        </style>
    </head>
    
  • HTML<meta> 元素
    • meta标签描述了一些基本的元数据。

    • <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

    • META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

    • 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

    • <meta> 一般放置于 <head> 区域

    • 为搜索引擎定义关键词:

      <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
      
  • 表格
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    
  • HTML无序列表
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
    
  • HTML 有序列表
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
    

    image-20200804192437412

  • HTML 区块元素

    • 大多数 HTML 元素被定义为块级元素内联元素
    • 块级元素在浏览器显示时,通常会以新行来开始(和结束)。

    • 实例:<h1>, <p>, <ul>, <table>

  • HTML 内联元素

    • 内联元素在显示时通常不会以新行开始。
    • 实例:<b>, <td>, <a>, <img>
  • 字体居中text-align:center;

  • 下拉选择框

    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    
  • HTML 框架

    <iframe src="URL"></iframe>

作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇