HTML学习笔记

时间  2020-06-03
标签 html 学习 笔记 栏目 HTML 繁體版
原文   原文链接

浏览器内核（Rendering Engine）

负责读取网页内容，整理讯息，计算页面显示方式并显示页面html

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
Firefox Gecko --
Safari WebKit --
Chrome Chromium/Blink Blink是WebKit的分支，Chromium项目中研发Blink渲染引擎（浏览器核心），内置于Chrome浏览器中，大部分国产浏览器最新版采用Blink内核，二次开发
Opera Blink --

Android，使用最高频率的是WebKit内核；ios，大部分自带浏览器内核，通常是Safari或者Tridentios

WEB 标准

构成

主要包括结构（structure）、表现（presentation）和行为（behavior）三个方面ajax

标准 说明
结构 结构用于对网页元素进行整理和分类
表现 表现用于设置网页元素的版式、颜色和大小等外观样式
行为 行为是指网页模型的定义以及交互的编写

HTML

HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）编程

HTML骨架标签

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>
标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，根标签
<head></head> 文档的头部 在head标签中必须设置的标签是title
<title></title> 文档的标题 让页面拥有一个属于本身的网页标题
<body></body> 文档的主体 元素包含文档的全部内容，页面内容基本都是放到body里面

HTML元素标签

一、常规元素（双标签）

<标签名> 内容 </标签名>

"<标签名>"表示该标签的做用开始，通常称为"开始标签","</标签名>"表示该标签的做用结束，通常称为"结束标签"浏览器

二、空元素（单标签）

<标签名 />

空元素用单标签来表示，不包含内容安全

HTML标签关系

一、嵌套关系

<head>
    <title> </title>
</head>

二、并列关系

<head></head>
<body></body>

文档类型

<!DOCTYPE html>

<!DOCTYPE>声明位于文档中最前面位置，处于<html>标签以前，告知浏览器文档使用哪一种HTML或XHTML规范服务器

页面语言lang

<html lang="en">

指定html语言类型
最多见两种语言：
一、en定义语言为英语
二、zh-CN定义语言为中文网络

字符集

<meta charset="utf-8">

多个字符的集合，计算机要准确处理各类字符集文字，须要进行字符编码，使计算机能识别和存储各类文字
经常使用字符集：
GB2312：简单中文，包括6763个汉字
BIG5：繁体中文，港澳台等使用
GBK：包含所有中文字符，是GB2312的扩展，加入繁体字的支持，兼容GB2312
UTF-8：基本包含全世界全部国家须要用到的字符编程语言

HTML标签的语义化

标签的含义，方便代码阅读和维护，让浏览器或网络爬虫能够很好解析，从而更好分析其中内容，具备更好的搜索引擎优化ide

HTML经常使用标签

排版标签

标题标签h
单词缩写：head 头部
提供了六个等级，做为标题使用，而且根据重要性递减
基本语法格式为：

<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>

段落标签
单词缩写：paragraph 段落
把HTML文档分割为若干段落，把文字有条理的显示出来

<p> 文本内容 </p>

默认状况下，文本在一个段落中会根据浏览器窗口大小自动换行
水平线标签
单词缩写：horizontal 横线
将段落与段落之间隔开，使文档结构清晰，井井有条，可经过插入图片实现，也能够简单经过变迁来完成

<hr />

换行标签
单词缩写：break 打断
强制某行文本换行显示

<br />

**div和span标签
div：division的缩写，表示分割、区分的意思
span：跨度、跨距；范围

<div> 这是头部 </div>
<span> 今日价格 </span>

两个都是盒子，用来装页面元素
div标签用来装布局，在一行只能放一个div
span标签用来布局，一行能够放多个span

文本格式化标签

标签 显示效果
QQ图片20200601185834.png 文本以粗体方式显示（XHTML推荐使用strong）
QQ图片20200601185919.png 文本以斜体方式显示（XHTML推荐使用em）
QQ图片20200601185957.png 文本以加删除线方式显示（XHTML推荐使用del）
<u></u>和<ins></ins> 文本以加下划线方式显示（XHTML不同意使用u）

标签属性

属性就是外在特性

<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>

图像标签

单词缩写：image 图像

<img src="图像URL" />

src属性用于指定图像文件的路径和文件名，是img标签的必要属性
<img />标记属性

属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML不支持%页面百分比） 设置图像的宽度
height 像素（XHTML不支持%页面百分比） 设置图像的高度
border 数字 设置图像边框的宽度

标签能够有多个属性，必须写在开始标签中，位于标签名后面，属性之间不分前后顺序，标签名与属性、属性与属性之间均以空格分开，采起键值对的格式 key="value"的格式

连接标签

单词缩写：anchor 锚

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性 做用
href 用于锁定连接目标的地址，（必须属性）当为标签应用href属性时，它就具备了超连接的功能
target 用于锁定连接页面的打开方式，其取值有self和blank两种，其中self为默认值，_blank为在新窗口中打开方式

外部连接须要添加http://
内部连接只截连接内部页面名称便可
若是当时没有肯定连接目标时，一般将连接标签的href属性值定义为"#"（即href="#"），表示该连接暂时为一个空连接
不只能够建立文本超连接，在页面各类网页元素等均可以添加超连接

注释标签

在HTML文档中添加一些便于阅读和理解但又不须要显示在页面中的注释文字

<!-- 注释语句 -->

快捷键是：ctrl + / 或者 ctrl + shift + /

路径

可分为相对路径和绝对路径

目录文件夹

存放了页面所需相关素材

根目录

目录文件夹的第一层

相对路径

以引用文件之网页所在位置为参考基础，创建出目标路径，保存于不一样目录的网页引用同一个文件时，所使用的路径不相同

路径分类 符号 说明
同一级路径 只需输入图像文件名称便可
下一级路径 "/" 图片文件位于HTML文件同级文件夹下
上一级路径 "../" 在文件名以前加入"../"，若是是上两级，则须要使用"../../"

绝对路径

以Web站点根目录为参考基础的目录路径，指的是当全部网页引用同一个文件时，所使用的路径是同样的，符号是""而不是"/"

锚点定位

经过建立锚点连接，快速定位到目标内容
一、使用相应id名标注跳转目标的位置（找目标）

<h3 id="two"> 第2集 </h3>

二、使用 连接文本 建立连接文本（被点击的）（拉关系）

<a href="#two">

base标签

<base target="_blabk">

base能够设置总体连接的打开状态，base写到<head></head>之间，把全部的连接都默认添加target="_blank"

预格式化文本pre标签

<pre>
    此例演示如何使用pre标签
    对空行和空格
    进行控制
</pre>

被包围在<pre>标签元素中的文本一般会保留空格和换行符，文本也会呈现为等宽字体，标签中的文字会按照书写的模式显示，不须要段落和换行标签，但比较少用，由于很差总体控制

特殊字符

特殊字符 描述 字符
空格符 QQ图片20200602095612.png
< 小于号 QQ图片20200602095641.png
> 大于号 QQ图片20200602095726.png
& 和号 QQ图片20200602095801.png
￥ 人民币 QQ截图20200602095832.png
© 版权 QQ图片20200602095917.png
® 注册商标 QQ图片20200602095959.png
° 摄氏度 QQ图片20200602100045.png
± 正负号 QQ图片20200602100124.png
× 乘号 QQ图片20200602100210.png
÷ 除号 QQ图片20200602100236.png
² 平方2（上标2） QQ图片20200602100316.png
³ 立方3（上标3） QQ图片20200602100424.png

表格table

常见显示、展现表格式数据，特别是后台展现数据的时候表格运用是否熟练显得很重要

建立表格

<table>
    <tr>
        <td> 单元格内的文字 </td>
        ...
    </tr>
    ...
</table>

table用于定义一个表格标签，tr标签用于定义表格中的行，必须嵌套在table标签中，td用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，字母td指的是表格数据，即数据单元格的内容
表格的主要目的的显示特殊数据

表格属性

属性名 含义 经常使用属性值
border 设置表格的边框（默认border="0"无边框） 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值（默认为2像素）
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值（默认为1的像素）
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right

表头单元格标签th

通常表头单元格位于表格的第一行或第一列，而且文本加粗居中，只需用表头标签<th></th>代替相应的<td></td>便可

表格标题caption

<table>
    <captain> 表格标题 </caption>
</table>

captain元素定义表格标题，一般这个标题会被居中且显示于表格之上，标签必须紧随table标签以后，只存在表格里才有意义

合并单元格

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
合并顺序：先上后下、先左后右
合并三部曲：
一、肯定跨行仍是跨列
二、根据合并顺序找到目标单元格，而后写上合并方式还有要合并的单元格数量
三、删除多余单元格

表格划分结构

题头、正文和脚注，分别用：thead、tbody和tfoot来标注

列表标签

容器里面装载着结构，样式一致的文字或图标的一种形式，叫列表，列表最大的特色就是整齐、整洁、有序，跟表格相似，可组合自由度更高

无序列表ul

各个列表项之间没有顺序级别之分，是并列的

<ul>
    <li> 列表项1 </li>
    <li> 列表项2 </li>
    <li> 列表项3 </li>
    ......
</ul>

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其余标签或文字的作法是不被容许的，<li>与</li>之间至关于一个容器，能够容纳全部元素，无序列表会带有本身样式属性

有序列表ol

有排列顺序的列表，各个列表项按照必定的顺序排列定义

<ol>
    <li> 列表项1 </li>
    <li> 列表项2 </li>
    <li> 列表项3 </li>
    ......
</ol>

全部特性基本与ul一致，但实际中比无序列表用的少不少

自定义列表

经常使用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl>
    <dt> 名词1 </dt>
    <dd> 名词1解释1 </dd>
    <dd> 名词1解释2 </dd>
    ...
    <dt> 名词2 </dt>
    <dd> 名词2解释1 </dd>
    <dd> 名词2解释2 </dd>
    ...
</dl>

表单标签

目的为了收集用户信息
一般由表单控件（也称为表单元素）、提示信息和表单域3个部分构成
表单域：至关于一个容器，用来容纳全部的表单控件和提示信息，能够经过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法，若是不定义表单域，表单中的数据没法传送到后台服务器

表单标签

input控件

<input type="属性值" value="你好" />

input是输入的意思
<input />标签为单标签
type属性设置不一样的属性值用来指定不一样的控件类型
除了type属性还有别的属性
经常使用属性：

属性 属性值 描述
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
type button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 由用户自定义 控件的名称
value 由用户自定义 input控件中的默认文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件容许输入的最多字符数

type属性经过改变值，决定属于哪一种input表单
value是input默认的初始值
后台可经过name属性找到表单，若是是一组，必须给他们命名相同的名字name，能够实现多个选其中一个
label标签
为了提升用户体验，为input元素定义标注（标签），用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会得到输入焦点
绑定元素方法：
一、用label只截包括input表单

<label> 用户名： <input type="radio" name="usename" value="请输入用户名" /> </label>

适用于单个表单选择
二、for属性规定label与哪一个表单元素绑定

<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex" />

textarea控件（文本域）

<textarea>
文本内容
</textarea>

经过textarea控件能够轻松建立多行文本输入框
文本框和文本域区别

表单 名称 区别 默认值显示 用于场景
input type="text" 文本框 只能显示一行文本 单标签，经过value显示默认值 用户名、昵称、密码等
textarea 文本域 能够显示多行文本 双标签，默认值写到标签中间 留言板

select下拉列表

<select>
    <option> 选项1 </option>
    <option> 选项2 </option>
    <option> 选项3 </option>
    ...
</select>

select中至少包含一对option
在option中定义selected="selected"时，当前项即为默认选中项

form表单域

form标签被用于定义表单域，实现用户信息的收集和传递，form中全部内容都会被提交给服务器

<form action="url地址" method="提交方式" name="表单名称">
各类表单控件
</form>

经常使用属性：

属性 属性值 做用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get或post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单

每一个表单都应该有本身的表单域，但ajax后台交互的时候，必须须要form表单域

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程