HTML-Learning

Web Learning

HTML

HTML

属性

<... ...="..." ...="..."></> 属性名=“属性”值
<input disable>仅有属性

HTML基本结构

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
      <p>paragraph</p>
  </body>
</html>

注释

文档声明

<!DOCTYPE html> 对应HTML5

字符编码

<meta charset="UTF-8">

设置语言

<html lang="en/zh-CN/zh"></html>

排版

h1比较重要
div 用来布局
p里不能写h

语义化标签

块级元素和行内元素

块级里面几乎都可写，行内不能写块级

块级（独占一行）
- p，h，等
行内
- span
- input

不常用的标签

Alt text

图片标签

<img width="" src="" alt="">（单标签）

src:源地址
alt：不加载图片时替代的文本
width:宽度，默认单位px

总结：

相对/绝对路径

常见图片格式

jpg/jpeg
- 有损压缩
- 支持颜色丰富，占用小
- 不支持透明，动态图
- 用于对图片细节要求不高的，如网站产品宣传图
- 常见
png
- 无损压缩
- 支持颜色丰富，占用较大
- 支持透明，不支持动态图
- 使用：有透明要求，logo，重要用图
bmp
- 不支持透明，动态图
- 占用大
- 对细节要求极高的
gif
- 256种颜色，色彩不完整
- 简单透明背景
- 动态
webp
- 谷歌推出专门用于网页显示图片的格式
- 兼容性问题
- 集合上面的优点
base64
- 一串特殊文本
- 需要浏览器打开
- 使用：较小的图片，需要与网页一起加载的图片，不用发网络请求

超链接

<a herf="" target=""><\a>

属性
- herf：跳转的链接或文件或锚点
  - 锚点：<a name="point"></a>,跳转时<a herf="#point"></a>,也可以使用id,id通用
- download：导致浏览器将链接的 URL 视为下载资源。
  - 可以使用或不使用filename值作为文件名
- target(默认self)
  - _self:当前页面跳转
  - _blank:新建页面跳转
- 内可包括其他元素，不可包括自身a

列表

ol：有序列表
ul：无序列表
dl：自定义列表
- dt：表标题
- dd：内容

表格

Alt text

常用标签

br:换行
hr:分割线
pre:按原文样式

表单

<form>
  <input type="text">
  <button>搜索</button>
</form>

<input>:输入框
- 属性：
- type:
  - text:文本
  - password:密码
  - hiden:隐藏域
- name:根据后端需要
- value:所上传的值
- checked:选中的
- submmit:提交按钮
button:按钮
- 属性:
- type:
  - submmit:提交（默认值）
  - reset:重置
  - button:普通按钮
textarea:文本域
- name
- rows
- cols
<select></select>:
- 属性：
- name：要上传的值的名字
- <option></otion>
  - 属性：
  - value:若无，则提交option之间的值，否则提交value值
  - selected:默认选值
禁用表单控件属性: disabled
- input,textarea,button,select,option都可设置disabled属性
label:焦点关联
- for:对应id
- 或将整个用label包裹
fieldset:表单空间分组
legend:用于fieldset内做标题

<fieldset>
  <legent>标题</legend>
  ...
</fieldset>

iframe:网页嵌入

HTML字符实体

https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

 或 : 空格

全局属性

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes

Alt text

meta元信息

编码信息:<meta charset="UTF-8">
IE浏览器兼容性问题:<meta http-equiv="X-UA-Compatible" content="IE=edge">
移动端配置:<meta name="viewport" content="width=device-width, initial-scale=1.0">
关键字:<meta name="keywords" content="以英文逗号间隔的关键词">
网页相关信息:<meta name="description" content="80字以内的一段话，与网站内容相关">
针对搜索引擎爬虫:<meta name="robots" content="values">
- index:允许爬虫索引
- noindex:不允许爬虫索引
- follow:允许搜索爬虫跟随链接
- nofollow:不允许搜索爬虫跟随链接
网页作者:<meta name="author" content="D·d·kimser">
网页生成工具:<meta name="generator" content="Visual Studio Code">
网页自动刷新:<meta http-equiv="refresh" content="3;url=?"不写url则原页面刷新

posted @ 2024-02-26 12:04 ddkimser 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

overlink

HTML-Learning

Web Learning

HTML

标签

属性

HTML基本结构

注释

文档声明

字符编码

设置语言

排版

语义化标签

块级元素和行内元素

不常用的标签

图片标签

相对/绝对路径

常见图片格式

超链接

列表

表格

常用标签

表单

HTML字符实体

全局属性

meta元信息

公告