2021-09-18 16:04 武汉大学前端工程师

关注

HTML入门笔记

HTML 简介

HTML 是超文本标记语言

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

HTML说明

一些元素只有一个标签,如img、 input、br等
HTML元素标签不区分大小写
元素可以嵌套在其他元素中间

HTMlL结构

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

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

head中包含的元素

meta 空元素

<meta charset="utf-8">
<meta name="" content=""> 中间没有逗号

<meta http-equiv="" content="">

title

base 空元素

定义页面中所有链接默认的链接目标地址。没有的话默认为当前页面的地址。

link 空元素

style

内嵌样式
内部样式后面记住有分号

body {background-color: gray;}
div {color: green;}

</style>

外部样式表

script

相同点：

脚本下载都是异步进行
只适用于外联脚本
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 标题

<hr> 水平线空元素

注释

HTML 段落

<p> </p> 块级元素

HTML 文本格式化

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 图像

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息

指定图像的高度和宽度是一个很好的习惯

<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" 跨列，意味着合并一整行

  空格占位符

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>

HTML 框架

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

HTML 颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

HTML 脚本

HTML 字符实体

  空格

< 小于 &gt；大于

&和号

"引号

HTML 统一资源定位器

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

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