HTML学习笔记

前端 May 16, 2020 • ℃

＃HTML学习笔记

基本框架

标记

<！DOCTYPE html>
<html lang =“ zh_CN”>
<头>
    <meta charset =“ UTF-8”>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1.0”>
    <meta http-equiv =“ X-UA-Compatible” content =“ ie = edge”>
    <title>标题</ title>
</ head>
<身体>
    
</ body>
</ html>

可打开.html文件，直接输入html：5调出

语句

一些规范：

1.标签使用小写，元素必须封闭
2.空元素要加斜杠以闭合 <br />
3.不使用语义化，所有样式都存放于CSS中，内容与样式分离

标记

<！DOCTYPE html>
<html lang =“ zh_CN”>

<头>
    <meta charset =“ UTF-8”>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1.0”>
    <meta http-equiv =“ X-UA-Compatible” content =“ ie = edge”>
    <title>标题</ title>
</ head>

<身体>
    <h1>一级标题</ h1>
    <h2>二级标题</ h2>
    <p>起点</ p>

    <！-换行符->
    <br />
    <！-分割线->
    <hr />

    <！-列表，可嵌套->
    <！-有序列表->
    <ol>
        <li>第一项</ li>
        <li>第二项</ li>
    </ ol>
    <！-无序列表->
    <ul>
        <li>第一项</ li>
        <li>第二项</ li>
    </ ul>

    <！-链接->
    <a href="https://www.google.com/">链接显示的文本</a>
    <！-链接到页面特定位置，使用ID特性->
    <a href="#top">返回顶部</a>
    <p id =“ top”>顶部</ p>
    <！-链接到其他页面的特定位置->
    <a href="http://wiki-power.com/#top">导航到站外页面的某个位置</a>

    <！-图像->
    <img src =“ / xx.png” alt =“无法加载时的文字说明” />

    <！-表格->
    <表格>
        <！-第一行->
        <tr>
            <！-第一列->
            <th> </ th>
            <！-第二列->
            <th scope =“ col”>周六</ th>
            <！-第三列->
            <th scope =“ col”>周日</ th>
        </ tr>
        <！-第二行->
        <tr>
            <th scope =“ row”>数量</ th>
            <td> 120 </ td>
            <td> 135 </ td>
        </ tr>
        <！-第三行->
        <tr>
            <th scope =“ row”>收益</ th>
            <！-跨列colspan，跨行rowpan->
            <td colspan =“ 2”> 500 </ td>
        </ tr>
    </ table>

    <！-表单，待补充->
    <！-iframe，待补充->
    <！-flash /视频/音频，待补充->

</ body>

</ html>