HTML 基础 - 技术栈

HTML基础

什么是HTML

HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.

超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.

**标记语⾔:**由标签构成的语⾔。

HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.

类似⻜书⽂档,Word⽂档

如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"

⽐如下⽅代码:

html 复制代码

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

经过浏览器解析后的效果如下:

认识 HTML 标签

HTML代码是由"标签"构成的.

html 复制代码

<h3>我是三级标题</h3>

• 标签名(body) 放到中

• ⼤部分标签成对出现.

•为开始标签, 为结束标签.

• 少数标签只有开始标签,称为"单标签".

• 开始标签和结束标签之间,写的是标签的内容.

• 开始标签中可能会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

html 复制代码

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

HTML ⽂件基本结构

html 复制代码

<html>
 <head>
 <title>第⼀个⻚⾯</title>
 </head>
 <body>
 hello world
 </body>
</html>

• html标签是整个html⽂件的根标签(最顶层标签)

• head标签中写⻚⾯的属性.

• body标签中写的是⻚⾯上显⽰的内容

• title标签中写的是⻚⾯的标题.

标签层次结构

• ⽗⼦关系

• 兄弟关系

html 复制代码

<html>
 <head>
 <title>第⼀个⻚⾯</title>
 </head>
 <body>
 hello world
 </body>
</html>

其中:

• head和body是html的⼦标签(html就是head和body的⽗标签)

• title是head的⼦标签.head是title的⽗标签.

• head和body之间是兄弟关系.

可以使⽤chrome的开发者⼯具查看⻚⾯的结构.

F12或者右键审查元素,开启开发者⼯具,切换到Elements标签,就可以看到⻚⾯结构细节.

HTML 快速⼊⻔

开发⼯具

HTML可以使⽤系统⾃带的记事本来编写,但是⾮常不⽅便,我们课程中使⽤前端专业的开发⼯具:Visual Studio Code

VisualStudioCode（简称"VSCode"）是Microsoft在2015年4⽉30⽇Build开发者⼤会上宣布的⼀款跨平台源代码编辑器.可以运⾏在Windows,macOS和Linux上.它具有对JavaScript，TypeScript和 Node.js的内置⽀持，并具有丰富的其他语⾔(例如C++，C＃，Java，Python，PHP，Go).

• 官⽹：https://code.visualstudio.com 进⾏下载,安装即可.

快速开发

在VSCode中创建⽂件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>

HTML常⻅标签

标题标签h1-h6

有六个,从h1-h6.数字越⼤,则字体越⼩.

html 复制代码

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落标签: p

在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签

• p标签表⽰⼀个段落.

html 复制代码

<p>这是⼀个段落</p>
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>

注意:

• p标签描述的段落,前⾯没有缩进.(未来CSS会学)

• ⾃动根据浏览器宽度来决定排版.

• html内容⾸尾处的换⾏,空格均⽆效.

• 在html中⽂字之间输⼊的多个空格只相当于⼀个空格.

• html中直接输⼊换⾏不会真的换⾏,⽽是相当于⼀个空格.

换⾏标签: br

想要完成换⾏的话,也可以通过<br/>标签来实现.

br是break的缩写.表⽰换⾏.

• br是⼀个单标签(不需要结束标签)

• br标签不像p标签那样带有⼀个很⼤的空隙.

•<br/>是规范写法.不建议写成<br>

html 复制代码

这是⼀个br标签<br/>
这是⼀个br标签<br/>
这是⼀个br标签<br/>

图⽚标签: img

img标签必须带有src属性.表⽰图⽚的路径.

1 img src="rose.jpg">

此时要把rose.jpg这个图⽚⽂件放到和html中的同级⽬录中. img标签的其他属性

• width/height:控制宽度⾼度.⾼度和宽度⼀般改⼀个就⾏,另外⼀个会等⽐例缩放.否则就会图⽚失衡.

• border:边框,参数是宽度的像素.但是⼀般使⽤CSS来设定.

1 img src="rose.jpg" width="500px" height="800px" border="5px">

注意:

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

关于⽬录结构:

对于⼀个复杂的⽹站,⻚⾯资源很多,这种情况可以使⽤⽬录把这些⽂件整理好.

相对路径:以html所在位置为基准,找到图⽚的位置.

• 同级路径:直接写⽂件名即可(或者./)

• 下⼀级路径:image/1.jpg

• 上⼀级路径:../image/1.jpg

绝对路径:⼀个完整的磁盘路径,或者⽹络路径.

例如

• 磁盘路径D:/rose.jpg (最好使⽤/ ,不要使⽤\ )

• ⽹络路径 https://img2.baidu.com/it/u=3359649605,3626874592\&fm=253\&fmt=auto\&ap p=138&f=JPEG?w=500&h=752

超链接: a

• href:必须具备,表⽰点击后会跳转到哪个⻚⾯.

• target:打开⽅式.默认是_self.如果是_blank则⽤新的标签⻚打开.

html 复制代码

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

链接的⼏种形式:

• 外部链接:href引⽤其他⽹站的地址

html 复制代码

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

• 内部链接:⽹站内部⻚⾯之间的链接.写相对路径即可.

在⼀个⽬录中,先创建⼀个1.html,再创建⼀个2.html

html 复制代码

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

• 空链接:使⽤#在href中占位.

html 复制代码

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

表格标签

• table标签:表⽰整个表格

• tr:表⽰表格的⼀⾏

• td:表⽰⼀个单元格

• thead:表格的头部区域

• tbody:表格的主体区域.

table包含tr,tr包含td

表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使⽤CSS⽅式来设置. 这些属性都要放到table标签中.

• align是表格相对于周围元素的对⻬⽅式.align="center" (不是内部元素的对⻬⽅式)

• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框. • cellpadding:内容距离边框的距离,默认1像素

• cellspacing:单元格之间的距离.默认为2像素

• width/height:设置尺⼨.

注意,这⼏个属性,vscode都提⽰不出来.

html 复制代码

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" 
height="500">
 <tr>
 <td>姓名</td>
 <td>性别</td>
 <td>年龄</td>
 </tr>
 <tr>
 <td>张三</td>
 <td>男</td>
 <td>10</td>
 </tr>
 <tr>
 <td>李四</td>
 <td>⼥</td>
 <td>11</td>
 </tr>
</table>

表单标签

表单是让⽤⼾输⼊信息的重要途径.

分成两个部分:

• 表单域:包含表单元素的区域.重点是form标签.

• 表单控件:输⼊框,提交按钮等.重点是input标签.

form 标签

html 复制代码

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

描述了要把数据按照什么⽅式,提交到哪个⻚⾯中.

关于form需要结合后端代码来进⼀步理解.后⾯再详细研究.

input 标签

各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框.

• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.

• name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀.

• value:input中的默认值.

• checked:默认被选中.(⽤于单选按钮和多选按钮)

下⾯介绍⼀些常⽤的类型:

⽂本框

html 复制代码

<input type="text">

2.密码框

html 复制代码

<input type="password">

单选框

html 复制代码

性别:
<input type="radio" name="sex">男 
<input type="radio" name="sex" checked="checked">⼥

4.复选框

html 复制代码

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input 
type="checkbox"> 打游戏

普通按钮

html 复制代码

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

当前点击了没有反应.需要搭配JS使⽤(后⾯会重点研究).

html 复制代码

1 <input type="button" value="我是个按钮" onclick="alert('hello')">

提交按钮

html 复制代码

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

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

select 标签

下拉菜单

• option中定义selected="selected"表⽰默认选中.

html 复制代码

<select>
 <option>北京</option>
 <option selected="selected">上海</option>
</select>

textarea 标签

html 复制代码

<textarea rows="3" cols="50">
</textarea>

⽂本域中的内容,就是默认内容,注意,空格也会有影响. rows和cols也都不会直接使⽤,都是⽤css来改的.

⽆语义标签:div&span

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

span标签,含义是跨度

就是两个盒⼦.⽤于⽹⻚布局

• div是独占⼀⾏的,是⼀个⼤盒⼦.

• span不独占⼀⾏,是⼀个⼩盒⼦.

html 复制代码

<div>
 <span>咬⼈猫</span>
 <span>咬⼈猫</span>
 <span>咬⼈猫</span>
</div>
<div>
 <span>兔总裁</span>
 <span>兔总裁</span>
 <span>兔总裁</span>
</div>
<div>
 <span>阿叶君</span>
 <span>阿叶君</span>
 <span>阿叶君</span>
</div>

综合练习:⽤⼾注册

提⽰: • 使⽤表格进⾏整体布局 • 使⽤各种input标签实现⻚⾯中的输⼊控件

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="text" placeholder="请输⼊密码"></td>
 </tr>
</table>
<div>
 <input type="button" value="注册">
 <span>已有账号? </span><a href="#">登录</a><br/>
</div>