html
HTML
超文本标记语言
超文本指可以包含图片、超链接、音频、视频等非文字内容
http超文本传输协议 80端口
ftp
https 安全传输协议
内核
1 | IE Trident |
地址组成
scheme://host.domain:port/path/filename
==scheme==
定义因特网服务的类型。最常见的类型是 http
==host== 定义域主机 (http 的默认主机是 www)
==domain== 定义因特网域名
==port== 定义主机上的端口号 (http 的默认端口号是 80)
==path== 定义服务器上的路径 (如果省略，则文档必须位于网站的根目录中)
==filename== 定义文档/资源的名称
==url只能使用ASCII==
==header中定义的是css和js和一些其它内容（关键字）==
1 | <!-- 1、指定字符集,charset就是charactor set（即“字符集”） 浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。 --> |
b/s 浏览器/服务器模式
c/s 客户端/服务器模式
1 |
表明html的版本
标签
标签分为但标签和双标签
单标签为只有一个开始标签加/
双标签为开始标签和结束标签
html基础标签
h1-h6
随着数字的增大标签越来越小
h1最大，h6最小
hr 水平分割线 单标签
p 段落标签
div 相当于容器，块级元素
br换行 单标签
a 超链接
img 图片标签
文本格式化标签
| 标签 | 显示效果 |
|---|---|
| b 和 strong | 粗体（推荐strong） |
| i 和 em | 斜体（推荐em） |
| s 和 del | 删除线（推荐del） |
| u 和 ins | 下划线（推荐ins） |
| small | 小号字显示 |
| sup | 上标 |
| sub | 下标 |
属性
属性align对齐方式center left right
hr有属性color和size（size设置粗细）
==a==
超链接mailto：跳转邮箱
腾讯qq tencent://message/?uin=173502891
设置锚点如果是a标签在name中写锚点名
如果是其他标签则设置id
指向锚点href中写#锚点名
a标签跳转方式_blank新页面打开
-self 本网页跳转
==img==
img src是路径 alt图片加载不出时的替换文本
如果想等比缩放 设置width或者height中的一个
title 鼠标放在图片上时现实的文字
相对路径
在同一目录下直接写目的文件的 文件名和拓展名
在下一级目录 /目录名/文件名.拓展名
在上一级目录，../文件名.拓展名
绝对路径
文件在磁盘中存放的位置
1 | <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> |
图片shape=rect为矩形x1，y1，x2，y2
=circle为圆形，坐标，半径x1，y1，r
==列表==
ul无序列表 列表项为li
ol有序列表 列表项为li
dl定义列表 列表标题为dt 列表项为dd
==table==
最外层table
table中包裹着头部thead和身体tbody
thead包裹着th单元格。这个是首行默认加粗居中的
tbody包裹着tr，每一个tr代表一行，tr中包裹着td，每一个td代表一个单元格
border 边框
width height设置表格的宽度高度
cellspacing 单元格之间的空白
cellpadding 单元边框与内容之间的空白
bgcolor 背景颜色（不推荐使用）
td的属性 colspan 列合并 rowspan 行合并
form表单
表单有属性action 和 method
action用于指定提交到的地址
method用于指定提交的方式
==分为post和get==
get 提交用户输入的信息，显示在地址栏中，提交速度快，但是不安全，请求长度有限
post 提交用户输入的信息，在地址栏中不显示，提交速度慢，安全，但是请求长度无限制
input
有type属性，指定input的类型
text为文本框乱
password为密码框
radio 为单选按钮
check 为复选框
submit 为提交按钮
reset 为重置按钮
hidden 为隐藏文本
==button==
button为提交按钮
==file==
file为文件上传框
file文件的accept属性
值
image/* 接受所有的图像文件。
image/png 表示只接受图片文件的png文件
audio/* 接受所有的声音文件。
video/* 接受所有的视频文件。
multiple属性可以用来设置一次允许选择多个文件 multiple=”multiple”
textarea 文本域
cols列（可见宽度）
rows行（可见行）
style
禁止缩放resize：none
水平缩放：resize：horizontal
垂直缩放：resize：vertical
水平垂直缩放：both
lable标签
点击文字选中复选框或者单选按钮
方式一，lable的for属性为input标签的id
方式二，直接lable把input包裹
select标签 下拉框
option 列表项
selected 默认选中的
size 大小按项数显示
multiple 多选
《optrgroup》选项组 option 放其中
给optgroup添加label属性，用列表组命名
button
按钮type属性有三个值submit reset button
==checked属性默认选中，单选框和多选框以及下拉框使用==
h5
语义化
有意义
看到标签就可以知道里面写的什么内容
语义化标签
h5新标签
header 头部
nav 导航
article 文档（支持嵌套）
aside侧边栏
time 时间
section 节
figure figcaption
input 新type
日期type分类
1 | date 包含年月日 |
电子邮箱：email
数值框：number
1 | min和max设置最大数字和最小数字 |
数值滑块空间：range
搜索框：search
电话框：tel
url地址：url
datalist列表 单独是一个标签 和text配合使用，text的list 属性 写datalist的id
option列表项
新属性
autocomplete 自动完成
novalidate 提交表单时不应该验证 form 或 input 域
placeholder 提示
required 提交之前填写输入域（不能为空）
step 步长
autofocus 自动获得焦点
multiple 是否可以多选
min 和 max 属性 数字型或者日期型输入框的最小值和最大值
pattern 输入的内容验证pattern中写的正则表达式
input form 属性 表单外input引用from
input formaction 在input内重新定义提交的位置 会覆盖from的action属性
input formenctype 提交到服务器的编码格式 覆盖 form 元素的 enctype 属性
input formmethod 表单提交的方式 覆盖了form元素的 method 属性
formnovalidate boolean数据 元素在表单提交时无需被验证 formnovalidate 属性与 type=”submit” 一起使用
Video 标签
| 属性 | 值 | 描述 |
|---|---|---|
| muted | muted | 静音 |
| autoplay | autoplay | 自动播放 |
| controls | controls | 添加播放控制及音量控制功能栏 |
| height | Pixels | 播放器的高度 |
| loop | loop | 重复播放 |
| poster | url | 预览图 |
| preload | auto metadata none | 如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频 |
| src | url | 视频的位置 |
| width | pixels | 播放器的宽度 |
mark 背景颜色为黄色的选中
ruby 在文字上方注音，tr中写拼音
meter 度量条
value默认显示值
max范围最大值
min范围最小值
low低标准
high 高标准
form 所属的form
optimum 最佳标准值，在低标准和高标准之间
progress 进度条
max最大值
min最小值
value默认值
details 详细信息标签
summary details标签的标题
- 标题: html
- 作者: Voun
- 创建于 : 2023-08-04 10:44:15
- 更新于 : 2024-08-13 05:34:47
- 链接: http://www.voun.top/2023/08/04/html/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。