1.2.2渲染引擎(了解)
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同,内在的揎染引也是不同的:
浏览器
内核
备注
IE
Trident
1E、猎豹安全、360极速浏览器、百度浏览器
FireFox
X
Gecko
火狐浏览器内核
Safari
Webkit
苹果浏览器内核
Chrome /Opera
Blink
Blink其实是Webkit的分支
浏览器内核不一样,渲染方式就会不同 怎么做到统一的打开页面
解决就是要有一个相同的web标准
1.3.2Web标准的构成
Web标准中分成三个构成:
构成
语言
说明
结构
HTML
页面元素和内容
表现
css(外观)
网页元素的外观和位置等页面样式《如:颜色、大小等)
行为
JavaScript(动一动)
网页模型的定义与页面交互
用哪种语言来表示?
HTML
(Hyper Text Markup Language)中文译为:超文本标记语言 人写的给浏览器看的,就要遵循html语法
开发工具有很多:Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder
vscode中新建文件的时候记得加上后缀名, !之后使用tab补齐后 工具会自动呈现骨架的模型
html语法
注释的快捷键: 浏览器无法渲染注释
在VS Code中:ctrl+/
在vscode中写的 代码 如何快速打开浏览器查看效果???
实现body内容的换行 br
///
水平分割线
文本格式化标签
更加重要的用后者 推荐:
strong、ins、em、del,表示的强调语义更强烈!
图片标签的介绍
场景:在网页中显示图片
代a码: src叫属性名,"里面是属性值" (一起叫标签属性)
特点: 属性名:alt
属性值:替换文本
当图片加载失败时,才显示alt的文本
当图片加载成功时,不会显示t的文本
一个标签可以对应多个属性
属性注意点:
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.
属性之间以空格隔开
4.
标签名与属性之间必须以空格隔开
5.
属性之间没有顺序之分
图片标签的title属性,当鼠标悬停的时候显示的文本 eg:
注明的src中也可以写入绝对路径 但是 ....
/// ./大多用于表示当前目录文件 ../用于表示上一级别的目录
注意点:
音频标签目前支持三种格式:MP3、Wav、Ogg
注意点:
视频标签目前支持三种格式
MP4 WebM、Ogg
列表标签
无序列表
有序列表
自定义列表
dl>dt>dd
表格标签
表格的基本标签
表格要有相关的属性:![image-20240220142251176]()
<table border="1" width="400" height="600">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>优秀</td>
</tr>
</table>
表格标题和表头单元格标签
姓名 | 成绩 | 评语 |
---|---|---|
张三 | 100分 | 优秀 |
李四 | 100分 | 优秀 |
王五 | 100分 | 优秀 |
赵六 | 100分 | 优秀 |
表格的结构标签(了解)
:为了使代码具有 易读懂性
合并单元格
场景:将水平或垂直多个单元格合并成一个单元格
报上不报下,包左不包右
注意点:
只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)
表单标签
通常用于登录 注册等功能
input:系列标签的基本介绍
input标签可以通过type属性值的不同,展示不同效果
radio(一个单选框后面跟显示的文字) 在几个之间选中一个 checkbox可以同时勾选多个
表单占位符:
提示用户输入内容的文本
input系列的标签-单选框radio
解决了radio两个单选框无法只选择一个选项的问题,多的name属性值虽然可以随便填,最好见名知意。name分组用于单选
checked的默认选中,就是打开网站的瞬间自动选中,节约用户时间成本
上传多个文件
input系列标签-按钮
要实现按钮需要把表单的信息都放入form
属性value 就是使用value修改按钮的名字
button:按钮标签
高概率会使用button的自定义按钮功能
<button>我是按钮</button>
<br>
<button type="submit">我是提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮,没有任何功能</button>
select下拉菜单标签
textarea文本域标签
lable标签:用于不点击所选框也可以勾选的便捷
语义化标签
字符实体
能通过字符实体在网页中显示特殊符号