网站建设费做什么,注册域名的注意事项,安徽淮南,网站建设一般多少钱方案全套学习 HTMLCSSJavaScript 代码和笔记请下载网盘的资料#xff1a;
链接: https://pan.baidu.com/s/1-vY2anBdrsBSwDZfALZ6FQ 提取码: 6666 HTML 全称#xff1a;HyperText Markup Language#xff08;超文本标记语言#xff09;
1、 HTML 标签
1. 标签又称元素#…全套学习 HTMLCSSJavaScript 代码和笔记请下载网盘的资料
链接: https://pan.baidu.com/s/1-vY2anBdrsBSwDZfALZ6FQ 提取码: 6666 HTML 全称HyperText Markup Language超文本标记语言
1、 HTML 标签
1. 标签又称元素是HTML的基本组成单位。 2. 标签分为双标签与单标签 绝大多数都是双标签。 3. 标签名不区分大小写但推荐小写因为小写更规范。 2、HTML 标签属性
1. 用于给标签提供附加信息。 2. 可以写在起始标签 或 单标签中形式如下 3. 有些特殊的属性没有属性名只有属性值例如input disabled 4. 注意点 1. 不同的标签有不同的属性也有一些通用属性在任何标签内都能写后面会详细总结。 2. 属性名、属性值不能乱写都是W3C规定好的。 3. 属性名、属性值都不区分大小写但推荐小写。 4. 双引号也可以写成单引号甚至不写都行但还是推荐写双引号。 5. 标签中不要出现同名属性否则 后写的会失效例如 input type text type password 3、HTML 基本结构 1. 在网页中如何查看某段结构的具体代码 —— 点击鼠标右键选择 “ 检查 ” 。 2. 【检查】 和 【查看网页源代码】的区别 【查看网页源代码】看到的是程序员编写的源代码。 【检查】看到的是经过浏览器 “ 处理 ” 后的源代码。 备注日常开发中【检查】用的最多。 3. 网页的 基本结构 如下 1. 想要呈现在网页中的内容写在 body 标签中。 2. head 标签中的内容不会出现在网页中。 3. head 标签中的 title 标签可以指定网页的标题。 htmlheadtitle网页标题/title/headbody....../body
/html
4、HTML 注释 1. 特点注释的内容会被浏览器所忽略不会呈现到页面中但源代码中依然可见。 2. 作用对代码进行解释和说明。 3. 写法 !-- 注释内容 -- 4. 注释不可以嵌套以下这么写是错的反例。 !-- 我是一段注释 !-- 我是一段注释 -- -- 5、HTML 文档声明 1. 作用告诉浏览器当前网页的版本。 2. 写法 !DOCTYPE html 3. 注意文档声明必须在网页的第一行且在 html 标签的外侧。 6、HTML 字符编码 1. 计算机对数据的操作 存储时对数据进行 编码 。 读取时对数据进行 解码 。 2. 编码、解码会遵循一定的规范 —— 字符集 。 3. 字符集有很多中常见的有了解 1. ASCII 大写字母、小写字母、数字、一些符号共计 128 个。 2. ISO 8859 - 1 在 ASCII 基础上扩充了一些希腊字符等共计是 256 个。 3. GB2312 继续扩充收录了 6763 个常用汉字、 682 个字符。 4. GBK 收录了的汉字和符号达到 20000 支持繁体中文。 5. UTF - 8 包含世界上所有语言的所有文字与符号。 —— 很常用。 4. 使用原则是怎样的 原则 1 存储时务必采用合适的字符编码 。 否则无法存储数据会丢失 原则 2 存储时采用哪种方式编码 读取时就采用哪种方式解码。 否则数据错乱乱码 5. 总结 平时编写代码时统一采用 UTF - 8 编码最稳妥。 为了让浏览器在渲染 html 文件时不犯错误可以通过 meta 标签配合 charset 属性指 定字符编码。 head meta charset UTF-8 / /head 7、HTML 设置语言 1. 主要作用 让浏览器显示对应的翻译提示。 有利于搜索引擎优化。 2. 具体写法 html lang zh-CN 8、HTML标准结构 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html 在 vscode 编辑器中输入 ! 随后回车即可快速生成标准结构。 在存放代码的文件夹中存放一个 favicon.ico 图片可配置网站图标。 9、HTML 基础
1、开发者文档 W3C官网 http://www.w3c.org/ W3School https://www.w3school.com.cn/ MDN http://developer.mozilla.org/ —— 平时用得最多 2. 排版标签 1. h1 最好写一个 h2~h6 能适当多写。 2. h1~h6 不能互相嵌套例如 h1 标签中最好不要写 h2 标签了。 3. p 标签很特殊它里面不能有 h1~h6 、 p 、 div 标签暂时先这样记后面会说规律。 3. 语义化标签
概念用特定的标签去表达特定的含义。原则标签的默认效果不重要后期可以通过 CSS 随便控制效果语义最重要举例对于 h1 标签效果是文字很大不重要语义是网页主要内容很重要。优势代码结构清晰可读性强。有利于 SEO搜索引擎优化。方便设备解析如屏幕阅读器、盲人阅读器等。
4. 块级元素 与 行内元素 1. 块级元素独占一行排版标签都是块级元素。 2. 行内元素不独占一行目前只学了 input 稍后会学习更多。 3. 使用原则 1. 块级元素 中能写 行内元素 和 块级元素简单记块级元素中几乎什么都能写。 2. 行内元素 中能写 行内元素但不能写 块级元素。 3. 一些特殊的规则 h1~h6 不能互相嵌套。 p 中不要写块级元素。 5.文本标签 1. 用于包裹词汇、短语等。 2. 通常写在排版标签里面。 3. 排版标签更宏观大段的文字文本标签更微观词汇、短语。 4. 文本标签通常都是行内元素。 生活中的例子 div 是大包装袋 span 是小包装袋。 6、图片标签 1. 像素 px 是一种单位学到 CSS 时我们会详细讲解。 2. 尽量不同时修改图片的宽和高可能会造成比例失调。 3. 暂且认为 img 是行内元素学到 CSS 时会认识一个新的元素分类目前咱们只知道 块、行内。 4. alt 属性的作用 搜索引擎通过 alt 属性得知图片的内容。 —— 最主要的作用。 当图片无法展示时候有些浏览器会呈现 alt 属性的值。 盲人阅读器会朗读 alt 属性的值。 7、路径的分类
7.1 相对路径以当前位置作为参考点去建立路径。 注意点 相对路径中的 ./ 可以省略不写。 相对路径依赖的是当前位置后期若调整了文件位置那么文件中的路径也要修改 7.2 绝对路径以根位置作为参考点去建立路径。 1. 本地绝对路径 E:/a/b/c/ 奥特曼 .jpg 。很少使用 2. 网络绝对路径 http://www.atguigu.com/images/index_new/logo.png 。 注意点 使用本地绝对路径一旦更换设备路径处理起来比较麻烦所以很少使用。 使用网络绝对路径确实方便但要注意若服务器开启了防盗链会造成图片引入 失败 8、 常见图片格式 1. jpg 格式 概述扩展名为 .jpg 或 .jpeg 是一种有损的压缩格式把肉眼不容易观察出来的细节 丢弃了。 主要特点 支持的颜色丰富、占用空间较小 、不支持透明背景、不支持动态图。 使用场景对图片细节 没有极高要求 的场景例如网站的产品宣传图等 。 —— 该格式网 页中很常见。 2. png 格式 概述扩展名为 .png 是一种无损的压缩格式能够更高质量的保存图片。 主要特点 支持的颜色丰富 、占用空间略大、 支持透明背景 、不支持动态图。 使用场景①想让图片有透明背景②想更高质量的呈现图片例如 公司 logo 图、重要配 图等。 3. bmp 格式 概述扩展名为 .bmp 不进行压缩的一种格式在最大程度上保留图片更多的细节。 主要特点 支持的颜色丰富、保留的细节更多 、占用空间极大、不支持透明背景、不支持动 态图。 使用场景对图片细节 要求极高 的场景例如一些大型游戏中的图片 。网页中很少使 用 4. gif 格式 概述扩展名为 .gif 仅支持 256 种颜色色彩呈现不是很完整。 主要特点支持的颜色较少、 支持 简单 透明背景、支持动态图 。 使用场景网页中的动态图片。 5. webp 格式 概述扩展名为 .webp 谷歌推出的一种格式专门用来在网页中呈现图片。 主要特点具备上述几种格式的优点但兼容性不太好一旦使用务必要解决兼容性问题。 使用场景网页中的各种图片。 6. base64 格式 1. 本质一串特殊的文本要通过浏览器打开传统看图应用通常无法打开。 2. 原理把图片进行 base64 编码形成一串文本。 3. 如何生成靠一些工具或网站。 4. 如何使用直接作为 img 标签的 src 属性的值即可并且不受文件位置的影响。 5. 使用场景一些较小的图片或者需要和网页一起加载的图片。 9、超链接 主要作用从当前页面进行跳转。 可以实现①跳转到指定页面、②跳转到指定文件也可触发下载、③跳转到锚点位置、④唤起指定应用。 9.1. 跳转到页面
!-- 跳转其他网页 --
a hrefhttps://www.jd.com/ target_blank去京东/a
!-- 跳转本地网页 --
a href./10_HTML排版标签.html target_self去看排版标签/a 注意点 1. 代码中的多个空格、多个回车都会被浏览器解析成一个空格 2. 虽然 a 是行内元素但 a 元素可以包裹除它自身外的任何元素 9.2 跳转到文件
!-- 浏览器能直接打开的文件 --
a href./resource/自拍.jpg看自拍/a
a href./resource/小电影.mp4看小电影/a
a href./resource/小姐姐.gif看小姐姐/a
a href./resource/如何一夜暴富.pdf点我一夜暴富/a
!-- 浏览器不能打开的文件会自动触发下载 --
a href./resource/内部资源.zip内部资源/a
!-- 强制触发下载 --
a href./resource/小电影.mp4 download电影片段.mp4下载电影/a 注意 1 若浏览器无法打开文件则会引导用户下载。 注意 2 若想强制触发下载请使用 download 属性属性值即为下载文件的名称。 9.3 跳转到锚点
什么是锚点—— 网页中的一个标记点。
具体使用方式
第一步设置锚点
!-- 第一种方式a标签配合name属性 --
a nametest1/a
!-- 第二种方式其他标签配合id属性 --
h2 idtest2我是一个位置/h2 注意点 1. 具有 href 属性的 a 标签是 超链接 具有 name 属性的 a 标签是 锚点 。 2. name 和 id 都是区分大小写的且 id 最好别是数字开头。 第二步跳转锚点
!-- 跳转到test1锚点--
a href#test1去test1锚点/a
!-- 跳到本页面顶部 --
a href#回到顶部/a
!-- 跳转到其他页面锚点 --
a hrefdemo.html#test1去demo.html页面的test1锚点/a
!-- 刷新本页面 --
a href刷新本页面/a
!-- 执行一段js,如果还不知道执行什么可以留空javascript:; --
a hrefjavascript:alert(1);点我弹窗/a
9.4 唤起指定应用
通过 a 标签可以唤起设备应用程序。
!-- 唤起设备拨号 --
a hreftel:10010电话联系/a
!-- 唤起设备发送邮件 --
a hrefmailto:10010qq.com邮件联系/a
!-- 唤起设备发送短信 --
a hrefsms:10086短信联系/a
10、列表
1. 有序列表
概念有顺序或侧重顺序的列表。
h2要把大象放冰箱总共分几步/h2
ol
li把冰箱门打开/li
li把大象放进去/li
li把冰箱门关上/li
/ol
2. 无序列表
概念无顺序或不侧重顺序的列表
h2我想去的几个城市/h2
ul
li成都/li
li上海/li
li西安/li
li深圳/li
/ul
3. 列表嵌套
概念列表中的某项内容又包含一个列表注意嵌套时请务必把解构写完整。
h2我想去的几个城市/h2
ul
li成都/li
li
span上海/span
ul
li外滩/li
li杜莎夫人蜡像馆/li
li
a hrefhttps://www.opg.cn/东方明珠/a
/li
li迪士尼乐园/li
/ul
/li
li西安/li
li武汉/li
/ul 注意 li 标签最好写在 ul 或 ol 中不要单独使用。 4. 自定义列表
1. 概念所谓自定义列表就是一个包含术语名称以及术语描述的列表。 2. 一个 dl 就是一个自定义列表一个 dt 就是一个术语名称一个 dd 就是术语描述可以有多 个。
h2如何高效的学习/h2
dl
dt做好笔记/dt
dd笔记是我们以后复习的一个抓手/dd
dd笔记可以是电子版也可以是纸质版/dd
dt多加练习/dt
dd只有敲出来的代码才是自己的/dd
dt别怕出错/dt
dd错很正常改正后并记住就是经验/dd
/dl
11、表格
1 基本结构 一个完整的表格由 表格标题 、 表格头部 、 表格主体 、 表格脚注 四部分组成。 表格涉及到的标签 table 表格 caption 表格标题 thead 表格头部 tbody 表格主体 tfoot 表格注脚 tr 每一行 th 、 td 每一个单元格备注表格头部中用 th 表格主体、表格脚注中用 td 具体编码 table border1
!-- 表格标题 --
caption学生信息/caption
!-- 表格头部 --
thead
tr
th姓名/th
th性别/th
th年龄/th
th民族/th
th政治面貌/th
/tr
/thead
!-- 表格主体 --
tbody
tr
td张三/td
td男/td
td18/td
td汉族/td
td团员/td
/tr
tr
td李四/td
td女/td
td20/td
td满族/td
td群众/td
/tr
tr
td王五/td
td男/td
td20/td
td回族/td
td党员/td
/tr
tr
td赵六/td
td女/td
td21/td
td壮族/td
td团员/td
/tr
/tbody
!-- 表格脚注 --
tfoot
tr
td/td
td/td
td/td
td/td
td共计4人/td
/tr
/tfoot
/table 2.常用属性 注意点 1. table 元素的 border 属性可以控制表格边框但 border 值的大小并不控制单元格边框的宽度 只能控制表格最外侧边框的宽度这个问题如何解决 —— 后期靠 CSS 控制。 2. 默认情况下每列的宽度得看这一列单元格最长的那个文字。 3. 给某个 th 或 td 设置了宽度之后他们所在的那一列的宽度就确定了。 4. 给某个 th 或 td 设置了高度之后他们所在的那一行的高度就确定了。 3. 跨行跨列 1. rowspan 指定要跨的行数。 2. colspan 指定要跨的列数。 12、常用标签补充 注意点 1. 不要用 br 来增加文本之间的行间隔应使用 p 元素或后面即将学到的 CSS margin 属性。 2. hr 的语义是分隔如果不想要语义只是想画一条水平线那么应当使用 CSS 完成。 13、表单 概念一个包含交互的区域用于收集用户提供的数据。 1. 基本结构 form actionhttps://www.baidu.com/s target_blank methodget
input typetext namewd
button去百度搜索/button
/form
2. 常用表单控件 ① 文本输入框 常用属性如下 input type text name 属性数据的名称。 value 属性输入框的默认输入值。 maxlength 属性输入框最大可输入长度。 ② 密码输入框 input type password 常用属性如下 name 属性数据的名称。 value 属性输入框的默认输入值一般不用无意义。 maxlength 属性输入框最大可输入长度。 ③ 单选框 input type radio name sex value female 女 input type radio name sex value male 男 常用属性如下 name 属性数据的名称注意想要单选效果多个 radio 的 name 属性值要保持一致。 value 属性提交的数据值。 checked 属性让该单选按钮默认选中。 ④ 复选框 input type checkbox name hobby value smoke 抽烟 input type checkbox name hobby value drink 喝酒 input type checkbox name hobby value perm 烫头 常用属性如下 name 属性数据的名称。 value 属性提交的数据值。 checked 属性让该复选框默认选中。 ⑤ 隐藏域 input type hidden name tag value 100 用户不可见的一个输入区域作用是 提交表单的时候携带一些固定的数据。 name 属性指定数据的名称。 value 属性指定的是真正提交的数据。 ⑥ 提交按钮 input type submit value 点我提交表单 button 点我提交表单 /button 注意 1. button 标签 type 属性的默认值是 submit 。 2. button 不要指定 name 属性 3. input 标签编写的按钮使用 value 属性指定按钮文字 ⑦ 重置按钮 input type reset value 点我重置 button type reset 点我重置 /button 注意点 1. button 不要指定 name 属性 2. input 标签编写的按钮使用 value 属性指定按钮文字 ⑧ 普通按钮 input type button value 普通按钮 button type button 普通按钮 /button 注意点普通按钮的 type 值为 button 若不写 type 值是 submit 会引起表单的提交。 ⑨文本域 textarea name msg rows 22 cols 3 我是文本域 /textarea 常用属性如下 1. rows 属性指定默认显示的行数会影响文本域的高度。 2. cols 属性指定默认显示的列数会影响文本域的宽度。 3. 不能编写 type 属性其他属性与普通文本输入框一致。 ⑩ 下拉框 select name from option value 黑 黑龙江 /option option value 辽 辽宁 /option option value 吉 吉林 /option option value 粤 selected 广东 /option /select 常用属性及注意事项 1. name 属性指定数据的名称。 2. option 标签设置 value 属性 如果没有 value 属性提交的数据是 option 中间的文 字如果设置了 value 属性提交的数据就是 value 的值建议设置 value 属性 3. option 标签设置了 selected 属性表示默认选中。 3.禁用表单控件 给表单控件的标签设置 disabled 既可禁用表单控件。 input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性 4.label 标签 label 标签可与表单控件相关联关联之后点击文字与之对应的表单控件就会获取焦点。 两种与 label 关联方式如下 1. 让 label 标签的 for 属性的值等于表单控件的 id 。 2. 把表单控件套在 label 标签的里面。 5. fieldset 与 legend 的使用了解 fieldset 可以为表单控件分组、 legend 标签是分组的标题。 6.表单总结 14、框架标签 iframe 标签的实际应用 1. 在网页中嵌入广告。 2. 与超链接或表单的 target 配合展示不同的内容。 15、HTML实体 在 HTML 中我们可以用一种 特殊的形式 的内容来表示某个 符号 这种特殊形式的内容就是 HTML 实 体。比如小于号 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符我们必须 在 HTML 源码中插入字符实体。 字符实体 由三部分组成一个 和 一个实体名称或者一个 # 和 一个实体编号最后加上一 个分号 ; 。 常见字符实体总结 完整实体列表请参考 HTML Standard 16、HTML全局属性 完整的全局属性请参考 全局属性 - HTML 超文本标记语言 | MDN (mozilla.org) 17、meta 元信息 1. 配置字符编码 meta charset utf-8 2. 针对 IE 浏览器的兼容性配置。 meta http-equiv X-UA-Compatible content IEedge 3. 针对移动端的配置移动端课程中会详细讲解 meta name viewport content widthdevice-width, initial-scale1.0 4. 配置网页关键字 meta name keywords content 8-12 个以英文逗号隔开的单词 / 词语 5. 配置网页描述信息 meta name description content 80 字以内的一段话与网站内容相关 6. 针对搜索引擎爬虫配置 meta name robots content 此处可选值见下表 7. 配置网页作者 meta name author content tony 8. 配置网页生成工具 meta name generator content Visual Studio Code 9. 配置定义网页版权信息 meta name copyright content 2023-2027© 版权所有 10. 配置网页自动刷新 meta http-equiv refresh content 10;urlhttp://www.baidu.com 完整的网页元信息请参考文档级元数据元素 | MDN
18、HTML5
1. 什么是HTML5
HTML5 是新一代的 HTML 标准2014年10月由万维网联盟 W3C 完成标准制定。 官网地址 W3C 提供 https://www.w3.org/TR/html/index.html WHATWG 提供https://whatwg-cn.github.io/html/multipage HTML5 在狭义上是指新一代的 HTML 标准在广义上是指整个前端。
2. HTML5 优势 1. 针对 JavaScript 新增了很多可操作的接口。 2. 新增了一些语义化标签、全局属性。 3. 新增了多媒体标签可以很好的替代 flash 。 4. 更加侧重语义化对于 SEO 更友好。 5. 可移植性好可以大量应用在移动设备上。 3.HTML5兼容性 支持 Chrome 、 Safari 、 Opera 、 Firefox 等主流浏览器。 IE 浏览器必须是 9 及以上版本才支持 HTML5 且 IE9 仅支持部分 HTML5 新特性。 4、新增语义化标签
1.新增布局标签 2.新增状态标签 3. 新增列表标签 input typetext listmydata
datalist idmydata
option value周冬雨周冬雨/option
option value周杰伦周杰伦/option
option value温兆伦温兆伦/option
option value马冬梅马冬梅/option
/datalist
details
summary如何走上人生巅峰/summary
p一步一步走呗/p
/details
4.新增文本标签 ruby
span魑魅魍魉/span
rtchī mèi wǎng liǎng /rt
/ruby 文本标记 注意 W3C 建议 mark 用于标记搜索结果中的关键字。 5、新增表单功能 2. input 新增属性值 3. form 标签新增属性 6、新增多媒体标签
1. 视频标签 video 标签用来定义视频它是双标签 2.音频标签 audio 标签用来定义音频它是双标签。 7、新增全局属性了解 7、HTML5兼容性处理
添加元信息让浏览器处于最优渲染模式。 !-- 设置 IE 总是使用最新的文档模式进行渲染 -- meta http-equiv X-UA-Compatible content IEEdge !-- 优先使用 webkit ( Chromium ) 内核进行渲染 , 针对 360 等壳浏览器 -- meta name renderer content webkit 使用 html5shiv 让低版本浏览器认识 H5 的语义化标签 !--[if lt ie 9] script src../sources/js/html5shiv.js/script ![endif]-- lt 小于 lte 小于等于 gt 大于 gte 大于等于 ! 逻辑非 !--[if IE 8] 仅 IE8 可见 ![endif]-- !--[if gt IE 8] 仅 IE8 以上可见 ![endif]— !--[if lt IE 8] 仅 IE8 以下可见 ![endif]— !--[if gte IE 8]IE8 及以上可见 ![endif]— !--[if lte IE 8]IE8 及以下可见 ![endif]— !--[if !IE 8] 非 IE8 的 IE 可见 ![endif]--
