网站的外链是什么,wordpress设置邮箱插件,五站合一网站建设,免费手机网站平台注册一、基础概念 1、浏览器相关知识 这五个浏览器市场份额都非常大#xff0c;且都有自己的内核。 什么是内核#xff1a; 内核是浏览器的核心#xff0c;用于处理浏览器所得到的各种资源。 例如#xff0c;服务器发送图片、视频、音频的资源#xff0c;浏览…一、基础概念 1、浏览器相关知识 这五个浏览器市场份额都非常大且都有自己的内核。 什么是内核 内核是浏览器的核心用于处理浏览器所得到的各种资源。 例如服务器发送图片、视频、音频的资源浏览器就需要使用内核来进行处理这些资源。内核处理完这些资源之后我们才能看到页面。这五大浏览器都有自己的内核。 五大浏览器四大内核。不在这五个之中的统称为其他浏览器。其他浏览器就是在上述的内核的基础上加上了一些精美的UI界面实用的小功能等等。 2、网页相关概念 一个网页由那几部分组成 结构HTML用于搭建网页的结构。 表现CSS让结构都具有表现力 行为JavaScript 让网页由交互的效果。 3、HTML是什么 全称HyperText Markup Language 译为超文本标记语言 超文本可以理解为暂时理解为 ’超级的文本‘和普通文本比内容更丰富。 标记文本变成超文本就需要用到各种标记符号 语言每一个标记的写法、读音、使用规则构成标记语言。 4、HTML发展史 二、HTML基础 1、 html标签 标签又称元素是html的基本组成单位。 标签名不区分大小写但是推荐使用小写。 标签有单标签和双标签单标签比较少 标签也可以进行嵌套 2、HTML属性 1用于给标签提供附加信息。 2可以写在其实其实标签 或 单标签中形式如下 3有些特殊属性没有属性名只有属性值。 例如imput disabled 4注意点 1、不同的标签有不同的属性也有一些通用的属性在任何标签中都能写。 2、属性名、属性值不能乱写。都是w3c规定好的 3、属性名、属性值都不区分大小写但推荐小写。 4、双引号也可以写成单引号甚至不写都行但还是推荐写双引号 5、标签中不要出现同名属性否则后写的会失效 3、HTML基本结构 1、在网页中点击鼠标右键选择检查可以查看某段具体代码 2、检查 和 查看网页源代码 的区别 查看网页源代码看到的是程序员编写的源代码。 检查看到的是经过浏览器处理后的源代码 备注日常开发中检查用的最多 3、网页的基本结构如下 1、想要呈现在网页中的内容写在body标签中 2、head标签中的内容不会出现在网页中 3、head标签中的title标签可以指定网页的标题。 4、图示 4、HTML注释 1、特点注释的内容会被浏览器所忽略不会呈现到页面中但源代码中依然可见 2、作用对代码进行解释和说明 3、写法 !-- 下面的文字只能滚动一次 -- marquee loop1 hello world! /marquee 4、注释不可以嵌套 5、HTML文档声明 1、作用告诉浏览器当前网页的版本 2、写法 旧写法要依网页所用的HTML版本而定写法有很多具体写法请参考W3C官网-文档声明。 新写法 !DOCTYPE html 生命这个就代表这个代码是h5版本的。 3、注意文档声明必须在网页的第一行且在html标签的外侧。 6、HTML字符编码 1、计算机对数据的操作 存储时对数据进行编码 读取时对数据进行解码 2、编码、解码会遵循一定的规范 -- 字符集 3、字符集有很多常见的有 ASCII大写字母、小写字母、数字、一些符号共计128个。 ISO 8859-1:在ASCII基础上扩充了一些希腊字符等共计是256个。 GB2312:继续扩充收录了6773个常用汉字682个字符 GBK收录了的汉字和符号达到20000支持繁体中文。 UTF-8:包含世界上所有的语言所有文字与符号。-- 很常用 4、使用原则 原则1存储时务必使用合适的字符编码否则无法存储数据会丢失 原则2存储时采用哪种方式编码读取时就采用哪种方式解码。否则数据会错乱乱码。 5、总结 平时写代码时统一采用UTF-8编码 最稳妥。 为了让浏览器在渲染html文件时不犯错误可以通过meta标签配合 charset属性指定字符集 head meta charsetUTF-8/ /head 7、HTML设置语言 长按 shift 网页左上角刷新按钮可以强刷页面。 1、主要作用让浏览器显示对应的翻译提示有利于搜索引擎优化。 2、具体写法 html langzh-CN 3、扩展知识lang属性的编写规则 第一种写法(语言-国家/地区) zh-CN中文-中国大陆简体中文 zh-TW中文-中国台湾繁体中文 zh中文 en-U英语-美国 en-GB英语-英国 第二种写法语言-具体种类以不推荐使用 zh-Hans中文-简体 zh-Hant中文-繁体 w3School上的说明语言代码参考手册 w3c官网上的说明略 8、HTML标准结构 在vscode中输入 ! 再回车可以直接生成标准结构
!DOCTYPE html !-- 文档声明代表这是h5页面 --
html langzh-CN !-- 设置语言为中文可以在设置红调整该选项 --
headmeta charsetUTF-8 !-- 设置字符编码 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 暂未用到跟移动端网页有关 --title这是一个标题/title !-- 标题在网页上面显示的网页名称 --
/head
bodyh1 hello world /h1
/body
/html 9、开发者文档学习网站 推荐 MDNhttps://developer.mozilla.org/zh-CN/ 可以查看相关html标签 三、HTML常用标签 1、排版标签 h1 - h6 标题标签 h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 p 段落标签 p我是一个段落/p p我是一个段落/p p我是一个段落/p div 块标签没有任何含义用于整体布局生活中的包装袋。 1h1 最好写一个 2h1 - h6 不能互相嵌套例如 h1 标签中最好不要写 h2 标签了。 3p标签很特殊它里面不能有h1 - h6 、 p 、 div标签。 示例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title排版标签/title
/head
bodyh1把个人信息安全安全提筑牢/h1p 2022-06-21 07:34 · 1347条评论/pdivp置身移动互联网时代人们在享受只能设备带来的便利的同时也在一些场景中面临个人信息泄露风险随着时间推移这样的风险日益呈现出新的表现形式。/pp一些app生成看视频玩游戏甚至走路都能赚钱但用户想提现却难上加难还容易泄露个人信息新型不法软件图标透明没有名称在手机屏幕上十分隐蔽不仅不停推送广告还会收集并转卖用户隐私信息个人信息和隐私保护话题引发关注正说明其涉及群众切身利益问题不容小觑/p/div
/body
/html 2、语义化标签 概念用特定的标签去表达特定的含义。 原则标签的默认效果不重要后期可以通过CSS随便控制效果语义最重要 举例对于h1标签效果是文字很大语义是网页主要内容。 优势 1代码结构清晰可读性强。 2有利于SEO搜索引擎优化 3方便设备解析如屏幕阅读器盲人阅读 意思就是说h1标签的实现效果就加粗文字但其实文字的粗细程度并不是h1标签的主要功能而是说h1 代表的是一个网页最重要的信息所以它的语义比较重要。当在网页中使用 h1 就代表它是这个网页的标题之类的最显著的信息。
