HTML小记

Posted brent

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML小记相关的知识，希望对你有一定的参考价值。

======html

HTML(Hyper Text Markup Language): 超文本 标记 语言

超文本（文本，音频，图片，视频等），标记（<>),文件后缀为.html 也是文档的一种，用来开发网页的语言。

(1) <!DOCTYPE HTML>文档声明, 用来声明HTML文档所遵循的HTML规范和版本 上面是html5.0的声明, 也是目前最常用的版本
(2) <html></html>根标签, 用于包裹所有的网页内容(除了文档声明)
(3) <head></head>头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(4) <body></body>体部分, 用来存放可视化的网页内容. 即真正的网页数据
(5) <title></title>声明网页的标题
(6) <meta charset="utf-8" >用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

标签：

标签上声明属性，属性不能独立存在，可以声明多个属性，属性的值用单引号或说双引号引起来,标签没内容可以写成自闭标签。
<br/> 换行；  不换行空格；   全角空格;
<img src="" " href =""></a> 超链接标签,target 指定何种方式打开超链接，_self默认值，表示当前窗口打开超链接, _blank：表示在新的窗口中打开超链接.

/* style标签内只能书写css注释和css代码 */
table{
border:*2px solid red; /* 为表格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
background-color: pink; /* 为表格设置背景颜色 */
width: 70%; /* 为表格设置宽度 */
/* margin-left: 15%; */
/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
   margin-left: auto;
margin-right: auto;
}
td,th{
border:2px solid red; /* 为单元格添加边框 */
border-collapse: *collapse*; /* 设置边框合并 */
padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}
h1{
/* border: 2px solid blue; */
text-align: *center*; /* 设置元素中的内容水平居中 */
}
</style>

table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）

表单：

用于向服务器提交数据 ，
<form action="url地址" method="提交方式"></form> :action属性用于指定表单的提交地址,method="GET/POST" 属性是用于指定表单的提交方式，常用的就是GET和POST 提交
<input type="text" name="username"/>):普通文本输入框(比如:用户名/昵称/邮箱/验证码等)
<input type="password" name="pwd"/>:密码输入框(比如:密码/确认密码等)
<input type="radio" name="gender"/>男:单选框(比如:性别/部门等)
<input type="checkbox" name="like"/>):复选框/多选框(比如:爱好/岗位等)
<input type="button" value="换一张"/>:)普通按钮(比如:换一张图片),,普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为
<input type="submit" value="提交/注册/登录"/>:提交按钮(比如:提交/注册/登录)

select用于定义一个下拉选框 option用于定义下拉选框上的选项 selected设置当前option选项默认被选中
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
textarea 多行文本输入区域：

<textarea name="description" cols="30" rows="5" placeholder="请输入描述信息..."></textarea>
cols属性: 用于设置文本输入框的列数(宽度) rows属性: 用于设置文本输入框的行数(高度) placeholder属性: 设置输入框中的提示消息!

提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加 name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略

如何让多个单选框只能有一个被选中？<input type="text" name="username"/>
<input type="password" name="psw"/>
要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相 同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！
为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。 因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值 都是on)，

<input type="radio" name="gender" value="female"/>女

如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前 单选框或复选框默认被选中。例如：

男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like"
value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性，可以让当前option选项默认被 选中，例：

<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>

下拉选框中option选项上的value属性的作用是什么？

<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会 提交value属性的值。 如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提 交标签中的内容
audio标签能够播放声音文件或者音频流：

<audio controls="" src="audio/李白.mp3"></audio>
src属性：用于指定要播放的音频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：音频在就绪后马上播放（自动播放）
loop="loop"：当音频完成播放后，再次开始播放（循环播放）
width、height：设置音频播放器的宽度和高度

<audio> 与 </audio>之间插入的内容是供不支持 audio 元素的浏览器显 示的
<audio controls="" src="audio/nihao.mp3">如果您可以看到此内容，说明您的浏览器不支持此标签!</audio>

video标签能够播放视频流，目前支持三种视频格式：MPEG4、Ogg、WebM。

<video controls src="video/小芳.mp4" ></video>
video标签内属性同audio标签内属性相同

div、span、p元素都是非常普通、但是又很常用的标签，它们都是容器标签，可 以用来包裹其他元素或文本，将样式添加在这些元素上，就可以为包含在其中的内容 设置样式。 div、p：块元素，默认独占一行，可以设置宽高（其中div元素通常用于布局， 而p元素通常用于定义段落） span：行内元素，行内元素可以显示在同一行，不可以设置宽高（span用于包含 文本或组合行内元素，以便于统一设置样式）

注册表案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {
border: 2px solid red; /* 为表格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
background-color: lightgrey; /* 为表格设置背景颜色 */
/* margin-left: 15%; */
/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
margin-left: auto;
margin-right: auto;
}
td, th {
border: 2px solid red; /* 为单元格添加边框 */
border-collapse: collapse; /* 设置边框合并 */
padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}
h1 {
/* border: 2px solid blue; */
text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<body>
<h1>欢迎注册</h1>
<form action="#">
<table>
<tr>
<!-- 用户名输入框 -->
<td>用户名:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<!-- 密码输入框 -->
<td>密码:</td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<!-- 性别单选框 -->
<td>性别:</td>
<td><input type="radio" checked="checked" name="gender" value="male" />男 <input type="radio" name="gender" value="female" />女
</td>
</tr>
<tr>
<!-- 爱好复选框/多选框 -->
<td>爱好:</td>
<td><input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football" />足球 
<input type="checkbox" name="like" value="volleyball" />排球</td>
</tr>
<tr>
<!-- 城市下拉选框 -->
<td>城市:</td>
<td><select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select></td>
</tr>
<tr>
<!-- 自我描述 多行文本输入框 -->
<td>自我描述:</td>
<td><textarea name="des" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea></td>
</tr>
<tr>
<!-- 提交按钮 -->
<!-- colspan: 设置单元格横跨的列数 -->
<td colspan="2" style="text-align: center;"><input
type="submit" value="提交" /></td>
</tr>
</table>
</form>
</body>
</html>

以上是关于HTML小记的主要内容，如果未能解决你的问题，请参考以下文章

python学习小记

python小记--解释器

网站SEO-优化小记

MySql 小记

MagicalRecord简单使用小记

fetch普通用法及搭配async,await用法小记