01html基础

01html 基础

HTML: 运行在浏览器中的超文本标记语言

​ 标记语言：由成对的标签构成
​ 超文体：不仅仅是文本，还可以支持音频、视频、动画等

W3C:

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C标准:

结构：页面中要有的内容，HTML
表现：页面中的内容要怎么排版，怎么显示，CSS
行为：页面中的交互动作，JS(javaScript)

最基本的页面元素：

< html >
< head >
< title >标题< /title >
< /head >
< body >

< /body >

< /html>

!DOCTYP：声明，声明我们使用的是什么标准
meta：指明页面的源信息

常见标签：

​ h1 - h6: 标题
​ p: 段落
​ br: 换行，< br/>
​ hr：水平线，< hr/>
​ strong: 加粗
​ em: 斜体

注释和特殊符号：

​ 空格：&nbsp
​ 大于：&gt
​ 小于：&lt
​ 双引号：&quot
​ 版权符：&copy

img标签：图片，是一个单标签

​ src: 图片路径
​ alt: 当图片路径不存在，图片是破图时，在图片位置给出的提示
​ title: 当鼠标移入到图片中，鼠标位置给出的提示
​ height：
​ width：设置图片的宽和高，当只设置一个时，图片会自动等比例缩放

a标签：超链接

​ href：要链接到的地址
​ target：
​ _self：当前窗口打开
​ _blank：新起一个窗口打开

锚链接：可以跳转到指定位置的链接

​ 1. 在目标标签中使用id属性，起个名
​ 2. 在a标签href属性中使用 #id名 跳转

功能性链接：

邮件：在href中使用 mailto:1111111111@qq.com 指明邮箱
qq: 在href中使用 tencent://message/?uin=qq号&Site=xxx&Menu=yes 指明qq

块元素：独占一行的标签元素，< h1>~< h6> < p> < div> …
行内元素：可以和其他元素共用一行的标签元素，< img> < a> < span>…

列表：

​ 有序列表：列表项前面默认有1234数据顺序
​ < ol>
​ < li>列表项一
​ < li>列表项二
​ < li>列表项三
​ < /ol>

无序列表：列表项前面默认为实心小圆点，没有1234吸顺序

< ul>
< li>列表项一
< li>列表项二
< li>列表项三
< /ul>

自定义列表:

< dl>
< dt>水果
< dd>苹果
< dd>香蕉
< dd>菠萝
< /dl>

表格：

    <table border="1px"> 表格标签
    <tr> 行标签
        <td>123456</td> 单元格标签
        ...
    </tr>
    <tr>
        <td>123456</td>
        <th>12356</th> 表头标签
        ...
    </tr>
...
</table>

table 中 还有 < head> < body>

合并列：colspan 所跨列数
合并行：rowspan 所跨行数

音频：audio

​ < !-- < audio> -->
​ < audio controls autoplay loop >
​ < source src=“…/xxx.ogg”/>
​ < source src=“…/xxx.mp3”/>
​

视频：video

​ < !-- < video src=“…/xxx.mp4” controls autoplay loop>< /video> -->
​ < video>
​ < source src=“…/xxx.mp4”/>
​ < source src=“…/xxx.avi”/>
​ < /video>

header 标题头部区域的内容（用于页面或页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web页面中的一块独立区域

article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

https://www.runoob.com/
https://www.w3school.com.cn/

表单：页面中所有需要有提交动作的，都要在表单中

《form》《/form》

action: 表单提交的地址
method: 数据提交方式
post：把所有要提交的数据封装成一个对象，然后把对象提交
优点：所有数据被封装起来，安全；所有数据被封装，理论上内存有多大，就可以提交多大的数据
缺点：速度相比get慢
get: 在浏览器中使用 ?key=value&key=value… 的形式拼接起来的，中间没有空格
优点：提交速度快
缺点：所有数据会以明文的方式拼接到地址后面，非常的不安全；浏览器地址不可能无限制的拼接，所以提交的数据量有限，一般2k左右
put
delete

表单元素：

​ 输入框：
​ type: 指明输入框的类型
​ text 一般的输入框，可以输入任何内容
password 密码框，输入的内容不显示
radio 单选框，注意：添加value属性，指明对应选择要提交的值，默认选中为 checked name的值需要一样
checkbox 多选框，注意：添加value属性，指明对应选择要提交的值，默认选中为 checked

file 文件域，注意：表单中一但有file，表单提交方式必须为 post，并且要指明数据处理方式为二进制文件处理： enctype=“multipart/form-data”

下拉框：< select>-< option>

《select》 定义下拉框
《option》 定义下拉框中的下拉选项
注意：select中添加 name 属性，option中添加 value 属性

文本域：< textarea >
rows: 定义默认行数
cols: 定义默认列数

隐藏域：hidden 页面中不显示，但后台处理又需要的数据，可以放在隐藏域中
只读：readonly
禁用：disabled

< label > 增强鼠标的可用性

​ 自动将焦点转移到与该标注相关的表单元素上

placeholder: 当没有内容时，给的提示语
required：必填
pattern：配合 正则表达式，对输入的内容进行校验