[JavaScript知识库] 你是不是虎啊？这么好的一篇介绍HTML的文章，你确定不点进来看看？

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 你是不是虎啊？这么好的一篇介绍HTML的文章，你确定不点进来看看？ -> 正文阅读

[JavaScript知识库]你是不是虎啊？这么好的一篇介绍HTML的文章，你确定不点进来看看？

被骗进来了，老铁....

HTML概述

HTML表示网页结构的“骨”
决定网页有几段文字、几个编辑框、几个按钮…
HTML代码是由“标签”构成的
HTML的代码是跑在浏览器上的
推荐编辑器VScode
HTML的语法相对宽松，浏览器的鲁棒性强，一个错误的HTML代码有时也可以运行

标签简介

<boby> 内容 </boby>

<boby>是开始标签，</boby>是结束标签
<br />是单标签
开始标签和结束标签中写标签的内容
<boby id = "nice"> </boby>开始标签中可以带有属性，如id属性相当于一个唯一标识符
属性之间空格隔开
id 是属性名，“nice” 是属性名，属性名不用双引号，属性值要用双引号，= 连接

<html>
    <head>
        页面
    </head>
    <boby>
        hello 
    </boby>
</html>

一个html文件都应该有一个<html> </html>标签，此标签是“顶级标签”，其余标签都是它的子标签
html的标签可以嵌套，外层的标签称父标签，内层的标签称子标签
一个子标签只能有一个父标签，一个父标签可以有多个子标签
HTML的标签之间的结构关系就构成了一个DOM树（DOM–文档对象模型）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

VScode中！+ Tab建快速生成代码的主题框架
<!DOCTYPE html>定义文件类型，方便服务器识别，值是html，表示当前文件是一个HTML5版本的文件
<meta charset="UTF-8">定义字符编码方式，没有就可能出现乱码

常见简单标签

注释标签

选中文字 Ctrl+w生成

<!--注释-->

标题标签

一共六个

    <h1> 一级标题 </h1>
    <h2> 二级标题 </h2>
    <h3> 三级标题 </h3>
    <h4> 四级标题 </h4>
    ....

段落标签

每一个p标签就是一个段落，没有缩进
html中的中文文字间输入多个空格相当于一个空格
html中的换行符("/n")无效，只相当于一个空格

<p> 
    根据国家有关法律法规和政策文件，近期审计署审计发现，中国石油天然气
集团有限公司下属燃料油公司（以下简称燃料油公司）存在倒卖进口原油问
题。
    按照党中央、国务院部署，国务院联合调查组依法依规、客观公正、实
事求是开展了
核查调查。
</p>

换行标签

<br/>

格式化标签

<strong>加粗</strong>
<b> </b>

<em>倾斜</em>
<i> <i>

<del>删除线</del>
<s> </s>

<ins>下划线</ins>
<u> </u>

图片标签

<img src = "图片的相对路径/绝对路径/网络路径">

路径是就是一系列目录组合在一起，目录和目录之间用分隔符 /
Windows的分隔符默认是\，也支持/
字符串中的\要用\\表示
路径分为相对路径和绝对路径（磁盘路径和网络路径）
相对路径
相对路径需要一个基准目录。在HTML场景中，html所处的目录就是“基准目录”，./表示当前路径，../表示当前路径的上级路径
如在html1文件中插入1.jpg图片

<img src = "../image/1.jpg">

<img src = "./image/1.jpg">或
<img src = "image/1.jpg">

磁盘路径

<img src = "C:/Users/86188/Documents/前端三剑客/image/1.jpg">

无论在那个目录下都能找到，不建议，代码的可移植性不强

网络路径

<img src = "https://img-s-msn-
com.akamaized.net/tenant/amp/entityid/AATbzvL.img?
h=1080&w=1920&m=6&q=60&o=f&l=f&x=283&y=248">

scr 属性必须存在
可以添加其他的属性

属性名	作用
title	鼠标放在图片上显示说明
height	高度
width	宽度
alt	如果图片加载不出来，就显示文字；如果图片加载出来了，对显示效果没有影响

超链接标签

 <a href = "路径">显示名字</a>

外部路径

<a href = "https://blog.csdn.net/gjwloveforever?type=blog" 
target = "_blank"> 我的博客 </a>

内部链接
网站内部的链接，写相对路径

<a href = "./1-18.html" target = "_blank"> 内部链接 </a>

空链接

<a href = "#"> 空链接 </a>

下载链接
点击直接下载文件

<a href = "./image/test.zip">下载链接</a>

给照片添加链接

<a href="https://blog.csdn.net/gjwloveforever?type=blog">
<img src="./image/1.jpg"></a>

锚点链接
快速定位到页面的某个位置
输入lorem生成随机数字

<style>
        p{
            height: 1000px;
        }
    </style>
    <a href = "#one"> 济南 </a>
    <a href = "#two"> 青岛 </a>
    <a href = "#three"> 淄博 </a>

    <p id = "one">
        济南 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Cum nam ipsum voluptatibus repellat. Aspernatur, ullam 
         possimus consequuntur soluta et aut vero magnam? Aut, 
         beatae ad sequi facere ipsa dolor magnam?
    </p>
    
    <p id = "two">
        青岛 <br/>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
         Unde, cum et totam quas explicabo vero. Exercitationem 
         rerum suscipit nesciunt odit ipsa, perferendis vero harum 
         officiis neque minus animi magnam aliquam?
    </p>

    <p id = "three">
        淄博 <br/>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Ea eaque deleniti provident veniam nam laudantium tempora 
        atque voluptatum consectetur cumque! Cumque laboriosam 
        molestias veritatis qui sequi hic rerum labore eum.
    </p>

表格标签

        <table width = "500px" height = "200px" border = "1px" cellspacing = "0">
        <tr>
            <th> 城市名 </th>
            <th> 位置 </th>
            <th> GDP(亿) </th>
        </tr>
        <tr>
            <td> 鹤岗 </td>
            <td rowspan = "2"> 黑龙江 </td>
            <td> 1200 </td>
        </tr>
        <tr>
            <td>大庆</td>
            <td> 1600 </td>
        </tr>
        <tr>
            <td> 三亚 </td>
            <td> 海南 </td>
            <td> 2600 </td>
        </tr>
        <tr>
            <td> 南通 </td>
            <td> 江苏 </td>
            <td> 10600 </td>
        </tr>
    </table>

标签
table	表示整个表格
tr	表示表格的一行
td	表示表格的一个单元格
th	表示表头单元格，会加粗

合并单元格


rowspan = “n”	跨行合并
colspan = “n”	跨列合并

列表标签

无序列表

    <h3>无序列表</h3>
    <ul>
        <li>白山</li>
        <li>四平</li>
        <li>公主岭</li>
        <li>延庆</li>
    </ul>

有序列表

<h3>有序列表</h3>
    <ol>
        <li>白山</li>
        <li>四平</li>
        <li>公主岭</li>
        <li>延庆</li>
    </ol>

自定义列表

    <dl>
            <dt>辽宁</dt>          <!--小标题-->
            <dd> 铁岭</dd>
            <dd> 沈阳</dd>
            <dd> 辽阳</dd>
            <dd> 营口</dd>
    </dl>

表单标签

input标签

属性
type	控制表单控件的类型
name	主要用于单选按钮
checked	默认被选中 checked = “checked”
value	input中的默认值

文本框

    <input type="text"> 一般用于用户名，输入内容可见

密码框

    <input type="password"> 用于密码，输入内容不可见

单选框
选项之间必须有相同的name属性，才能实现多选一效果

    <input type="radio" name="sex" checked="checked">男
    <input type="radio" name="sex">女

在这里插入图片描述

复选框

    <input type="checkbox">石家庄
    <input type="checkbox">邯郸
    <input type="checkbox">唐山

在这里插入图片描述

按钮

    <input type="button" value="我是按钮">

在这里插入图片描述

选择文件

    <input type="file">

在这里插入图片描述

label标签

点击文字也可以选中选框
input标签中的id属性值和label标签中的for属性值一致

 <input type="radio" name="sex" checked="checked" id="male"> <label for="male">男</label>
    <input type="radio" name="sex" id="female"> <label for="female">女</label>

select标签

下拉菜单
搭配option标签使用，option标签中的select属性表示默认选中，若select属性没有复制，默认选中第一个

   <select>
        <option> 保定</option>
        <option> 廊坊</option>
        <option> 邢台</option>
        <option selected = "selected"> 秦皇岛</option>
        <option> 张家口</option>
    </select>

在这里插入图片描述

textarea标签

文本框

<textarea>文本框的初始内容</textarea>

在这里插入图片描述

无语义标签

div 独占一行
相当于是大盒子
span 不独占一行
相当于是小盒子

    <div> 
        <span> 鹤壁 </span>
        <span> 濮阳 </span>
        <span> 平顶山 </span>
    </div>
    <div>
        <span> 安阳 </span>
        <span> 商丘 </span>
        <span> 洛阳 </span>
    </div>