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:

  • 属性可以有多个,不能写到标签之前
  • 属性之间用空格分割,可以是多个空格,也可以是换行
  • 属性之间不分先后顺序
  • 属性使用 "键值对" 的格式来表示
关于目录结构:

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

  1. 相对路径:以 html 所在位置为基准,找到图片的位置
  • 同级路径:直接写文件名即可(或者 ./
  • 下一级路径:image/1.jpg
  • 上一级路径:../image/1.jpg
  1. 绝对路径:一个完整的磁盘路径,或者网络路径

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:默认被选中(用于单选按钮和多选按钮)

常用的类型:

  1. 文本框
  1. 密码框
  1. 单选框

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

  1. 复选框
  1. 普通按钮

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

  1. 提交按钮
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>
相关推荐
wuxuanok几秒前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia几秒前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder9 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士10 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明10 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201415 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius16 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku17 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄21 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙22 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端