HTML基础


字符集和字符编码的关系 ：
字符集是书写系统字母与符号的集合，而字符编码则是将字符映射为一特定的字节或字节序列，是一种规则。通常特定的字符集采用特定的编码方式（即一种字符集对应一种字符编码（例如：ASCII、IOS-8859-1、GB2312、GBK，都是即表示了字符集又表示了对应的字符编码，但Unicode不是，它采用现代的模型，有UTF-8/UTF-16/UTF-32三种方式）），因此基本上可以将两者视为同义词。

HTML 简介

HTML 是超文本标记语言

  • XML 被设计用来传输和存储数据，其焦点是数据的内容。
  • HTML 被设计用来显示数据，其焦点是数据的外观。

HTML说明

  • 一些元素只有一个标签,如img、 input、br、hr、meta、link等

  • HTML元素标签不区分大小写

  • 元素可以嵌套在其他元素中间

HTMlL结构 

<!DOCTYPE html>
<html>  lang="zh-cn" 中文声明 -->  <head>

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

head中包含的元素

meta 空元素

  • <meta charset="utf-8">
  • <meta name="" content=""> 中间没有逗号  name属性还包含generator keywords descripition author等子属性
<meta name="viewport" content="width=device -width,initial- scale=1.0, maximum- scale=1.0, user - scalable=0">移动端
  • <meta http-equiv="" content="">
<meta http-equiv="refresh" content="30">  每30秒钟刷新当前页面
还包含content-type content-language expires set-cookie等子属性

title

<title> </title>

base 空元素

<base href="http://www.runoob.com/images/" target="_blank">
定义页面中所有链接默认的链接目标地址。没有的话默认为当前页面的地址。

link 空元素

<link rel="stylesheet" type="text/css" href="mystyle.css">
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:

style

  • 内嵌样式
  • 内部样式  后面记住有分号
<style type="text/css">
body {background-color: gray;}
div {color: green;}
</style>
  • 外部样式表
  • @import

script

<script type="text/javascript" src="">
相同点：
  • 脚本下载都是异步进行
  • 只适用于外联脚本
  • load事件之前执行
不同点：
defer: 页面解析完成后执行,在DOMContentLoaded和load事件之前执行。
async:下载完脚本立刻执行,会影响脚本的解析,在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序 。

HMTL基础

HTML 元素

<p></p>
<a href="">这是一个链接</a>
<br>想当于一个enter  空元素

HTML 属性

class/id/style/title
class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）

HTML 标题

<h1>-<h6>
<hr> 水平线  空元素
<!-- -->注释

HTML 段落

<p> </p> 块级元素
浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等）。

HTML 文本格式化

<strong></strong>
<em></em>
<sub></sub>

<sup></sup>

HTML 链接

  • <a href="url">链接文本</a>
"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
  • target="_blank" 在新窗口打开页面，target="_top"跳出框架？
使用 target 属性，你可以定义被链接的文档在何处显示。
  • <a id="tips">有用的提示部分</a> <a href="#tips">访问有用的提示部分</a>
id 属性可用于创建一个 HTML 文档书签
😉请始终将正斜杠添加到子文件夹，否则会向服务器发出两次http请求

css

  • 内联样式 <h2 style="background-color:red;">这是一个标题</h2>
  • 内部样式
  • 外部引用 <link rel="stylesheet" type="text/css" href="mystyle.css">
font-family（字体），color（颜色），和font-size（字体大小） text-align（文字对齐）
😉某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
😉记得加;

HTML 图像

<img src="url" alt="some_text">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
指定图像的高度和宽度是一个很好的习惯
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
表格的表头使用 <th> 标签进行定义
使用边框属性border来显示一个带有边框的表格
跨行/跨列  colspan/rowspan="2"  跨列，意味着合并一整行
cellpadding/cellspacing
&nbsp; 空格占位符

HTML 列表

  • 有序列表   type="A"/“I” 等可以控制选项编号形式
  • 无序列表   style="list-style-type:circle"等可以控制选项编号形式
  • 自定义列表 <dl>=<ol> <dt>=<lo> <dd>用于解释
/* dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
nl是navigation lists的英文缩写 （导航列表）
tr是table row的缩写 （表格中的一行）
th是table header cell的缩写 （表格中的表头）
td是table data cell的缩写 （表格中的一个单元格）*/

HTML 区块元素

<div>
<span>  没有固定的格式表现。它提供了一种将文本的一部分或者文档的一部分独立展示的方式，例如上色等

HTML 表单和输入

HTML 表单: <form action="" method="get"> </form>
必需的 action 属性规定当提交表单时，向何处发送表单数据。
输入元素: 
<form action="" method="GET">
    a: <input type="text" name="a"><br>
    b: <input type="password" name="b"><br>
    c: <br>
    <input type="radio" name="sex" value="male">male<br>
    <input type="radio" name="sex" value="female">female<br>
    d:<br>
    <input type="checkbox" name="choice" value="car">car<br>
    <input type="checkbox" name="choice" value="bike">bike<br>
    <input type="submit" value="发送">
    <input type="reset"  value="重置"> 重置整个form
    e:<br>
    <textarea rows="10" colums="20">文本输入框</textarea><br>
    f:<br>
    <select>
        <option value="1">选项A</option>
        <option value="2" selected>选项B</option> 预选中
    </select>
    <br>
    g:<br>
    <button type="button" onclick="">点击</button>
</form>
属性包括type name value checked selected
对于button、submit、text等来说，value就是展示出来的值，但是radio,option等展示的是后面跟的文字。

HTML 框架

<iframe src="" load="lazy"></iframe> 新增加一个框架
loading 属性支持 3 种属性值：
auto 浏览器默认的懒加载策略，和不增加这个属性的表现一样(备注1)
lazy 在资源距当前视窗到了特定距离内后再开始加载(备注2)
eager 立即加载，无论资源在页面中什么位置

HTML 颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）
RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

HTML 脚本

HTML 字符实体

&nbsp; 空格
&lt; 小于 &gt；大于
&amp;和号
&quot;引号
转义字符均以&开头，以;结束

HTML 统一资源定位器

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

filename - 定义文档/资源的名称

HTML5 简介

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 新元素

Canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
默认情况下 <canvas> 元素没有边框和内容。
  • 首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
  • 然后，创建 context 对象：
var ctx=c.getContext("2d");
  • 创建矩形、圆形、直线、三角形 
<script>
    var c=document.getElementById("myCanvas")
    var ctx=c.getContext("2d")
    ctx.fillStyle="red"
    ctx.fillRect(0,0,100,100)
    // 线段
    ctx.moveTo(100,100)
    ctx.lineTo(150,150)
    ctx.stroke()

    // 圆形
    ctx.beginPath()
    ctx.arc(150,150,50*Math.sqrt(2),0,2*Math.PI)
    ctx.stroke()
</script>

Canvas - 文本

// 实心字
ctx.font="30px Arial"
ctx.fillText("hello world",200,200)
// 空心字
ctx.font="30px Arial"
ctx.strokeText("hell world",300,300)

Canvas - 渐变

// 渐变
  • 线性
  • 径向
var grd = ctx.createLinearGradient(0,0,200,0)
grd.addColorStop(0,"red")
grd.addColorStop(1,"white")
ctx.fillStyle=grd
ctx.fillRect(100,0,100,100)
😉 idea 中刷新HTML页面：ctr + f9

Canvas - 图像

var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML5 内联 SVG

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 图像可通过文本编辑器来创建和修改
  • 在 SVG 中，每个被绘制的图形均被视为对象
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
// 用于定位
    <polygon points="100,10 40,180 190,60 10,60 160,180"
             style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

HTML5 MathML 

<math xmlns="http://www.w3.org/1998/Math/MathML">      
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
                               
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
                               
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>          
</math>

HTML5 拖放（Drag 和 Drop）？？？

HTML5 Geolocation（地理定位）???

HTML5 Video(视频)

 <video id="vid1" width="400" height="300">
        <source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4">
 </video>

两个方法：play() 和 pause()。

两个属性：paused 和 width。

HTML5 Audio(音频)

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制

HTML5 新的 Input 类型

图标选择类型：color/date/datetime-local/month/time/week
输入类型：datetime/email/search/tel/url
范围类型：number/range  （min="1" max="10"）

HTML5 表单元素

  • <datalist>---相当于改进版的select
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定. 
<input list="browsers" name="browser">  需要list属性绑定
<datalist id="browsers">
     <option value="Safari">   option没有结束的另一半
</datalist>
  • <keygen>
  • <output>

HTML5 表单属性

<form>新属性：

  • autocomplete:
 规定 form 或 input 域应该拥有自动完成功能。
autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
  • novalidate:
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<input>新属性：

autocomplete
  • autofocus: 让 input 输入域在页面载入时自动聚焦
  • form
form 属性规定输入域所属的一个或多个表单。
提示:如需引用一个以上的表单，请使用空格分隔的列表。
  • formaction
The formaction 属性用于描述表单提交的URL地址.
The formaction 属性会覆盖<form> 元素中的action属性.
formenctype
  • formmethod
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form> 元素的 method 属性。
formnovalidate
  • formtarget
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
 formtarget 属性覆盖 <form>元素的target属性.
  • height 与 width
  • list : datalist 
  • min 与 max
  • multiple
multiple 属性是一个 boolean 属性.
multiple 属性规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file: (注意图片也用file标签）
  • pattern (regexp)：pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。
  • placeholder
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
  • required
step

HTML5 语义元素

语义元素 = 有意义的元素

HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。  !!!
<figcaption> 标签定义 <figure> 元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

HTML5 Web 存储

客户端存储数据的两个对象为：
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
  • 创建一个 localStorage 键/值对: localStorage.sitename="菜鸟教程";
  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

HTML5 Web SQL 数据库

HTML5 应用程序缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：


  1. 离线浏览 - 用户可在应用离线时使用它们
  2. 速度 - 已缓存资源加载得更快
  3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。


如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
manifest 文件的建议的文件扩展名是：".appcache"。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。所以需要及时更新 manifest 文件。

HTML5 Web Workers

  • 创建 web worker 文件 ：postMessage() 方法 - 它用于向 HTML 页面传回一段消息
  • 创建 Web Worker 对象：w=new Worker("demo_workers.js");
  •  web worker 添加一个 "onmessage" 事件监听器：
  • 终止 Web Worker：w.terminate();
由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：
  • window 对象
  • document 对象
  • parent 对象

HTML5 服务器发送事件 ？？？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
说到 websocket 我觉得有必要说下跟 socket 的区别。

HTML布局之路

1.2 前期准备

  • 掌握PS的使用,实现快速切图
  • 打字速度越快越好，尤其是英文
  • 学会使用编辑器，掌握代码书写的规范

1.6 开发工程师和PS

选中多个图层：Ctrl键然后鼠标单击相应图层
放大/缩小: Ctrl+"+" / "-"
图像拖拽：空格键+拖拽
测量图层大小：按Ctrl+R组合键，调出标尺工具，在标尺上点击右键，修改单位为像素。在标尺上按下左键，向内容区拖动能拉出一条参考线。不需要参考线时可将其拖动到显示区外部，即                            可删除。  在拉好参考线之后，使用矩形选框工具贴着参考线创建一个选区，在信息面板中会显示这个区域的具体尺寸。
对齐图层：
修改画布/图像大小：
存储为web所用格式：JPG（有损压缩，不支持透明，色彩质量相对较好）PNG（无损压缩，支持半透明）
切片工具：1 将多张大小类似的图片从一张图像中同时切割 2 先使用切片工具选中整个图片（在左上角按住鼠标，拖拽到右下角）3 单击鼠标右键划分切片 4 存储格式
圆角大小测量：1 放大后肉眼观察
取消选区：Ctrl+D
自由变形：Ctrl+T
各类软件通用快捷键：Ctrl+N 新建、剪切、保存
Pxcook：1 可以看到标注的参数 2 可以在开发者模式下生成代码

5.4.2 根据标签默认 display 属性划分类别

块元素：独占一行，可以设置宽高外边距
页面框架基础结构块：html body iframe  title
布局结构块： div
标题段落结构块： hl h6 p
列表结构块： dt dd ul ol li 
结构装饰块： hr
表单结构块： form, fieldset legend
行元素：默认由内容撑开宽高，与其他行元 能够处于同一行；不能够设置宽高（换言之：设置宽高无效）；纵向外边距失效，横向外边距生效
行内包含框：span
超链接：a
图像；img
各类文本修饰类标签：abbr
表单对象包含框：select input button label textarea
可执行对象包含框：object

5. 5.1 标签嵌套基本规则

(1 ）块元素可以包含块元素和行元素。
(2 ）标题、段落类的块元素（包括 hl h6 dt ）不推荐包含块元素。
(3 ）行元素可以包含行元素，但不推荐包含块元素。
(4) ins del 这两种行元素可以包含块元素。
(5) di 下只能直接包含 dt dd 元素。
(6) ul ol 下只能直接包含 Ii

5.9.6 关于样式可控性的问题区

div .wrap ： div和wrap 之间有空格，因此表示后代选择器，选中的是元素下的类名为 wrap 的元素
div.wrap ：表示符合某种条件的某种选择器，此处选择器选中的是类名为wrap的div
<a> 标签对于内部链接，通常使用相对路径
(1)需跳转的地方添加代码：<a href="#idname"＞文字＜a／>
(2)需要在被转到位置添代码 < id="idname"＞ 需要注意的是，标签中的 ID值与之前<a>标签id必须相同
(3)标签书写要求遵循如下顺序:link→:visit--->:hover---:active
文档的加载是自上而下的，因此后加载的样式会覆盖掉之前加载的样式，如果顺序错误，那么会导致在某些状态下的显示样式被其他状态的显示样式所覆盖
(4)a标签设 href=＃，表示为标签设置一个链接，这种方法可以快速实现单击之后返回顶部的功能
(5)无论是将 href 属性设置为javascript: void (0) ，还是设置为“＃＃＃”，在单击链接时，既不能够跳转，也不会引起页面的刷新。
    但是###会值得地址栏URL包含###，可能对数据传送有影响。当href=""时，hover可能不起作用
在众多的光标样式（cursor）属性当中，“手”（ point ）和“可移动对象”（ move ）在日常开发当中使用较多；

6. 4. 4 img alt title 的区别

img 标签alt属性 当图不存在时或加载失败时的替代文字（进行显示）。当鼠标经过时 title 属性的值会显示。
img 标签 title 属性对图片的描述进一步说明。

6. 4. 5 href src 的区别

含义角度：
src属性仅嵌入当前资源到当前文档元素定义的位置
href 指定网络资源的位置，定义一个“链接或者关系”。
解析角度:
当浏览器找到 src标签之后，会读取src 的路径，进行下载和加载，在此之前，页面的处理会被暂停。
对于 href ，浏览器解读当前资源是一个样式表 ，页面并不会暂停.
9.2.7 伪元素的问题区
伪类的效果需要添加一个类才能实现，而伪元素的效果需要添加一个元素才能实现；
伪类用来处理样式，伪元素用来处理结构
13.2. 2 常见浏览器内核前缀





全部评论

相关推荐

07-23 14:01
门头沟学院 golang
韶音科技提前批挂
太难了，双9bg也被刷
投递韶音科技等公司10个岗位
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
07-21 13:41
点赞 评论 收藏
分享
05-30 00:12
江西服装学院 Java
大三即将迎来处女面
今天投了一上午简历，没想到就收到了一份面试（*/∇＼*）好紧张，我感觉第一次面试肯定会寄，因为我的人生向来都不是一帆风顺的😅八股还不扎实，算法也没刷多少题，就当攒一次面试经验吧⊹꙳&nbsp;˶˙ᵕ˙˶&nbsp;⊹꙳
头顶尖尖的程序员：我也是面了三四次才放平心态的。准备好自我介绍，不一定要背熟，可以记事本写下来读。全程控制语速，所有问题都先思考几秒，不要急着答，不要打断面试官说话。
点赞 评论 收藏
分享
06-09 23:07
已编辑
湖北工程学院新技术学院 运营
点赞 评论 收藏
分享
07-22 18:08
中山大学 机械结构工程师
点赞 评论 收藏
分享
评论
点赞
收藏
分享

全站热榜

更多

创作者周榜

更多
正在热议
更多
# 工作中哪个瞬间让你想离职 #
28513次浏览 200人参与
# 在职场上，你最讨厌什么样的同事 #
16357次浏览 166人参与
# 选了这个offer，你有没有后悔？ #
593129次浏览 4029人参与
# 机械人，秋招第一次笔试的企业是哪家？ #
41186次浏览 327人参与
# 小米硬件提前批进度交流 #
171165次浏览 1528人参与
# 机械求职避坑tips #
53512次浏览 381人参与
# 哪些公司校招卡第一学历 #
75352次浏览 309人参与
# 担心入职之后被发现很菜怎么办 #
139599次浏览 809人参与
# 入职以后才知道的校招谎言 #
89074次浏览 588人参与
# 职场常用语录大全 #
4183次浏览 31人参与
# Offer比较，你最看重什么？ #
192208次浏览 1310人参与
# 华子oc时间线 #
1245106次浏览 6487人参与
# 哪些公司开提前批了？ #
30171次浏览 277人参与
# 风评不好的公司，你会去吗？ #
66152次浏览 463人参与
# 两会劳动法放大招 #
76726次浏览 692人参与
# 应届生初入职场，求建议 #
230355次浏览 2651人参与
# 实习如何「偷」产出？ #
56652次浏览 1396人参与
# 不卡学历的大厂有哪些？ #
33142次浏览 253人参与
# 怎么防止在试用期被辞退 #
129223次浏览 927人参与
# 校招阶段，学历VS技术哪个更重要？ #
19764次浏览 209人参与
牛客网
牛客网在线编程
牛客网题解
牛客企业服务