常见的HTML标签:
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
一、简单元素
h
- 表示网页的标题
- h1~h6共规定了6个等级的标题
p元素
- 表示文章中的一个段落 （paragraph）
strong元素
- 用于强调某些文本，粗体的显示效果
pre元素
- 默认情况下，HTML代码中的大多数空格都会被浏在览器压缩，比如一段连续的空格会被压缩成1个空格
- 如果想完全保留HTML代码中的空格、换行，可以使用pre元素
br元素
- 单标签，表示强制换行
二、img标签
- 1、img标签的基本介绍
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8”>
<title>Title</title>
</head>
<body>
<!-- 使用tab键可以自动生成一堆代码—>
<img src="http://baidu.com.234png”
alt="图片加载失败”
width = “200”
height=“200”
>
</body>
</html>
img(img标签中的img其实是英文image的缩写
所以img标签的作用, 就是告诉浏览器我们需要显示一张图片)
img标签格式: <img src="" alt="">，其实img标签中的src是英文source的缩写,所以img标签中的src就是用来告诉img标签,将要加载哪一张图片。属性scr的值是网络路径或者本地路径。alt其实是英文alternate的缩写, 它的作用就是用于告诉浏览器, 当需要显示的图片找不到时显示什么内容。在HTML5规范中,alt属性是img标签的必要属性 。
注意点：
1.img标签不会独占一行
2.如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形. 我们可以只指定宽度和高度其中的一个值即可
3.只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形
4.img中的其它属性
width: 宽度
height: 高度
所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高
如果img标签没有指定需要显示的图片的宽高, 那么系统会按照图片默认的宽高来显示
如果img标签指定的宽高, 那么系统会按照指定的宽高来显示
title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容
<img src = "123.png">
<p><img src = "123.png"> </p>
<p><img src = "123.png"> </p>
<p><img src = "123.png"> </p>
<p><img src = "123.png"> </p>
<img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了”>
- 2、加载显示本地图片
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8”>
<title>Title</title>
</head>
<body>
<!-- 使用tab键可以自动生成一堆代码—>
<img src="123.png”
alt=“”
>
</body>
</html>
相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关系
绝对路径：完整的描述文件位置的路径
通过相对路径给scr 赋值：
- 同级：图片和html在同一文件夹
<p><img src = "./123.png"> </p>
- 同级：图片和html在同一文件夹
-
2.下级:"存储图片的文件夹"和".html文件"在同一个文件夹中
<img src="./image/123.png" width="100" alt=“”>
其中一个.代表当前文件夹（也就是当前代码所在的文件夹，./可以省略) -
3.上级：上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
<img src="../123.png" width="100" alt="对不起, 你需要查看的图片不见了”>
其中两个.代表当前文件夹的上级文件夹
通过绝对路径赋值
<p><img src = "存储图片的位置C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"> </p>
注意：
1.路径中不要出现中文, 否则可能出现未知问题；
2.开发中绝对路径赋值移植性差不便于团队开发，因此在开发中不用绝对路径赋值，使用相对路径赋值。
3.以后企业开发中如果需要编写路径，统一使用右斜杠/，不要适用左斜杆\，因为将来我们开发的程序可能会部署到其他操作系统的服务器上，而在其他操作系统中路径都/，所以写的不是/，可能会引发问题。
三、表单
常用元素
form
表单
一般情况下，其他表单相关元素都是它的后代元素
input
单行文本输入框、单选框、复选框、按钮等元素
textarea
多行文本框
select、option
下拉选择框
button
按钮
label
表单元素的标题
fieldset
表单元素组
legend
fieldset的标题
3.1、input
常用属性
- type:input的类型
- maxlength：允许输入的最大字数
- placeholder：占位文字
- readonly：只读
- disabled：禁用
- checked：默认被选中
只有当type为radio或checkbox时可用 - autofocus：当页面加载时，自动聚焦
- name：名字 在提交数据给服务器时，可用于区分数据类型
- value：取值
- form: 设置所属的form元素（填写form元素的id）
一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器
type的常见类型：
text：文本输入框（明文输入）
password：文本输入框（密文输入）
radio：单选框
checkbox：复选框
button：按钮
reset：重置
submit：提交表单数据给服务器
file：文件上传
hidden：隐藏域
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="UTF-8”>
<title>测试</title>
</head>
<body>
<div>
手机:<input type=“text”>
</div>
<div>
密码:<input type=“password”>
</div>
<div>
验证码:<input type="text"><input type="button" value="获取验证码”>
</div>
<div>
性别: 男<input type="radio"> 女<input type=“radio”>
</div>
<div>
爱好: 篮球<input type="checkbox"> 足球<input type="checkbox"> 健身<input type=“checkbox”>
</div>
<div>
<input type="reset"> <input type=“submit”>
</div>
</body>
</html>
截屏2021-06-15 下午5.18.04.png
按钮
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
<form action="https://www.baidu.com/" method="get">
<div>
手机:<input type="text" name="accout">
</div>
<div>
密码:<input type="password" name="pwd">
</div>
<div>
验证码:<input type="text"><input type="button" value="获取验证码">
</div>
<div>
性别: 男<input type="radio"> 女<input type="radio">
</div>
<div>
爱好: 篮球<input type="checkbox"> 足球<input type="checkbox"> 健身<input type="checkbox">
</div>
<div>
<input type="reset"> <input type="submit">
</div>
</form>
-
提交按钮（type=submit)提交表单数据给服务器时，会提交它所属form的表单 - 只会提交有name属性值的input的数据,参数：key = name属性值,value = input的输入值
checkbox（复选框）
<body>
<form action="https://www.baidu.com/" method="get">
<div>
爱好: 篮球<input type="checkbox" name="hobboby" value="lanqiu"> 足球<input type="checkbox" name="hobboby" value="zuqiu"> 健身<input type="checkbox" name="hobboby" value="jianshen" >
</div>
<div>
<input type="reset"> <input type="submit">
</div>
</form>
</body>
-
提交按钮（type=submit)提交表单数据给服务器时,checkbox不仅需要设置name,还要设置value。 - 当只有被勾选的checkbox才会被提交到服务器
- 属于同一种类型的checkbox，name值要保持一致
radio（单选框）
<div>
性别: 男<input type="radio" name="sex"> 女<input type="radio" name="sex">
</div>
- radio只有name一样时，才能实现单选功能
- radio的name值默认是on,通过value=“1”来指定需要的值。
- 当只有被勾选的 radio才会被提交到服务器
value属性
- 1、设置输入框的默认值
- 2、设置按钮的文字
- 3、设置checkbox、radio被勾选时，发给服务器的值
网友评论