-
认识HTML
- HTML是由标签构成的
- <>中括起来的就是标签名,例如<body></body>,<h1></h1>
- 标签一般都是成对的,结束标签会带 / ,例如</body>, </h1>
- 少数标签只有开始标签成为单标签,例如换行标签:<br>
- 开始标签和结束标签之间,写的是标签的内容
HTML文件基本结构
在VScode中,输入!加tab键,会自动补全为如下格式:
- html标签是整个html文件的跟标签
- head标签中写页面的属性
- body标签中写的是页面上显示的内容
- title标签中写的是页面的标题
在body标签里面我们可以写入我们想要在页面展示的内容,并用其他标签给内容赋予结构。
HTML常见标签
注释标签
注释不会显示在界面上,目的是提高代码的可读性
ctrl + / 键可以快速进行注释
标题标签:h1-h6
数字越小表示标题等级越大,字体越大,h1表示一级标题,h2表示二级标题,以此类推。
<!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>
<h1>hello</h1>
<h2>hello</h2>
<h3>hell0</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</body>
</html>
段落标签:p
如果我们想在页面展示一篇文章,直接把文章复制到body中是不可行的,因为它不会帮你自动分段,我们看到的文章就是所有段落连在一起的,没有换行。
<!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>
加入p标签后:
<body>
<p>这是第一段</p>
<p>这是第二段</p>
</body>
换行标签:br
br是break的缩写,表示换行
- br是一个单标签(不需要结束标签)
- br标签不像p标签那样带有一个很大的空隙
- <br/>是规范写法,不建议写成<br>
<body>
这是第一段<br/>
这是第二段
</body>
格式化标签
- 加粗:strong标签 和 b 标签
- 倾斜: em标签 和 i标签
- 删除线: del标签 和 s标签
- 下划线: ins标签 和 u标签
<body>
<strong>strong:这是加粗标签</strong><br/>
<b>b: 这是加粗标签</b><br/>
<em>em: 这是倾斜标签</em><br/>
<i>i: 这是倾斜标签</i><br/>
<ins>ins: 这是下划线标签</ins><br/>
<u>u: 这是下划线标签</u><br/>
<del>del: 这是删除线标签</del><br/>
<s>s: 这是删除线标签</s>
</body>
图片标签
img标签必须要有src属性,用来表示图片的路径,可以是绝对路径,也可以是相对路径。
- alt: 替换文本,当文本不能正确显示的时候,会显示一个替换的文本。
- title: 提示文本,当鼠标在图片上悬停的时候,就会出现提示文字。
- width/height: 图片的宽和高,单位是px
- border:边框,单位是px
<body>
<img src="C:\Users\WANG-PC\Pictures\Saved Pictures\111.jgp" alt="动漫头像" title="这是一张图片" height="200px" border = "2px">
</body>
我们可以看到,当图片裂了,text的文字不能正常显示,这是alt就会显示它的提示文本,让我们知道这原本是一个“动漫头像”。
那么图片为什么会裂开?如果访问的是本地的图片,可能是图片路径不对,如果是网络上的图片地址,可能是网络问题。那么这里我们用的本地图片,检查路径后发现,111.jpg写成了111.jgp。修改之后就能正常显示了。这时候alt的替换文字也不会出现了。
超链接标签:a
- href:必须具备,表示点击后会跳转到哪个页面,herf的值为#时,表示跳转到当前页面
- target:表示打开链接的方式,默认是_self就在当前页面打开链接所在的页面,——blank会新开一页跳转到链接所在页面
<body>
<a href="#"> 跳转到当前页面</a>
<br/>
<a href="https:www.baidu.com">跳转到百度</a>
</body>
<body>
<a href="https://www.baidu.com" target="_blank">用新的标签页跳转到百度</a>
</body>
表格标签
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
<body>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小w</td>
<td>男</td>
<td>11</td>
</tr>
<tr>
<td>小y</td>
<td>女</td>
<td>10</td>
</tr>
</table>
</body>
为什么会看起来不像表格?这是因为表格还有一个重要的属性border(边框)。border默认为0px所以我们看不到有表格。加了边框后:
会发现单元格与单元格之间有间隙,这是因为table中的cellspacing属性,即:单元格之间的距离。 默认为 2 像素。我们把它设置为0px就可以了。
<table border="1px" cellspacing = "0px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小w</td>
<td>男</td>
<td>11</td>
</tr>
<tr>
<td>小y</td>
<td>女</td>
<td>10</td>
</tr>
</table>
input标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框。
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
- name: 给 input 起了个名字. 尤其是对于 单选按钮,(radio) 具有相同的 name (同一类)才能多选一
- value: input 中的默认值.
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度.
文本框和密码框
<body>
这是一个文本框:<input type="text">
<br/>
这是一个密码框:<input type="password" >
</body>
单选框和复选框
<body>
<p>
<input type="radio" name="gender" id="">男
<input type="radio" name="gender" id="">女
</p>
</body>
要实现单选框的必须就是要给选项设置相同的“name",相当于把它们分成一组,一组里面只能选一个。如果没有设置name属性或者说name属性的值不同,那么就不能达到单选的效果,这样就会导致可以同时选中多个选项。
对于单选框的体验优化,我们可以用label标签搭配radio的id实现,它达到的效果就是我们点击文字的时候也可以选中,这样就优化了点击的体验,扩大了选中的面积,更易于用户选中。
<body>
<p>
<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female">女</label>
</p>
</body>
这样我们点击“男”或者点击“女”的时候也能选中了。
复选框中label的作用和单选框相同。这里有一个checked属性,如果设置为checked会默认选中该复选框(默认选中重庆)。单选框radio中也有该属性。
<body>
<p>
<input type="checkbox" name="city" id="cq" checked="checked"> <label for="cq">重庆</label>
<input type="checkbox" name="city" id="sc"> <label for="sc">四川</label>
<input type="checkbox" name="city" id="gz"> <label for="gz">广州</label>
<input type="checkbox" name="city" id="hz"> <label for="hz">杭州</label>
</p>
</body>
按钮
<body>
<p>
<input type="button" value="我是普通按钮" onclick="alert('hello')">
</p>
<p>
<input type="submit" value="提交">我需要搭配表单使用,用于提交用户输入的表单内容
</p>
<p>
<input type="reset" value="清空">我需要搭配表单使用,用于重置用户输入的表单内容
</p>
</body>
点击普通按钮会出现跳出hello的弹出框,这是因为我们在button中设置了onclick(点击属性),只要鼠标点击按钮就会出现一个弹出框(alert),弹出框显示:hello。onclick是属于js的,按钮搭配js使用可以实现很多丰富多彩的功能。
后面的两个按钮,提交和清空都要搭配表单使用,但是因为这里我们没有写表单,所以点击他们是没有变化的。或者说我们看不见变化。
选择文件
<body>
<input type="file" >
</body>
select标签
select就是一个下拉菜单,里面的每个option就是一个“菜”
<body>
<select name="year" id="">
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
</body>
textarea标签
文本框,我们可以用cols 和 rows来限制文本框每行写多少字,可以写几行。
<body>
<textarea cols="100" rows="10"></textarea>
</body>
无语义标签div和span
这两个都是用于网页布局的标签,我们可以把它们视为两个盒子,用他们来存放东西(内容)。
- div 是独占一行的, 是一个大盒子.
- span 不独占一行, 是一个小盒子.
<body>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
换行 <br/>
<span>第一个span</span>
<span>第二个span</span>
<span>第三个span</span>
</body>