HTML基础复习

最新推荐文章于 2021-06-28 03:58:36 发布

Tyrics

最新推荐文章于 2021-06-28 03:58:36 发布

阅读量639

点赞数 1

文章标签： HTML

本文链接：https://blog.csdn.net/qq_42760049/article/details/87936759

版权

WEB标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类。（HTML）

表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式。（CSS）

行为标准：行为是指网页模型的定义及交互的编写。（JS）

HTML基础

HTML（Hyper Text Markup Language）中文译为“超文本标记语言”。超文本是指它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

HTML 不是一种编程语言，而是一种标记语言 (markup language)。

HTML骨架格式

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>
1.<html>标签：根标签，作用所有HTML中标签的一个根节点

2.<head>标签：文档头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

3.<title>标签：文档标题

4.<body>标签：文档的主体

ps:HTML标签不区分大小写

文档类型<!DOCTYPE>

位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

<!DOCTYPE html>
html5文档类型声明

HTML标签

标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。

HTML标签有双标签和单标签两种。

1.双标签

<标签名> 内容 </标签名>
如<h1><h1>，<p></p>，<div></div>等

2.单标签

<标签名 />
如<br />，<hr />等

ps：在H5标准中单标签可以不加关闭符"/"。如<br>即可。

标签关系

1.嵌套关系

<head><title></title></head>
<head>和<title>就是嵌套关系

2.并列关系

<h3></h3>
<p></p>
<h3>和<p>就是并列关系

标签属性

<标签名 属性1="属性值1" 属性值2="属性值2" ... ></标签名>
任何标签的属性都有默认值，省略该属性则取默认值

HTML注释

注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

HTML常用标签

1.标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标题标签语义：作为标题使用，并且依据重要性递减

ps：<h1>标签因为重要，尽量少用。一般<h1>标签都是给logo使用，或者页面中最重要标题信息。

PS：HTML标签的语义化优点：

1.方便代码的阅读和维护

2.同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

3.使用语义化标签会具有更好地搜索引擎优化

2.段落

<p>这是一个段落</p>
英文单词： paragraph

3.链接

<a href="url" target="_blank">这是一个链接</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值，_blank 为在新窗口中打开方式。

ps：

如果当时没有确定链接目标时，通常将链接标签的 href 属性值定义为“#”(即 href="#" )，表示该链接暂时为一个空链接

不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

锚点定位：通过创建锚点链接，能够快速定位到目标内容。

<a href="#tp">链接</a>
...
...
...
<p id="tp">目的地</p>
点击链接可以跳转到对应 id 的位置

<base /> 标签可以设置整体链接的打开方式

<base target="_blank" />
ps：<base /> 标签要嵌套在<head></head>中

4.图像

<img src="url" />
<img>标签是一个单标签，在src属性中指定图像的地址

<img>标签属性

属性属性值描述
src 路径（url）图像的路径
alt 文本图像不能显示时的弹出
title 文本鼠标悬停时弹出
width 像素（px）、百分比（%）宽度
height 像素（px）、百分比（%）高度
border 数字边框宽度

ps：XHTML不支持 width 和 height 设置百分比

属性	属性值	描述
src	路径（url）	图像的路径
alt	文本	图像不能显示时的弹出
title	文本	鼠标悬停时弹出
width	像素（px）、百分比（%）	宽度
height	像素（px）、百分比（%）	高度
border	数字	边框宽度

5.水平线

<hr />
单标签

6.换行

<br />
单标签

7.文本格式化标签

标签显示效果
<b></b>或<strong></strong> 粗体（XHTML推荐使用 strong ）
<i></i>或<em></em 斜体（XHTML推荐使用 em）
<s></s>或<del></del> 加删除线（XHTML推荐使用 del）
<u></u>或<ins></ins> 加下划线（XHTML推荐使用 ins）

8.表格

定义表格：

<table>
  <caption>标题</caption>
  <th>
    <td>表头<td>
    ...
  </th>
  <tr>
    <td>单元格</td>
    ...
  </tr>
  ...
</table>
1.<table></table>用来定义一个表格

2.<tr></tr>用来定义表格的一行

3.<td></td>用来定义一行中的一个单元格

4.<th></th>用来定义表格的表头，一般是表格的第一行

5.<caption></caption>用来定义表格的标题

合并单元格

<tr>
   <td colspan="2">跨列</td>
   <td>单元格</td>
</tr>
<tr>
   <td rowspan="2">跨行</td>
   <td>单元格</td>
   <td>单元格</td>
</tr>
<tr>
   <td>单元格</td>
   <td>单元格</td>
</tr>

跨行合并：rowspan

跨列合并：colspan

9.表单

<form action="" method="post">
        <label for="name">用户名</label>
        <input type="text" name="name" id="name" />
        <br />
        <label for="self">自我介绍</label>
        <br />
        <textarea name="self" id="self" cols="30" rows="10"></textarea>
        <br />
        <select name="" id="">
            <option value="">选项1</option>
            <option value="">选项1</option>
        </select>
</form>
1.<form></form>定义表单域

form属性：

action：表单数据提交地址

method：提交方式，有 get 和 post 两种

2.<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示

属性属性值描述
type text 文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像提交按钮
file 文件域
name 自定义控件名
value 自定义默认值
size 正整数显示宽度
checked checked 默认选中
maxlength 正整数可输入字符数

3.<label></label>标签为 input 元素定义标注（标签）。用 for 属性用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

4.<textarea></textarea>：文本框，用于输入大量的信息

5.<select></select>: 下拉菜单，里面至少嵌套一对<option></option>标签

属性	属性值	描述
type	text	文本输入框
password	密码输入框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像提交按钮
file	文件域
name	自定义	控件名
value	自定义	默认值
size	正整数	显示宽度
checked	checked	默认选中
maxlength	正整数	可输入字符数

10.列表

无序列表 <ul></ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

有序列表 <ol></ol>

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

其他重要补充

路径

相对路径：

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

绝对路径：

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

绝对路径以Web站点根目录为参考基础的目录路径或完整的网络地址。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

HTML常见特殊字符的代码表示

特殊字符对应代码
空格  
小于(<) <
大于(>) >
& &
￥ ¥
乘号 ×
除号 &divide；
摄氏度 °

行内元素和块级元素

块级元素（block-level）：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，宽度默认是容器的100%，一般可以容纳内联元素和其他块元素，常用于网页布局和网页结构的搭建。如：<div>

行内元素（inline-level）：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。如：<span>

行内块元素（inline-block）：在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，称它们为行内块元素。

常用字符集

utf-8是目前最常用的字符集编码方式，包含全世界所有国家需要用到的字符

gb2312 简体中文包括6763个汉字

big5 繁体中文

gbk包含全部中文字符是gb2312的扩展，加入对繁体字的支持，兼容GB2312

浏览器内核

浏览器内核又可以分成两部分：渲染引擎( layout engineer 或者 Rendering Engine )和 JS 引擎。

渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后输出至显示器或打印机。

JS引擎则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

开始渲染引擎和 JS 引擎并没有明确的区分，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见浏览器内核

（1）Trident(IE)

采用该内核的浏览器有： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。

（2）Gecko(firefox)

Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。缺点是打开速度慢、升级频繁。

（3） webkit(Safari)

采用该内核的浏览器有：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

（4） Chromium/Blink(chrome)

Blink 其实是 WebKit 的分支（WebKit的二次开发）。大部分国产浏览器最新版都采用Blink内核。

（5） Presto(Opera)

最新的 opera 浏览器早已将之抛弃

PS：

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

Tyrics

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

标签	显示效果
<b></b>或<strong></strong>	粗体（XHTML推荐使用 strong ）
<i></i>或<em></em	斜体（XHTML推荐使用 em）
<s></s>或<del></del>	加删除线（XHTML推荐使用 del）
<u></u>或<ins></ins>	加下划线（XHTML推荐使用 ins）

特殊字符	对应代码
空格
小于(<)	<
大于(>)	>
&	&
￥	¥
乘号	×
除号	&divide；
摄氏度	°