HTML的学习-CSDN博客

用来展示图片的

例：<img src = "XXX.png" title = "XXX" width = "200px" alt = "">

src：1.内部的图片地址

2.写外链的地址

title：鼠标悬停时显示的内容（是所有标签都要的）

width：图片的宽度

height：图片的高度

*******一般情况下，高度和宽度任意定义一个即可，另外一个会等比例缩放*******

alt：当图片不存在时，显示的内容

a标签

<a href = "http://www.XXX.com" target="_blank">点击</a>

href属性指定目标网页地址，该地址的几种类型：

绝对URL - 指向另一个站点（比如 href = "http://www.jd.com"）
相对URL - 指当前站点中确切的路径（href = "index.html"）
锚URL - 指向页面中的锚（href = "#top"）

target:

_blank：表示在新标签页中打开目标网页
_self：表示在当前标签页中打开目标网页

3.标签的注意点

标签的嵌套

标签之间是可以互相嵌套的，标签套标签

块儿级元素是可以嵌套所有的标签的

p标签不能够嵌套块儿级元素，但是它可以嵌套行内元素

行内元素只能嵌套行内元素，不能够嵌套块儿级元素，就算写了嵌套也不报错，只是没有效果而已

**********针对前端来说，不会轻易报错，如果写的不对只是没有对应的效果**********

标签的两个自带重要属性

id值：相当于是人的身份证，一个文档中，id值不能够重复，必须唯一

class值：可以有多个，一个标签可以有多个class值，一个class值也可以被多个标签拥有

<div id="d1" class='c1 c2 c3'></div>
<div id="d2" class='c2'></div>
<div id="d3" class='c3'></div>
<div id="d3" class='c1'></div>

#d1

.c1

要想使用id值，必须使用#开头

要想使用class值，必须使用 .开头

4.列表与表格

列表

1.无序列表

<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表

3.标题列表

表格

table标签：

<table>

<thead>

<tr>

<th>序号</th>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

                <th>薪资</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

                <td>凯文</td>

                <td>20</td>

                <td>男</td>

                <td>2000</td>

</tr>

</tbody>

</table>

结果：

id 姓名年龄性别薪资
1 凯文 20 男 2000

属性说明：

border：表格边框
cellpadding：内边框
cellspacing：外边框
width：像素，百分比（最好通过CSS来设置长宽）
rowspan：单元格竖跨多少行
colspan：单元格横跨多少列（即合并单元格）

form表单标签（注意是form，不是from）

<form action="">
<p>
<label for="inp1">
username: <input type="text" id="inp1">
</label>

</p>
<p>
<label for="inp2">
password: <input type="password" id="inp2">
</label>
</p>
<p>
<label for="inp3">
password: <input type="date" id="inp3">
</label>
</p>
<p>
<input type="checkbox" name="hobby"> read
<input type="checkbox" name="hobby"> music
<input type="checkbox" name="hobby"> tangtou
</p>
<p>
<input type="checkbox" name="hobby1"> read1
<input type="checkbox" name="hobby1"> music1
<input type="checkbox" name="hobby1"> tangtou1
</p>
<p>
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<input type="radio" name="gender"> 未知
</p>
<p>
<input type="hidden" value="123">
</p>
<p>
<input type="file" multiple>
</p>
<p>
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">河南</option>
</select>
</p>
<textarea name="" id="" cols="30" rows="10">

</textarea>
<p>
<input type="submit" value="登录">
<input type="reset" value="重置">

</p>
</form>

属性说明：

name：表单提交时的”键“，注意和id的区别
value：表单提交时对应项的值
type = "button","resect","submit"时，为按钮上显示的文本年内容
type = "text","password","hidden"时，为输入框的初始值
type = "checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

验证form表单朝后端提交数据

<form action = "">

action:

***写朝后端提交的地址***

这里写什么地址就朝这个地址提交数据，应该填写后端的地址

1.什么都不写：朝当前地址提交

2.全写：http://127.0.0.1:5000/index/ 朝这个地址提交

3.只写后缀：/index/ 自动补全IP

***form表单要想把数据提交到后端，每一个标签都要有一个name属性***

name的属性值就是提交到后端数据的key值，用户输入的内容就是value值

针对复选框、单选框标签都应该有一个value属性，用于区别前端用户选择的哪个选项

对于数据的提交必须满足以下两个条件：

1.请求方式必须是post

2.数据编码方式：

1.application/x-www-form-urlencoded

2.multipart/form-data

3.json

3.编码方式必须是multipart/form-data才能提交问价

4.urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据

5.urlencoded形式的数据长什么样子：

username=&password=&date=&hidden=123&myfile=&city=

6.form-data编码格式的数据：

username=&password=&date=&hidden=123&myfile=&city=

boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy

文件数据：

***对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据***

7.form表单不能够提交json数据

8.如果想提交json格式的数据：Ajax技术、第三方的api工具postman

二.CSS介绍

1.什么是CSS

CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

***CSS就是对HTML标签做样式的，让不好看的变得好看***

2.CSS的一些常用介绍

CSS语法

选择器{

属性名1：属性值；

属性名2：属性值；

属性值3：属性值；

属性值4：属性值；

属性值5：属性值；

}

CSS注释

CSS里：

/*这就是注释*/

HTML里：



注释快捷键是： CTRL + ？

CSS的几种引入方式：

行内样式：

<p style = "color:red"> Hello world.</p>

内部样式：

<head>

<meta charset = "UTF-8">

<title>Title</title>

<style>

p{

background-color: #2b99ff;

}

</style>

</head>

外部样式：

<link href = "mystyle.css" rel = "stylesheet" type = "text/css"/>