HTML 入门 - 技术栈

1. 什么是 HTML

HTML（Hyper Text Markup Language），超文本标记语言

超文本：比文本要强大，通过链接和交互方式来组织和呈现信息的文本形式，不仅有文本，还可能包含图片、音频、或者自己已经审阅过的学者所加的评注、补充或脚注等

标记语言：由标签构成的语言

HTML 的标签都是提前定义好的，使用不同的标签，表示不同的内容，如以下代码：

上面代码中的 <h1><h2><h3> 就是标签

1.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的，特点如下：

标签名（body）放到 < > 中
大部分标签成对出现，<h1> 为开始标签，</h1> 为结束标签
少数标签只有开始标签，称为 "单标签"
开始标签和结束标签之间，写的是标签的内容
开始标签中可能会带有 "属性" （如：id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)，如下代码

html 复制代码

<h3 id="myId">我是三级标题</h3>

1.2 HTML 文件基本结构

html 复制代码

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

html 标签是整个 html 文件的根标签（最顶层标签）
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题

1.3 标签层次结构

父子关系
兄弟关系

html 复制代码

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

其中：

head 和 body 是 html 的子标签（html 就是 head 和 body 的父标签）
title 是 head 的子标签，head 是 title 的父标签
head 和 body 之间是兄弟关系

tip：

可以使用浏览器的开发者工具查看页面的结构

F12 或鼠标右键检查，开启开发者工具，切换到 Elements 标签，就可看到页面结构细节

标签之间的结构关系，构成了一个 DOM 树，DOM 是 Document Object Mode（文档对象模型）的缩写

1.4 HTML 快速入门

开发工具：Visual Studio Code

在 VS Code 中创建文件 xxx.html，直接输入 ! ，按 Enter 或 tab 键，此时能自动生成代码的主体框架，如下：

html 复制代码

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

在 <body></body> 标签中，任意书写文字，按 Ctrl + s 保存文件，通过浏览器访问即可，如：

1.5 HTML 常见标签

1.5.1 标题标签 h1-h6

从 h1 到 h6，数字越大，字体越小

1.5.2 段落标签：p

在 HTML 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签

p 标签表示一个段落

tip：

p 标签描述的段落，前面没有缩进
自动根据浏览器宽度来决定排版
html 内容首尾处的换行、空格均无效
在 html 中文字之间输入的多个空格只相当于一个空格
html 中直接输入换行不会真的换行，而是相当于一个空格

1.5.3 换行标签：br

换行通过 <br/> 标签实现，br 是 break 的缩写，表示换行

br 是一个单标签（不需要结束标签）

br 标签不像 p 标签那样带有很大的空隙

<br/> 是规范写法，不建议写成 <br>，虽然浏览器有很好的 "鲁棒性"，但这里没有问题，不代表后面也没问题

1.5.4 图片标签：img

img 标签必须带有 src 属性，表示图片的路径

html 复制代码

<img src="rose.jpg">

此时要把 rose.jpg 这个图片放到和 html 中的同级目录中

img 标签的其他属性：

width / height：控制宽度高度，高度和宽度一般改一个就行，另一个会等比例缩放，否则就会图片失衡

border：边框，参数是宽度的像素，但是一般会使用 CSS 来设定

tip：

属性可以有多个，不能写到标签之前
属性之间用空格分割，可以是多个空格，也可以是换行
属性之间不分先后顺序
属性使用 "键值对" 的格式来表示

关于目录结构：

对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好

相对路径：以 html 所在位置为基准，找到图片的位置

同级路径：直接写文件名即可（或者 ./）
下一级路径：image/1.jpg
上一级路径：../image/1.jpg

绝对路径：一个完整的磁盘路径，或者网络路径

磁盘路径 D:/rosr.jpg（最好使用 /，不要使用 \）
网络路径 https://cn.bing.com/images/search?view=detailV2&ccid=wtpfIxZv&id=0EB129930EAA55858F09715E195BAEA0462DF70E&thid=OIP.wtpfIxZvYE3XmBVy7hovYgHaEn&mediaurl=https%3A%2F%2Fimg-blog.csdnimg.cn%2F4dfc7057ff0f406187a2c7def724b99a.png&exph=508&expw=816&q=java&simid=608049172503483542&form=IRPRST&ck=0498F3C0DC5285A86C54AA8EBE301A5A&selectedindex=1&itb=0&ajaxhist=0&ajaxserp=0&vt=0&sim=11

1.5.5 超链接：a

href：必须具备，表示点击后会跳转到哪个页面

target：打开方式，默认是 _self，如果是 _blank 则用新的标签页打开

链接的几种形式：

1. 外部链接：href 引用其他网站的地址

html 复制代码

<a href="https://www.baidu.com">百度</a>

2. 内部链接：网站内部页面之间的链接，写相对路径即可

在一个目录中，先创建一个 demo1.html，再创建一个 demo2.html

target 设置为 _blank

3. 空链接：使用 # 在 href 中占位

html 复制代码

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

用于此处需要插入超链接，但还不知道插入哪个的时候

1.5.6 表格标签

table 标签：表示整个表格
tr：表示表格的一行
td：表示一个单元格
thead：表格的头部区域
tbody：表格的主体区域

table 包含 tr，tr 包含 td

表格标签中有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置，这些属性都要放到 table 标签中：

align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对其方式）
border 表示边框，1 表示有边框（数字越大，边框越粗），"" 表示没边框
cellpadding：内容距离边框的距离，默认 1 像素
cellspacing：单元格之间的距离，默认 2 像素
width / height：设置尺寸

快速生成：

html 复制代码

    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>10</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </table>

加上属性：

html 复制代码

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">

1.5.7 表单标签

表单是让用户输入信息的重要途经，分为两个部分：

表单域：包含表单元素的区域，重点是 form 标签
表单控件：输入框，提交按钮等，重点是 input 标签

1) input 标签

各种输入控件，单行文本框、按钮、单选框、复选框

type(必须有)，取值种类很多，如：button、checkbox、text、file、image、password、radio 等
name：给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一
value：input 中的默认值
checked：默认被选中（用于单选按钮和多选按钮）

常用的类型：

文本框

密码框

单选框

tip：单选框之间必须具备相同的 name 属性，才能实现 多选一 效果

复选框

普通按钮

当前点击了没有反应，需要搭配 JS 使用

提交按钮

html 复制代码

    <form action="demo1.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>

提交按钮必须放到 form 标签中，点击后就会尝试给服务器发送请求

2) select 标签

下拉菜单，option 中定义 selected="selected" 表示默认选中

3) textarea 标签

文本域中的内容就是默认内容，空格也会有影响

rows 和 clos 不会直接使用，都是用 CSS 来改的

4) form 标签

html 复制代码

    <form action="demo1.html">
        ...[form 的内容]
    </form>

描述了要把数据按照什么方式，提交到哪个页面中

5) 无语义标签：div & span

div 标签，division 的缩写，含义是分割

span 标签，含义是跨度

类似于两个盒子，用于网页布局

div 是独占一行的，是一个大盒子

span 不独占一行，是一个小盒子

1.6 练习：用户注册

用户注册界面：

代码：

html 复制代码

    <h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
    </table>
    <div>
        <input type="button" value="注册">
        <span>已有账号？</span><a href="#">登录</a><br/>
    </div>