文章目录
回顾复习
由上文我们已经知道
- HTML是由标签构成的。
- 并且标签一般是成对出现的,但是也有些标签是“单标签”
- 标签是可以嵌套的~(树形结构.DOM树等)
- HTML是运行在浏览器中的。
已经了解到了HTML的基本结构如下:
<html>
<head>
<body>
//需要编写的内容
</body>
</head>
</html>
上述基本结构不需要每次都写出,可以通过!+tab键快速生成。
在上文中我们学习了一些基本的标签:h1-h6的标题标签,超链接标签a,段落标签p ,图片标签img,换行标签br,基本的格式标签加粗、斜杠、下划线等等。
超链接标签a(补充)
- herf属性:表示点击后会跳转到哪个页面(必备的属性)
- taget属性:描述了超链接的打开方式,是直接在本标签页打开,还是用新的标签页打开。一般默认是_self.如果是_blank则用新的标签页打开。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码示例</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_self">这是百度的链接</a>
</body>
</html>
taget默认self 点击后会在本标签页跳转链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码示例</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">这是百度的链接</a>
</body>
</html>
taget设置为_blank,点击后会打开新的标签页,并跳转链接。
链接的几种形式
- 外部链接:href引用其他网站的地址。(上文已提到)
<a href="http://www.baidu.com">百度</a>
- 内部链接:网页内部页面之间的链接。在href中写入相对路径即可。
<!-- 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>
- 下载链接:href路径中写入一个文件。(可以使用zip文件)
<a href="test.zip">下载文件</a>
- 网页元素链接:可以给图片等任何元素添加链接(把元素放入a标签中)
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>
- 锚点链接:可以快速定位到页面中的某个位置。
表格标签
基本使用
- table 标签:表示整个表格
- tr:表示表格的一行(table row)
- td:表示一个单元格
- th:表示表头单元格。会居中加粗
- thread:表格的头部区域(不是th,范围比th要大一些)
- tbody:表格得到主体区域
后两个用到的不多。
table包含tr,tr包含td或者th.
表格属性
改变尺寸:width、heigth
单位是px像素。
加上边框
border
列表标签
无序列表标签(重要):ul和li
ul:整个无序列表(u:unordered)
li:列表项,一个列表包含多个列表项(li:l是list,i是item列表项)
有序列表标签(用的不多):ol和li
ol:整个有序列表(o:ordered)
li:列表项,一个列表项中包含多个表项。
代码示例:
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>喝奶茶</li>
</ol>
<!-- 无序列表-->
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>喝奶茶</li>
</ul>
效果:
自定义列表标签(重要): dl dt dd
dl:整个表项
dt:小标题
dd:标题里的内容
表单标签
表单标签就是让用户“填表”。此处 的填表并不是让用户填表格,而是让用户输入一些信息。
通过表单,就可以让用户和服务器之间进行一些简单的交互。
表单标签包括好几个标签,统称为标签。
分成两个部分:
- 表单域:包含表单元素的区域。重点是form标签
- 表单控件:输入框,提交按钮等。重点是input标签
form标签
<form action="test.html">
...form的内容
</form>
描述了要把数据按照什么方式 提交到哪个页面中。
imput标签
input标签可以用来表示各种输入的控件~
"控件"是在以前的图形化界面编程中的词,简单来说,一个按钮、一个文本框、就是一个控件,一个单选框、复选框也都是控件~
表示一个图形界面的基本元素,都可以称为控件~
input最核心的属性,叫做type.
type不同的取值就能表示不同的控件类型~
- type(必须有):取值种类很多,button,checkbox,text,file,image,password,radio等。
- name:给input命名,尤其是 对于 单选按钮,具有相同的那么才能多选一。
- value:input中的默认值。
- checked:默认被选中(用于单选按钮和多选按钮)
- maxlength:设定最大长度
下面介绍input标签中几种常用的type。
1)文本框
最基本输入框,只能保存1行内容,不能换行
<input type="text">
2)密码框
密码框中输入的内容会隐藏。表示输入的内容为密码时,使用密码框。
<input type="password">
3)单选框
<input type="radio">
通常情况下,需要把多个input type=“radio” 关联起来 ,才能达到“N选1”的效果。
多个单选框的关联,需要用到name属性。
如果多个单选框的name相同,那么就只能取其中一个~
<input type="radio" name="action">敲代码学习
<input type="radio" name="action">玩游戏上号
checked属性 :默认。即选项默认位置。
<input type="radio" name="action" checked="默认">敲代码学习
<input type="radio" name="action">玩游戏上号
4)复选框
checkbox,可以选择多个选项。
<input type="checkbox">吃饭
<br>
<input type="checkbox">睡觉
<br>
<input type="checkbox">敲代码/上号
5)普通按钮
button.
<input type="button" value="这是一个按钮" onclick="alert('hello')">
value属性:在按钮上显示 的文字。
onclick:绑定了一个点击事件。调用后面的alert函数,打印一个字符串“hello”
效果如下:
6)提交按钮
submit.
<input type="submit" value="提交" >
提交按钮就是把当前表单里的用户输入数据,包装成一个http请求,发送给服务器~
7)清空按钮
<input type="reset" value="清空">
8)选择文件
一般在上传文件的时候用到。
<input type="file">
点击选择文件后,就会让我们选择一个文件
label标签
一般搭配input使用。具体来说,是搭配input中的单选框或者复选框使用
label标签的作用:当我们点击单选框/或者复选框后面的文字时,等同于我们直接点击单选框/复选框。
其实就是为了让用户更方便的选中选项。
<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female">女</label>
<input type="radio" name="gender" id="unknown"><label for="unknown">未知</label>
for属性表示当前的label要和哪个input标签关联起来~
这里就需要给对应的input标签起一个唯一的身份标识id
select标签
select标签:下拉框/下拉菜单。
<select name="" id="">
<option value="">北京</option>
<option value="" selected="selected">上海</option>
<option value="">深圳</option>
<option value="">广州</option>
<option value="">杭州</option>
</select>
select是标识下拉框本身。
里面的选项是一个一个的option标签。
通过selected属性来指定默认的选项,如果没有指定,那么会默认选中第一项。
textarea标签
多行文本编辑框
<textarea name="" id="" cols="30" rows="10"></textarea>
cols属性:规定有几列。row属性:规定有几行。
无语义标签 div&& span
上面介绍的 很多标签,都是有语义标签,即标签有明确的意义,功能明确,作用明显。
而无语义标签的功能并不明确,或者说,无语义标签啥都能干,有语义标签的功能都能用无语义标签来实现。(大部分标签都可以使用div和span来代替)
无语义标签没有专门的用途。
div和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>