HTML 基础2021年

1. 在 HTML 中，用于描述功能的符号称之为 "标记"，标记在书写时，必须用尖括号括起来(< >)

(1). 封闭类型标记

①. 封闭类型标记必须成对出现

②. 标记必须要完整，否则会有意想不到的效果

(2). 非封闭类型标记，又称为单标记或空标记

①. <br> 换行

②. <hr/> 水平线

2. 元素之间可以相互嵌套，形成更为复杂的页面结构

如<标记><标记 1></标记 1></标记>，须要注意：

(1). 嵌套顺序

(2). 必须完整嵌套

(3). 被嵌套的内容要通过缩进(Tab)表示层级关系

3. 属性和属性值是用来修饰元素的，须注意以下事项

(1). 属性的声明必须位于开始标记中

(2). 属性名称与标记名称之间用空格隔开，如<标记属性></标记>或<标记属性/>

(3). 属性值与属性间用 "=" 来连接，属性值要用 " "引起来，如<标记属性="值">

(4). 一个元素允许有多属性，多属性间排名不分先后，中间用空格隔开，如<标记　属1="值" 属性 2="值"》

4. 通用属性，大部分元素都会具备的属性

(1). id 定义元素在页面中独一无二的名称

(2). title 鼠标移入到元素上时所提示的信息

(3). class 指定元素所引用的类选择器(CSS 中使用)

(4). style 定义元素的内联样式(css 中使用)

5.  注释，要编写在源文档中，但不想被浏览器解释运行的内容

(1). 注释不能嵌套

(2). 注释不能出现在标记(<>)中，如<a ></a>这是错误的写法

6. <!doctype html> 文档类型声明，指定当前 html 文档用的是哪个版本,位于文档中的第一句话位置处

7. <html></html> 网页要表示的信息的开始与结束

(1). lang 地区语言

①. zh-cn 内地

②. en-uk 英文

③. zh-tw 台湾

④. zh-hk 香港

⑤. fr-fr法文

8. <head></head> 网页头部信息，用于定义网页的全局信息

9. <title> </title>网页标题

10. <meta charset="utf-8"> 网页元数据，注意，必须保证网页文档的编码格式也是 utf-8的

11. <body></body>网页主体信息，包含要显示给用户去看的所有内容

12. 文本转义符

(1) .   一个空格

(2) . > 大于符号>

(3) . < 小于符号<

(4) . © 版权符号©

(5) . ¥ 人民币符号￥

13. 文本标记（所有的内容会在一行内显示）

(1). <i>内容</i> 斜体显示文本

(2). <u>内容</u> 下划线的文本

(3). <s>内容</s> 删除线的文本

(4). <b>内容</b> 加粗显示文本

(5). <sub></sub> 下标

(6). <sup></sup> 上标

14. <hn></hn> 标题元素,以标题的方式显示文本(突出显示)，n 的取值为 1~6，h1 的文字最大，h6 的文字最小

(1). align 文本的水平排列方式

(2). 特点

①. 独自成行

②. 加粗显示文本

③. 上下会有垂直的空白

15. <p></p> 段落元素

(1). 水平对齐

(2). 特点

①. 垂直空白

②. 独占一行

16. <br> 或 <br/> 强制换行

17. <hr> 或 <hr/> 分割线元素

(1) .size 尺寸

(2). width 宽度，以 px 或%为单位

(3). align 水平对齐方式

(4). color 颜色 px 或%为单位(省略单位的话是 px)

18. <span></span> 行分区元素, 包裹文本并且设置不同的样式

19. <div></div> 块分区元素，用于布局

20. <pre></pre> 预格式化，保留标记内的格式(回车和空格)

21. 块级元素和行内元素

(1). 块级元素，每一个块级元素独占一行, 块级元素的主要作用布局

(2). 行内元素，多个元素会在一行内显示，显示不下自动换行，用于设置文本样式，如i、u、s、b、sup 、sub、span

22. URL:Uniform Resource Locator 即统一资源定位符/定位器，俗称路径，用来描述资源文件位置的信息，比如 a.html 中想使用 b.jpg ，a.html 就是当前文件，b.jpg 就是资源文件

23. URL 的三种表示方式：

(1). 绝对路径，从资源文件所在的最高级目录下开始的完整路径

①. 获取网络资源文件(只能是绝对路径)，如：https://www.baidu.com/img/bd_logo1.png，其路径由通信协议 http / https 、主机名(域名/IP 地址) www.baidu.com 、目录路径 img、文件名 bd_logo1.png 组成

②. 获取本机资源文件，从盘符位置处开始一直到资源文件名字位置，如D:/My/Images/page.jpg

(2). 相对路径，从当前文件位置处开始，去查找资源文件所经过的路径，就是相对路径、同目录直接用如a.jpg ，子目录先进入如img/index/a.jpg，父级目录先返回如../../a.jpg

(3). 根相对路径从Web站点所在的根目录处开始查找

24. <img> 或 <img/> 插入图像

图像格式有.jpg 、.gif 、.png三种格式

(1). src 全称：source 源，如<img src="Images/a.jpg">，注意URL严格区分大小写

(2).width 宽度

(3). height 高度

注意：如果 width 和 height 只设置其中一个属性的话，那么另外一个将等比缩放，尽可能的设置图像的宽和高，不改变大小的情况下，可以按实际情况去设置

25. <a></a> 链接 (超链接)，默认情况下，a 是不能被点击的

(1). href 链接的 URL 只有设置 href 属性后，才允许被点击

(2). target 目标，打开新网页的方式

①. _self 默认值，在自身标签页中，打开新网页

②. _blank 在新标签页中，打开新网页

(3). name 定义页面锚点

(4). 链接的表现形式

①. 资源下载链接地址为 **.zip 或**.rar

②. 电子邮件链接　

③. 返回页面顶部的空链接　

④. 链接到 Javascript　

26. 锚点(Anchor)，在 html 文档的某行位置处做一个记号，允许通过超链接跳转到该记号位置处

(1). 定义锚点(做记号)

①. 通过 a 标记的 name 属性，<a name="名称">内容</a>

②. 通过任意标记的 id 属性，<标记 id="名称"></标记>

(2). 链接到锚点(跳转到锚点处)

①. <a href="#文章底部"></a>

②. <a href="页面 URL#文章底部"></a>

27. <table></table> 表格是由一些称之为单元格的东西按照从左到右，从上到下的顺序排列而成的

(1). width 宽度以 px 或%为单位

(2). height 高度以 px 或%为单位

(3). align 控制表格在其父元素中水平排列方式

(4). border 边框宽度，默认为 0

(5). cellpadding 设置单元格内边距，单元格边框与内容之间的距离

(6). cellspacing 设置单元格外边距，单元格与单元格之间的距离

(7). bgcolor：背景颜色

28. <caption>标题文本</caption>表格的标题

(1). 一个表格最多只能有一个标题

(2). caption 必须位于 <table>下的第一句话

29. <tr></tr> 定义表行，<th>和<td>必须位于<tr>之中

30. <th></th>定义表格的第一行，单元格的内容会相对表格居中、加粗，td 允许被 th 替换

31. <td></td> 定义单元格

(1). align 水平对齐

(2). valign 垂直对齐

(3). width 宽度

(4). height 高度

(5). colspan 设置单元格的跨列

(6). rowspan 设置单元格的跨行

(7). bgcolor 设置单元格的背景

(8). 单元格的特点

①. 某一行单元格的高度，以最高的单元格高度为准

②. 某一列的单元格宽度，以最宽的单元格宽度为主

③. 尽量保证默认情况下，每行中的单元格数量是相同的

32. 表格的复杂应用

(1). 行分组

①. <thead></thead> 表头行分组，允许包含一行或多行 tr

②. <tbody></tbody> 表主体行分组，允许包含任意多的连续 tr

③. <tfoot></tfoot> 表尾行分组，允许包含一行或多行 tr

④. 如果不对 table 中的数据进行显示分组的话，默认都在 tbody 中

(2). 不规则表格，通过 td 的 colspan 和 rowspan 属性创建不规则的表格、

①. colspan 跨列合并，在一行中，从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除

②. rowspan 跨行合并，在同一列中，从指定单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除

(3). 表格的嵌套，允许在单元格中在放入另一个表格

33. <ol></ol> Order List 有序列表

(1). type

①. 1 数字(默认)

②. a 小写字母

③. A 大写字母

④. i 小写罗马字符

⑤. I 大写罗马字符

(2). start 起始编号是多少，取值为具体数字

34. <ul></ul> Unorder List 无序列表

(1). type

①. disc 默认值，实线圆点

②. circle 空心圆

③. square 实现方块

④. none 不显示标识

35. <li></li> List Item 列表项，显示在列表中的内容，允许在一个列表中出现另一个列表，被嵌套的列表必须放在 <li>中

36. <dl></dl> 表示定义列表

<dt></dt> 定义列表中的标题(事物，名词)

<dd></dd> 对标题(事物，名词)解释说明的内容

往往用于给出一类事物的定义情形，如：名词解释，多用于图文混排时使用

37. 常用结构标记，为了取代做布局的 div，从而体现出布局标记的语义性

(1). <header> </header> 用来表示页面或某部分内容的顶部信息，允许出现多次

(2). <nav></nav> 用来表示页面的主导航信息

(3). <section></section> 表示页面中的小节，也可以用来表示页面的主体内容

(4). <article></article> 用来定义独立于文档的其它部分内容，页面中的文章信息，或是文字居多的部分，比如：博客信息，微博中的条目，论坛中的主贴和回帖

(5). <footer></footer> 表示页面中底部或某区域的信息，一般用户关注度较低

(6). <aside></aside> 表示页面中的边栏信息

38. <form></form> 表单，用于显示、收集用户信息，并提交给服务器，完整的表单由两部分组成：

(1). 实现表单以及可交互的界面元素(前端)

①. 表单元素，用于定义表单的提交信息如：提交地址，提交方式… …

②. 表单控件，能够与用户交互的界面元素如：文本框，密码框…

(2). 表单提交后的处理(服务器端)

(3). 表单属性

①. action 指定提交给服务器处理程序的地址，如*jsp、*php、*do 等 ,该地址要与服务器端人员商量，如果省略不写，默认提交给本页

②. method 指定提交数据的方法(模式)

A. get (默认值) 获取

a. 以明文的方式提交数据到服务器(数据会显示在地址栏上),安全性较低

b. 最大提交 2kb 数据

c. 向服务要数据时用 get 方式

B. post 邮寄

a. 以隐式的方式提交数据到服务器(不会显示)，安全性较高，身份证号，密码，安全性要求高的数据，必须用 post

b. 无提交数据大小限制

c. 让服务器处理数据时使用 post

C. put

D. delete

③. enctype 指定表单数据的编码方式(什么样的数据允许被提交)

A. application/x-www-form-urlencoded 默认值可以将所有的数据提交给服务器(文件除外)

B. multipart/form-data 允许将文件(图像，音频，视频，文档等)提交给服务器

C. text/plain 允许将普通字符提交给服务器，特殊字符无法提交(=,&,?)

④. name 定义表单的名称

⑤. id 定义表达独一无二的标

(4). 注意事项

①. 只有出现在 form 中的表单控件的数据才会被提交

②. form 在页面中没有显示效果，只有功能

39. <input> 或 <input/> 表单控件，与用户进行交互的元素

(1). type 根据不同的type值，创建不同的输入控件， type省略不写或写错了，那么默认都是文本框(text)

①. type="text" 文本框　 type="password" 密码框

A. maxlength 限制输入的字符数

B. readonly 只读(只能看，不能改，但允许被提交)，无值属性

C. name 定义名称, 担供给服务器使用, 缩写:txt 、用户名:txtUsername 、用户密码:txtPassword

D. value 提交给服务器的值，可以是用户输入的数据

E. placeholder 占位符，一般给予用户提示

②. type="radio" 单选按钮type="checkbox" 复选框

A. name 定义控件的名称，一组单选或复选框名称必须相同

B. value 控件的值

C. checked 预选中

D. 为控件分组， radio 缩写 rdo、checkbox 缩写 chk

③. type="submit" 提交按钮 type="reset" 重置按钮 type="button" 普通按钮 type="image" 图片按钮(提交功能)

A. name 缩写 btn

B. value 按钮上的文字

C. src 图片按钮的图片来源地址

④. type="hidden" 隐藏域，想提交给服务器，但不想被用户看见的数据放在隐藏域中type="file" 文件选择框，用文件选择框时 form 的 method 属性必须为 post，form 的enctype 属性必须为 multipart/form-data

A. name 文件名

B. value 控件的值(隐藏域无)

⑤. HTML5 新增标记

电子邮件类型

搜索类型

URL 类型，数据必须符合 URL 规范

电话号码类型，移动终端弹出数字键盘

数字类型

范围类型，允许选择指定范围内的一个值

颜色类型，颜色拾取控件

日期类型，允许用户选择日期

周类型，与 date 类似，但只能选择周

月份类型，与 date 类型，但只能选择一个月份

A. required 非空限制如 <input type="month" required>

B. 数字类型、number 属性

a. min 控件接受的最小值

b. max 控件接受的最大值

c. step 控制控件递增的步长，默认为 1

C. 范围类型 range 属性

a. min ：指定范围的最小值(下限值)

b. max ：指定范围的最大值(上限值)

c. step：值变化的步长

d. value：设置初始值

(2). name 定义控件的名称，提供给服务器端使用，如果没有，则无法提交，采用匈牙利命名法控件缩写+功能

(3). value 定义控件的值，提供给服务器端使用

(4). disabled 禁用控件(无法操作，无法提交)，该属性无值

40. <textarea></textarea> 多行文本域，允许录入多行数据

(1). name 缩写：txt

(2). cols 指定文本区域的列数

(3). rows 指定文本区域的行数

(4). readonly 只读

41. <select><option></option> </select> 下拉选择

(1). <select>属性

①. name 缩写 sel

②. size 默认显示选项的数量，如果大于 1 的话，则为滚动列表

③. multiple 设置多选，也会变成滚动列表，配合 Ctrl 或 Shift 实现多选

(2). <option>属性

①. value 值

②. Selected 默认预选中，无值

42. <label> </lable> 关联文本与表单控件，关联后，点击文本如同点击表单控件

(1). for 表示与该元素关联的控件的 id 值

43. <fieldset></fieldset> : 为控件分组，通常会加上边框

<legend></legend> : 为分组加上标题，通常位于边框中间

44.<iframe>文字</iframe> 浮动框架，可以在一个浏览器窗口中同时显示多个页面文档的内容（在一个页面中引入另外一个页面)，内容可以为普通的文体描述，当浏览器不支持<iframe>元素时，将显示该文本描述信息

(1). src 浮动框架中要引入的页面 URL

(2). width 宽度

(3). height 高度

(4). frameborder 浮动框架边框，如果不想要边框的话，可以设置为 0

HTML 基础2021年相关推荐

福师2021计算机应用基础,2021福师《计算机应用基础》在线作业二【满分答案】...
2021福师<计算机应用基础>在线作业二[满分答案]奥鹏作业满分答案福师<计算机应用基础>在线作业二-0001 试卷总分:100 得分:100 一.单选题 (共 40 道试 ...
计算机应用基础2021自考本科,2021自考本科都考什么
摘要: 2021自考本科都考什么为你介绍自考本科科目设置一般在十一到十六门之间,根据报考学校专业的不同课程数目有所不同. 自考本科考哪几门一.公共课考3~5门左右 1.一般在3~5门左右,其中< ...
2021年自考计算机应用基础,2021年自考计算机应用基础.docx
TIME \@ "yyyy'年'M'月'd'日'" 2020年5月14日 2021年自考计算机应用基础自考<计算机应用基础>模拟题和答案单项选择题下列各题A).B ...
Java学习日报—SQL基础—2021/11/29
今天效率很低,就看了以下内容... 目录 1.1关键词DISTINCT 1.2 连表查询 1.2.1 内连接 1.2.2 外连接 1.3 查询执行顺序 1.1关键词DISTINCT DISTINCT ...
太原理工大学计算机文化基础,2021全国高分子材料与工程专业大学排名(5篇)
2018全国高分子材料与工程专业大学排名(5篇) 高考填报志愿选择专业的话,考生需要了解你选择的专业在全国排名怎么样以及选择学校开设的专业在全国排名怎么样?高考升学网小编带你一起了解关于高分子材料与工 ...
北语20春计算机应用基础,2021年北语20春计算机应用基础作业1参考答案.docx
文档介绍: 北语20春计算机应用基础作业1参考答案 20春计算机应用基础作业1 试卷总分100 得分100 一.单选题共 20 道试题,共 100 分 1.在Wordxx状态下,绘制一文本框,应使用 ...
项目管理基础2021复习笔记
计划评审技术计划评审技术是20世纪50年代末美国海军部开发北极星潜艇系统时为协调3 000多个承包商和研究机构而开发的,其理论基础是假设项日持续时间以及整个项目完成时间是随机的,且服从某种概率分布. ...
国开专科计算机应用基础,2021年国开专科《计算机应用基础》形考任务题库大全.docx...
一个完整的计算机系统应当包括( ). 选择一项: A. 系统硬件与系统软件 B. 硬件系统与软件系统 C. 主机.键盘与显示器 D. 计算机与外设试题 2 正确得分 1.00/1.00 分未标记 ...
奥鹏计算机基础2021,18春北语《计算机基础》作业3（参考答案）
A: 1 B: 5 C: 3 D: 多于3个 (单选题) 2: 用户可以多次向其中写入信息的光盘是( ). A: CD-ROM B: CD-R C: CD-RW D: DVD-ROM (单选题) 3: ...
LeetCode数据结构基础---2021/8/18
目录字母异位词分组字符串相乘重复的DNA序列最长回文子串字母异位词分组分析: 字母异位词排序后相等,因此可以用排序+哈希表处理. 代码: class Solution {public: ...

HTML 基础2021年

HTML 基础2021年相关推荐

最新文章

热门文章