前端知识总结之HTML

最新推荐文章于 2024-07-12 01:09:29 发布

左手画圆，右手画方183

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量345

点赞数 2

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_59487699/article/details/122245955

版权

前端知识总结之HTML、CSS

必备基础
- HTML、WEB、W3C
HTML

必备基础

HTML、WEB、W3C

HTML（网页）
Web领域的一些基本概念

WEB
Web（World Wide Web）叫全球广域网，俗称万维网（www）。

W3C
W3C（World Wide Web Consortium）叫万维网联盟，是国际最著名的标准化组织，制定了web标准。WEB标准一个网页包含了html元素 Css JavaScript，Html元素决定了网页结构，Css进行了修饰美化，JavaScript控制了交互行为和动态效果。web标准包含了下面三个方面：结构标准（HTML）：用于对网页元素进行整理和分类。表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。行为标准（JavaScript）：用于定义网页的交互和行为。

HTML

页面基本结构

关于viewport

常见元素

HTML定义Html不是一种编程语言，而是描述性的标记语言，主要作用是定义内容的结构。
2014年10月万维网联盟（W3C）完成了HTML5标准制定，是目前最新的HTM版本。HTML5的出世，标志着web进入一个富客户端（具有很强的交互性和体验的客户端程序）时代，像APP网页，小程序都是HTML5的应用场景。
Html5新特性：
(1)用于绘画的 canvas 元素。
(2)用于媒介回放的 video 和 audio 元素。
(3)对本地离线存储的更好的支持。
(4)新的特殊内容元素，比如 article、footer、header、nav、section。
(5)新的表单控件，比如 calendar、date、time、email、url、search。

页面基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="关键词" />
    <meta name="Description" content="页面描述" />
    <title>页面标题</title>
</head>
<body>

</body>
</html>

关于viewport
viewport用户网页的可视区域，一个针对移动网页优化的页面 viewport meta 标签如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放。

head区域元素：
meta title style link script base。body
区域元素：div、section、article、aside、header、footerpspan、em、strongtable、thead、tbody、tr、tdul、ol、dl、dt、ddaform、input、select、textarea、button

元素分类块级元素：
每个元素都是独占一行
address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是css
layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1-h6 – 标题
hr – 水平分隔线
isindex – input promptmenu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容）
noscript – ）可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行内元素：元素在同一行水平排列
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体
big – 大字体
br – 换行
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
label – 表格标签
s – 中划线(不推荐)
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线
var – 定义变量
inline-block：元素可以排列在同一行显示，并且可以设置一些块元素属性
通过Css：display:inline-block 改变元素。

元素默认样式
很多元素都自带了默认样式，不同浏览器下默认样式表现不一致，为了统一或者满足一些需求我们需求将所有默认样式清空，这种处理方式又称为 Css Reset，比如：
*{
margin: 0;
padding: 0;
}
另外一种方案使用normalize.css，它将不同浏览器下的默认样式进行了统一。