学习资料：《HTML菜鸟教程》

学习目标：熟悉HTML的语法即可

开发环境：VSCode + Chrome + Plugin:Open In Default Browser

进度：2021.6.1 完成HTML的语法熟悉

HTML简介

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title> HTML教程 Fighting!!! </title>
    </head>
    <body>
        <h1> 标题 </h1>
        <p> 段落 </p>
    </body>
</html>

代码解析

  • <!DOCTYPE html> 声明是HTML5文档。有助于浏览器正确显示内容，告知浏览器用了哪种HTML版本，doctype不区分大小写
  • <html> 是HTML页面的根元素
  • <head>包含文档的meta data和title data
  • <body>包含元素的可见内容

什么是HTML？

  • 超文本标记语言 Hyper Text Markup Language
  • 不算严格的编程语言，没有if-else

HTML标签（元素）

  • 带尖括号的文本内容，例如<html></html>
  • <p></p>

HTML标签和属性（以key = "value" / 'value' 的形式出现）

  • 大小写不敏感，尽量采用小写
  • 常见的属性
    • class：为元素定义一个类
    • id：元素的唯一id
    • sytel：样式
    • title：额外的信息，但这个和标签title是同名的，应该是同名功能不同
  • 常见的标签和一些tips
    • <a> href必须得加http/https，否则链接失效。属性定义在标签内，标签之间，代表超链接的名字 
      <a href = 'https://www.BAidu' target = "_blank"> 百度链接 </a>
      • 如果是超链接名字里有双引号，那必须最外层用单引号，例如：name='John "ShotGun" Nelson'
      • target可以代表打开的方式，_blank代表另起一页
    • <h1></h1>是最大的标题，font标签的size为6是最大的字体。 不要通过标题来生成加粗/大号字体
    • <hr>可以生成水平线
    • <br>可以换行
    • <!-- 注释 --> 
    • <p></p>会自动在行位添加换行符
    • 连续的空格，只会当做一个空格
    • 文本格式化标签
      • strong 和 b 等价，都是加粗。出现的原因，是在一些场合，strong和em有加重语气
      • em和i等价，都是斜体 
        <!DOCTYPE html>
<html>
    <head>
        <!-- <meta charset = "utf-8"> -->
        <title> HTML教程 Fighting!!! </title>
    </head>
    <body>
        <b>加粗！</b> <br>
        <em>定义着重文字</em> <br>
        <i>定义斜体</i><br>
        <small>定义小号字</small><br>
        <sub>下标</sub><br>
        <sup>上标</sup><br>
        <ins>插入字</ins><br>
        <del>删除字</del><br>


        <!-- 计算机输出标签 -->
        <code>计算机代码</code><br>
        <kbd>键盘码</kbd><br>
        <samp>计算机代码样本</samp><br>
        <var>定义变量</var><br>
        <pre>预格式文本</pre><br>

        <!-- HTML 引文, 引用, 及标签定义 -->
        <abrr>定义缩写</abrr><br>
        <address>地址</address>
        <bdo dir = "rtl">123456</bdo>
        <!-- 以下均是一些文本格式，无特殊要考虑的地方 -->
    </body>
</html>

    • head中有许多标签

      • <title>在HTML页面中是必须的

      • <base href = "xxx"> 如果其他地方的href没value，就会用base的href-value

      • <link>用于链接到样式表，有点像头文件引用

      • <style>通过样式来渲染HTML文档

      • <meta>描述基本的元数据。元数据不显示在浏览器上，但会被浏览器解析。可以作为引擎搜索的关键词

      • <script>用于加载js脚本语言

HTML CSS【以内联样式举例】

  • CSS生效的三种方法
    • 内联样式：给HTML的style属性设值
    • 内部样式表：在HTML文档<head>区，使用<style>元素来包含CSS（HTML全局）
    • 外部引用：引用外部CSS文件【这种最好，外部引用，改变外部文件，可以改所有】
  • 背景色，边距，字体颜色 
    <p style = "color:red;margin-left: 20px;background-color: black;">哈哈</p>
  • 列举一些属性
    • font
    • color
    • font-size
    • text-align：对齐方式
  • 后面在CSS专栏里会更具体地学习，这里但当涉猎

HTML图像

<img src = "http://www.runoob/images/pulpit.jpg" alt="haha" width="900px" height="900px" >
  • <img>没有闭合标签
  • src是url
  • alt是图片加载失败后的tips
  • width和height分别代表宽高（px）
  • <area></area>标签，可以定义图片可点击区域以及跳转页面

HTML表格

<table border="1">
    <th> 表头1 </th>
    <th> 表头2 </th>
    <tr>
        <td>(1,1)</td>
        <td>(1,2)</td>
    </tr>
    <tr>
        <td>(2,1)</td>
        <td>(2,2)</td>
    </tr>
</table>
  • <table></table>实现表格
  • border属性定义边框大小
  • <th></th>代表表头
  • <tr>代表一行
  • <td>代表一行中的某个数据
  • 因为table是父元素，所以子元素所有的节点都有属性border = 1

HTML列表

<body>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>


    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
</body>
  • 有序列表与无序列表

HTML布局

 <div id="container" style="width:500px">
 
            <div id="header" style="background-color:#FFA500;">
                <h1 style="margin-bottom:0;">主要的网页标题</h1>
            </div>
             
            <div id="menu" style="background-color:#FFD700;height:200px;width:99px;float:left">
                <b>菜单</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </div>
             
            <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:right;">
                内容在这里
            </div>
             
            <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
                版权 © runoob
            </div>
             
        </div>
  • <table></table>表格不是布局工具
  • <div></div>直接整个块，然后div里的属性可以影响里面的元素
  • 通过div标签和float属性进行HTML排版

HTML表单

<form>
    First name : <input type = "text" value="ee">
    <br>
    Password   : <input type = "password">
    <br>
    <input type = "radio" name ="sex" > Happy0
    <br>
    <input type = "radio" name = "sex1"> Happy1
    <br>
    <input type = "radio" name= "sex" > Happy2

    <br>
    <input type="checkbox" > bick0 <br>
    <input type="checkbox" > bick1 <br>
</form>

<form name="input" action="your html path" method="get">
        <input type="text" name="usewerwerrddewrewrwr">
    <input type="submit" value="Submit">
</form>
  • input标签中，type属性的常见类型
    • password
    • text
    • radio：单选，name相同只有一个会被勾选
    • checkbox
    • 通过action可以将数据发送到your html path

HTML框架

<iframe loading="lazy" src="http://www.baidu" width="2000" height="2000"></iframe>
  • iframe框架可以在浏览器中同时显示多个页面

HTML脚本

<script>
    document.write("<p> this is a paragraph </p>");
</script>
<noscript>
    sorry,your browser does not support js!
</noscript>
<p id="oo"> hello !!!!</p>
<script>
    function MyOnclickFunc(){
        document.getElementById("oo").innerHTML = "click change the text";
    }
</script>
<button type = "button" onclick = "MyOnclickFunc()"  ></button>
  • script用于定义客户端脚本语言，例如JS
  • <noscript>用于当浏览器禁止脚本语言时候的 try out
  • 通过button，指定onlick属性值，可以触发JS事件

HTML字符实体

  • HTML中某些字符是预留的。 就像C++中，有些字符是预留字符一个道理
    • 表达方式：&entity_name    &#entity_number

更多推荐

《HTML菜鸟教程》学习