前端复习大纲-HTML01

最新推荐文章于 2021-12-01 19:48:21 发布

莩甲柚

最新推荐文章于 2021-12-01 19:48:21 发布

阅读量163

点赞数

分类专栏：前端学习文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_36303923/article/details/121129299

版权

前端学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Web标准

Web标准：制作网页要遵循的规范, W3C组织和其他标准化组织制定的一系列标准的集合。
网页的形成：前端开发人员利用HTML标签开发代码→浏览器显示代码（解析、渲染）→生成最后的web页面
分为三层:

结构标准（HTML）：用于对网页元素进行整理和分类。
表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
行为标准（JS）：用于定义网页的交互和行为。

浏览器

组成:

渲染引擎(浏览器内核): 决定了浏览器如何显示网页的内容以及页面的格式信息, 是浏览器兼容性问题出现的根本原因。
JS引擎: 用来解析网页中的JavaScript代码，对其处理后再运行, 浏览器本身并不会执行JS代码。

HTML

HTML 全称为 HyperText Markup Language，译为超文本标记语言
是一种描述性的标记语言。
在这里插入图片描述

<!DOCTYPE html>   # 文档声明头
<html lang="en">  # 页面语言 lang
<head> # 头标签 head
    <meta charset="UTF-8"> # 字符集 charset
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> # 视口 viewport
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> # 字符集 charset
	<meta name="Author" content=""> 
	# 定义“关键词”,提高搜索命中率
    <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
    # 定义“页面描述”
    <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
    # 3秒之后自动跳转到百度页面
    <meta http-equiv="refresh" content="3;http://www.baidu.com">
    <title>Document</title> # 设置网页标题
</head>
<body>

</body>
</html>

计算机编码

用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）

UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

HTML5

HTML5是新一代开发 Web 富客户端应用程序整体解决方案。包括：HTML5，CSS3，Javascript API在内的一套技术组合。

HTML5新增的语义化标签:

<section> 表示区块
<article>表示文章。如文章、评论、帖子、博客
<header> 表示页眉
<footer> 表示页脚
<nav>表示导航
<aside> 表示侧边栏。如文章的侧栏
<figure> 表示媒介内容分组。
<mark>表示标记 (用得少)
<progress>表示进度 (用得少)
<time>表示日期

新语义标签的兼容性处理, IE8 及以下版本的浏览器不支持 H5 和 CSS3

检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题, 引入html5shiv.js文件
将HTML5的新标签全部通过document.createElement('tagName')来创建一遍

H5中新增的表单类型:

email 只能输入email格式。自动带有验证功能。
tel 手机号码。
url 只能输入url格式。
number 只能输入数字。
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期

HTML排版标签

<h1> - <h6> 标题标签

 注释标签

<p> 段落标签

<hr /> 水平线标签, 分隔文档

<br /> 换行标签,强制换行

<div> 独占一行

<span> 不换行

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。
span里面不能放p、h、ul、dl、ol、div。

<center> 内容居中标签, 但推荐使用css实现

<pre> 预定义（预格式化）标签

HTML标签是分等级的，HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习p的第一天开始，就要牢牢记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

HTML字体标签

特殊字符(转义字符):
在这里插入图片描述
<font> 字体标签-弃用
<b> 粗体标签-弃用

<u> 或 <ins>：下划线标记
<s> 或 <del>：中划线标记（删除线）
<i> 或 <em> ：斜体标记

<sup> 上标
<sub> 下标

HTML超链接

属性
- href：目标URL
- title：悬停文本
- name：主要用于设置一个锚点的名称
- target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
  - _self：在同一个网页中显示（默认值）
  - _blank：在新的窗口中打开
  - _parent：在父窗口中显示
  - _top：在顶级窗口中显示
外部链接：链接到外部文件

<a href="http://www.baidu.com" target="_blank">点我点我</a>

内部链接：网站内部页面间的相互链接

<a href="02页面.html">点击进入另外一个文件</a>

空链接

<a href="#">空链接</a>

锚链接：给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。
- 创建锚点: 使用name属性或者id属性给那个特定的位置起个名字
- 在链接文本的href 属性中, 设置属性值为 #名字形式, 表示跳到名为xx的特定位置

<body>
    <a name="name1">顶部</a>

    <pre>












    </pre>

    <a href="#name1">回到顶部</a>
</body>

HTML图片标签

<img src="图片的URL" />

插入的图片类型

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
不能往网页中插入的图片格式是：psd、ai等。

src属性：指图片的路径。英文名称 source

相对路径: 从自己出发，找到别人
绝对路径: 就是http://或者https://开头的路径

width、height 属性 : 如果要想保证图片等比例缩放，请只设置width和height中其中一个

alt 属性 : 当图片不可用（无法显示）的时候，代替图片显示的内容

title属性 : 提示性文本。鼠标悬停时出现的文本,不应该设置成要给用户看的重要信息

align 属性 : 图片和周围文字的相对位置, 属性取值可以是：bottom（默认）、center、top、left、right

属性之前没有先后顺序，使用空格分隔，采用键值对的格式

莩甲柚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端复习大纲-HTML01

目录Web标准浏览器HTML计算机编码HTML5HTML排版标签HTML字体标签HTML超链接HTML图片标签Web标准Web标准：制作网页要遵循的规范, W3C组织和其他标准化组织制定的一系列标准的集合。网页的形成：前端开发人员利用HTML标签开发代码→浏览器显示代码（解析、渲染）→生成最后的web页面分为三层:结构标准（HTML）：用于对网页元素进行整理和分类。表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。行为标准（JS）：用于定义网页的交互和行为。浏览器组成:
复制链接

扫一扫