Html学习之常见的元素（二）

作者: 冷武橘 | 来源:发表于2021-06-15 18:32 被阅读0次

常见的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: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容

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 赋值：

1. 同级：图片和html在同一文件夹
 <img src = "./123.png">
2.下级:"存储图片的文件夹"和".html文件"在同一个文件夹中
<img src="./image/123.png" width="100" alt=“”>
其中一个.代表当前文件夹（也就是当前代码所在的文件夹，./可以省略)
3.上级：上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中
<img src="../123.png" width="100" alt="对不起, 你需要查看的图片不见了”>
其中两个.代表当前文件夹的上级文件夹

通过绝对路径赋值
<img src = "存储图片的位置C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg">

注意：

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被勾选时，发给服务器的值

网友评论

本文标题：Html学习之常见的元素（二）

本文链接：https://www.haomeiwen.com/subject/asizeltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！