赞
踩
快速入门主要是掌握常用的标签
head中最常用的就是指定编码和设置标题这两个标签。
通常我们在head中会设置编码格式为uft-8,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
另外就是在head中指定页面在浏览器标签页显示的名称,使用title标签。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个页面</title>
</head>
显示在浏览器的标签中,就如下图所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个页面</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
标题会占用一行,如下所示:
div标签是块级标签,一个div会占据一行。例如:
<div>div块级标签,独自占用一行</div><div>这也是一个div标签</div>
虽然,这两个div是写在一起的,但是它们会各自占据一块位置。
<br>
标签插入一个简单的换行符。
<br>
标签是一个空标签,意味着它没有结束标签。
span标签是行级标签,它自己有多大,就会占用多大。多个span标签,它们之间用空格隔开。例如:
<span>这是一个span标签</span>
<span>这是另一个span标签</span>
如果它们写在一起,那么就不会被空格隔开。例如:
<span>这是一个span标签</span><span>这是另一个span标签</span>
<a>
标签定义超链接,用于从一个页面链接到另一个页面。<a>
元素最重要的属性是 href 属性,它指定链接的目标。在所有浏览器中,链接的默认外观如下:
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的
例如:
<a href="https://www.baidu.com">百度一下</a>
这样子的<a>
标签是原页面跳转的,如果你想打开一个新的标签页,那么可以是加上target属性并设置为_blank。
<a href="/index.html", target="_blank"><h1>index</h1></a>
上面这个例子同时展示了在网站内页面跳转时可以使用相对路径。点击之后会打开一个新的标签页,进行跳转。例如:
直接引用别的网站的图片,但是有的网站有防盗链,需要注意一下。
<img src="http://img.xintp.com/2020/02/9-31.jpg"/>
<!-- 下面这张图片有防盗链 -->
<img src="https://ask.qcloudimg.com/http-save/yehe-6823247/udz9x3371d.png?imageView2/2/w/1620"/>
这两张图片,下面的那张有防盗链,因此无法显示。
还可以给图片设置样式,例如:
<img src="http://img.xintp.com/2020/02/9-31.jpg", style="height: 100px;" />
设置了图片的高度为100像素,没有设置宽度的时候,会按照比例来自动设置宽度,这样图片不会失去比例,如果同时设置了高度和宽度,那么图片就会按照设置的来显示。例如:
<img src="./img/c57c4f2e092bf23ec0c8e940664d6572.jpg" style="height: 400px; width: 300px;">
注意这里的src的值,表示这张图片是引用项目本地的img目录下的c57c4f2e092bf23ec0c8e940664d6572.jpg图片文件。
也可以设置为按照百分比来进行设置,例如:
<img src="./img/c57c4f2e092bf23ec0c8e940664d6572.jpg" style="height: 50%; width: 10%;">
例如点击图片进行跳转:
<a href="https://www.baidu.com", target="_blank">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<a>
ul和li标签,形成无序列表,例如:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ol和li标签,形成有序列表,例如:
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
table标签中包含表头thead和表体tbody。如下:
<table>
<thead>
<!-- 表头 -->
</thead>
<tbody>
<!-- 表体 -->
</tbody>
</table>
在表格中进行嵌套定义行和列,使用tr来定义行,th来定义列。th嵌套在tr中。例如:
<table> <thead> <!-- 表头 --> <tr> <th>id</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <!-- 表体 --> <tr> <th>1</th> <th>张三</th> <th>18</th> </tr> </tbody> </table>
<input>
标签规定了用户可以在其中输入数据的输入字段。
<input>
元素在 <form>
元素中使用,用来声明允许用户输入数据的 input 控件。
输入字段可通过多种方式改变,取决于 type 属性。例如:
<div> 用户名:<input type="text"> <!--文本框--> 密码:<input type="password"> <!--密码框--> </div> <div> <input type="button", value="按钮"> <!--按钮--> <input type="submit"> <!--提交form表单--> </div> <div> <!-- name设置为一样的radio框之间是互斥的 --> <input type="radio", name="gender">男 <!--单选框--> <input type="radio", name="gender">女 <!--单选框--> </div> <div> <input type="file"> <!--上传文件--> </div> <div> <input type="checkbox">吃饭 <input type="checkbox">睡觉 <input type="checkbox">打豆豆 </div>
还有非常多的type属性,可以参考html5标准中的属性。
select标签呈现出来的是下拉框的效果,例如:
<div> <select name="单选下拉框"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </div> <br> <br> <br> <br> <br> <div> <select name="多选下拉框", multiple> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </div>
<textarea>
标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。例如:
<textarea cols="30" rows="10"></textarea>
input标签可以让用户输入内容,那么如何将input标签中输入的内容,提交到后端呢?这就需要将input标签放在form标签下面,然后就能够将数据提交到后端了。例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户注册</title> </head> <body> <h1>用户注册</h1> <form action="/register", method="post"> <!--action是路径,method是HTTP方法--> <div> 用户名:<input type="text", name="username"> <!--name属性用于form标签提交--> </div> <div> 密码:<input type="password", name="password1"> </div> <div> 重复密码:<input type="password", name="password2"> </div> <div> <input type="radio", name="gender", value="1">男 <input type="radio", name="gender", value="2">女 </div> <div> 邮件地址:<input type="email", name="email"> </div> <div> 住址信息:<input type="text", name="address"> </div> <div> 个人爱好: <input type="checkbox", name="hobby", value="1">吃饭 <input type="checkbox", name="hobby", value="2">睡觉 <input type="checkbox", name="hobby", value="3">打豆豆 </div> <div> <input type="submit", value="注册"> </div> </form> </body> </html>
这个注册页面如下所示:
为了看到form实际提交的效果,这里使用flask作为web后端来接受页面提交的数据。
我们直接来看一下,通过抓包看到的如下的内容:
POST /register HTTP/1.1 Host: 127.0.0.1:5000 Content-Length: 101 Cache-Control: max-age=0 sec-ch-ua: "(Not(A:Brand";v="8", "Chromium";v="101" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "Windows" Upgrade-Insecure-Requests: 1 Origin: http://127.0.0.1:5000 Content-Type: application/x-www-form-urlencoded User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 Sec-Fetch-Site: same-origin Sec-Fetch-Mode: navigate Sec-Fetch-User: ?1 Sec-Fetch-Dest: document Referer: http://127.0.0.1:5000/register Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9 Connection: close username=123&password1=123&password2=123&gender=1&email=123%40123&address=123&hobby=1&hobby=2&hobby=3
可以看的,可以让用户直接输入的内容,写上name之后,提交的时候就会以name为键,输入的内容为值,形成键值对;但是不能直接输入的,例如,单选的性别框,则需要在标签中写上value,提交的时候就会以name为键,value为值。
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。