一 HTML
HTML(Hyper Text Markup Language),超⽂本标记语⾔.
超文本 :⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.
标记语言:由标签构成的语⾔。
1.HTML代码是由"标签"组成的。
标签名(body)放到< >中
• ⼤部分标签成对出现.<h1> 为开始标签, </h2> 为结束标签.
• 少数标签只有开始标签,称为"单标签".
• 开始标签和结束标签之间,写的是标签的内容.
• 开始标签中可能会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码)
<h3>我是三级标题</h3>
<h3 id="myId">我是三级标题</h3>2.HTML文件基本结构
<html>
<head>
<title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>• html标签是整个html⽂件的根标签(最顶层标签)
• head标签中写⻚⾯的属性.
• body标签中写的是⻚⾯上显⽰的内容
• title标签中写的是⻚⾯的标题
3.标签层次结构
• ⽗⼦关系
• 兄弟关系
<html>
<head>
<title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>其中：
• head和body是html的⼦标签(html就是head和body的⽗标签)
• title是head的⼦标签.head是title的⽗标签.
• head和body之间是兄弟关系
PS：可以使⽤chrome的开发者⼯具查看⻚⾯的结构.
F12或者右键审查元素,开启开发者⼯具,切换到Elements标签,就可以看到⻚⾯结构细节。
4.标签之间的结构关系,构成了⼀个DOM树。
DOM是Document Object Mode(⽂档对象模型)的缩写
5.HTML开发工具
Visual Studio Code（简称"VS Code"）是Microsoft在2015年4⽉30⽇Build开发者⼤会上宣布的⼀款跨平台源代码编辑器.可以运⾏在Windows,macOS和Linux上.它具有对JavaScriptTypeScript和Node.js的内置⽀持，并具有丰富的其他语⾔(例如C++，C＃，Java，Python，PHP，Go)。
6.快速开发
在VS Code中创建⽂件 xxx.html ,直接输⼊ ! ,按Enter或tab键,此时能⾃动⽣成代码的主体架.
<!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保持⽂件,通过浏览器访问即可。
7.HTML常见标签
1）标题标签h1-h6，有六个,从h1-h6.数字越⼤,则字体越⼩.
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>2）段落标签:p
在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签，p表示一个段落
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>• p标签描述的段落,前⾯没有缩进.(未来CSS会学)
• ⾃动根据浏览器宽度来决定排版.
• html内容⾸尾处的换⾏,空格均⽆效.
• 在html中⽂字之间输⼊的多个空格只相当于⼀个空格.
• html中直接输⼊换⾏不会真的换⾏,⽽是相当于⼀个空格
3）换⾏标签:br
br是break的缩写.表⽰换⾏.
• br是⼀个单标签(不需要结束标签)
• br标签不像p标签那样带有⼀个很⼤的空隙.
• <br/> 是规范写法.不建议写成<br>
这是⼀个br标签<br/>
这是⼀个br标签<br/>
这是⼀个br标签<br/>ps：p是段落，<br/>是换行
4）图⽚标签:img
img标签必须带有src属性.表⽰图⽚的路径.
<img src="xx.jpg">此时要把xx.jpg这个图⽚⽂件放到和html中的同级⽬录中.img标签的其他属性
• width/height:控制宽度⾼度.⾼度和宽度⼀般改⼀个就⾏,另外⼀个会等⽐例缩放.否则就会图⽚失
衡.
• border:边框,参数是宽度的像素.但是⼀般使⽤CSS来设定
<img src="xx.jpg" width="500px" height="800px" border="5px">ps：
. 属性可以有多个,不能写到标签之前
. 属性之间⽤空格分割,可以是多个空格,也可以是换⾏.
. 属性之间不分先后顺序
. 属性使⽤"键值对"的格式来表⽰.
5）目录结构
---相对路径:以html所在位置为基准,找到图⽚的位置.
• 同级路径:直接写⽂件名即可(或者./)
• 下⼀级路径:image/1.jpg
• 上⼀级路径:../image/1.jpg
--- 绝对路径:⼀个完整的磁盘路径,或者⽹络路径.例如：
• 磁盘路径 D:/rose.jpg (最好使⽤/ ,不要使⽤ \ )
• ⽹络路径
6）超链接:a
•href:必须具备,表⽰点击后会跳转到哪个⻚⾯.
• target:打开⽅式.默认是_self.如果是_blank则⽤新的标签⻚打开
<a href="http://www.baidu.com">百度</a>•链接的几种形式：
外部链接:href引⽤其他⽹站的地址
<a href="http://www.baidu.com">百度</a>内部链接:⽹站内部⻚⾯之间的链接.写相对路径即可.
在⼀个⽬录中,先创建⼀个1.html,再创建⼀个2.htm
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>空链接:使⽤#在href中占位
<a href="#">空链接</a>7）表格标签
• table标签:表⽰整个表格
• tr:表⽰表格的⼀⾏
• td:表⽰⼀个单元格
• thead:表格的头部区域
• tbody:表格的主体区域.
---table包含tr,tr包含td
表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使⽤CSS⽅式来设置.
这些属性都要放到table标签中.
• align是表格相对于周围元素的对⻬⽅式.align="center" (不是内部元素的对⻬⽅式)
• border表⽰边框.1表⽰有边框(数字越⼤,边框越粗)," "表⽰没边框.
• cellpadding:内容距离边框的距离,默认1像素
• cellspacing:单元格之间的距离.默认为2像素
• width/height:设置尺⼨
注意,这⼏个属性,vscode都提⽰不出来
<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>18</td>
</tr>
<td>朔间零</td>
<td>男</td>
<td>20</td>
</Table>8）表单标签
表单是让⽤⼾输⼊信息的重要途径.
分成两个部分:
• 表单域:包含表单元素的区域.重点是form标签.
• 表单控件:输⼊框,提交按钮等.重点是input标签
8.1)form标签
<form action="test.html">
... [form 的内容]
</form>描述了要把数据按照什么⽅式,提交到哪个⻚⾯中,需要结合后端代码理解。
8.1)input标签
各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框
• type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等
• name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀
• value:input中的默认值.
• checked:默认被选中.(⽤于单选按钮和多选按钮)
常用类型：
文本框
<input type="text">密码框
<input type="password">单选框
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">⼥ps：单选框之间必须具备相同的name属性,才能实现多选⼀效果
复选框
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input
type="checkbox"> 打游戏普通按钮
目前点击无反应，需要搭配JS使用
<input type="button" value="我是个按钮">
<input type="button" value="我是个按钮" onclick="alert('hello')">提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>提交按钮必须放到form标签内.点击后就会尝试给服务器发送请求
8.2)select标签
下拉菜单
• option中定义selected="selected"表⽰默认选中
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
8.3)textarea标签
textarea rows="3" cols="50">
</textarea>-⽂本域中的内容,就是默认内容,注意,空格也会有影响.
-rows和cols也都不会直接使⽤,都是⽤css来改的
8.4)⽆语义标签:div&span
div标签,division的缩写,含义是分割
span标签,含义是跨度
就是两个盒⼦.⽤于⽹⻚布局
• div是独占⼀⾏的,是⼀个⼤盒⼦.
• span不独占⼀⾏,是⼀个⼩盒⼦.
<div>
<span>朔间零</span>
<span>朔间零</span>
<span>朔间零</span>
</div>
<div>
<span>朔间凛月</span>
<span>朔间凛月</span>
<span>朔间凛月</span>
</div>
<div>
<span>礼濑真宵</span>
<span>礼濑真宵</span>
<span>礼濑真宵</span>
</div>