做网站程序的都不关注seo,安全生产门户网站建设,做国珍新时代 网站,网站建设用什么字体背景知识
主流浏览器
浏览器是展示和运行网页的平台#xff0c; 常见的五大浏览器有 IE浏览器、火狐浏览器#xff08;Firefox#xff09;、谷歌浏览器#xff08;Chrome#xff09;、Safari浏览器、欧朋浏览器#xff08;Opera#xff09; 渲染引擎
浏览器解析代码渲…背景知识
主流浏览器
浏览器是展示和运行网页的平台 常见的五大浏览器有 IE浏览器、火狐浏览器Firefox、谷歌浏览器Chrome、Safari浏览器、欧朋浏览器Opera 渲染引擎
浏览器解析代码渲染页面的部分称为渲染引擎不同浏览器的渲染引擎不同 渲染引擎不同 各浏览器的性能和效果也不同
web标准
不同浏览器的渲染引擎不同就会导致相同的代码运行出不同的效果就会影响用户体验web标准就是要让不同的浏览器按照相同的标准展示页面效果 web标准的组成 体验html
HTMLHyper Text Markup Language中文译为超文本标记语言专门用于开发网页的语言主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
新建文本文档 → 命名为文字变粗案例.txt编辑文件strong你猜, 这个字是加粗的吗?/strong → 记得保存重命名 → 修改文件后缀为为.html双击打开网页 查看效果
骨架结构
网页拥有固定的结构规范描述网页的不同组成部分 开发工具
实际开发中非常注重开发的 效率和便捷性 因此我们会使用一些开发工具 提高工作效率
开发工具有很多 Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
注释
给代码添加解释性的信息 浏览器执行代码时会忽略注释
排版标签
1标题标签
场景标题
代码h1-h6
语义1-6级标题重要性递减。
特点文字加粗字号变大独占一行
其他alignleft/centen/right
2段落标签
场景文字分段
代码p
语义段落
特点段落之间存在间隙独占一行。
3换行标签
场景文字强制换行
代码br
语义换行
特点单标签换行
4水平线标签
场景分割不同主题内容
代码hr
语义分割
特点单标签显示一条线。 文本格式化
场景让文字有特殊效果
语义突出重点 媒体标签
1图片标签
场景显示图片
代码img srcurl alt替换文本 title提示文本 /
特点单标签
属性 width/height: 设置图片的宽度和高度
只设置一个值另一个值会自动等比例缩放同时设置两个值可能会造成图片变形
hspace控制水平空白间距vspace控制垂直空白间距 图片居中
1p aligncenter
img src..... /
/p
2center
img src......
/center
2,路径问题
绝对路径: 资源在系统中的盘符开头,不常用 相对路径:
同级目录直接写文件名字
下级目录文件夹名字/文件名字
上级目录../目标文件名字 在vs code中
同级目录和下级目录 ./ 之后选择即可
上级目录 ../ 之后选择即可 3音频标签
场景在页面中插入音频
代码audio srcurl controls/audio
常见属性 音频标签目前支持三种格式MP3、Wav、Ogg 4视频标签
场景在页面中插入视频
代码video srcurl controls autoplay muted/video
常见属性 视频标签目前支持三种格式MP4 、WebM 、Ogg
链接标签
1.链接标签
场景页面跳转
代码 a href跳转路径 targe_blank超链接/a
特点双标签a标签可以包裹内容 href属性
外部链接a href网页地址 某个网站/a
内部链接a href 文件路径目标页面/a 其他属性 2.锚点链接
1设置a链接的href属性。如a href#two链接文本/a
2在目标位置设置id属性刚才的名字。如h3 idtwo目标位置/h3 3.下载链接
a href文件路径下载链接/a
4.空链接:
a href#空链接/a
a hrefjavascript:;空链接/a
作用
点击之后回到网页顶部开发中不确定该链接最终跳转位置用空链接占个位置
列表标签
A无序列表
场景在网页中表示一组无顺序之分的列表。
语法ulli
特点列表的每一项前默认显示圆点。
注意ul中只允许包含li标签
li中可以包含任意内容 type的取值
circle空心圆
disc实心圆
square方块 设置 list-style:none 可以去除列表默认的样式
B有序列表
场景在网页中表示一组有顺序之分的列表。
语法olli
特点列表的每一项前默认显示序号
注意ol中只允许包含li标签
li中可以包含任意内容 type的取值
1阿拉伯数字
a英文字母
i小写古罗马
I大写古罗马 C自定义列表
场景在网页的底部导航中通常会用到。
语法dldtdd
特点dd前会默认显示缩进效果
注意dl中只允许包含dt/dd标签
dt/dd中可以包含任意内容
表格标签
场景数据展示
代码tabletrtd
属性border 边框宽度 取值为数字
width 表格宽度 取值为数字
height 表格高度 取值为数字 补充caption 表格整体的大标题
th 表头单元格, 替代td
caption表格大标题 写在table标签内部 合并单元格
1,明确合并哪几个单元格,选择合适的属性
跨行合并用(rowspan)/跨列合并用(colspan
2,通过左上原则,确定给谁添加属性
3,确定合并的个数为属性赋值 补充:
1,不能跨结构合并单元格
2,边框合并:
让相邻表格边框进行合并得到细线边框效果border-collapsecollapse 表单标签-input
场景在网页中显示收集用户信息的表单效果
标签input可以通过设置type属性值的不同展示不同效果。 type属性值 说明 补充
text 文本框 placeholder占位符提示文本。
password 密码框 placeholder占位符提示文本。
radio 单选框 同一组单选框设置相同的name值之后才能实现单选效果。
checkbox 多选框
file 文件选择
submit 模拟提交按钮 需要配合form标签实现功能
reset 模拟重置按钮 需要配合form标签实现功能
button 模拟普通按钮 需要配合form标签实现功能 input其他属性
属性 属性值 描述
name 自定义 定义input元素的名称
value 自定义 定义input元素的值按钮内部文本
checked checked 规定此input元素首次加载时应被选中默认选中
maxlength 正整数 规定输入的最大长度
outline none 取消选中后的边框加粗样式 表单标签-form
form标签用于管理表单的值并进行表单提交 用form标签把表单标签一起包裹起来即可 属性
autocompleteoff 关闭输入记录
方法
reset() 方法可以重置表单, 注意是原生函数;
表单标签-select
场景提供多个选项的下拉菜单选项
代码selecoption选项
补充定义selectedselected时当前项即为默认选中项
表单标签-textarea
场景提供多行输入的文本框(文本域)
代码
textarea
文本内容
/textarea 补充
rows定义输入行数
cols定义输入列数。
border: none;
outline: none;
resize: none;
表单标签-label
场景用于绑定内容与表单标签的关系
代码label
用法1:
1. 使用label标签把内容如文本包裹起来
2. 在表单标签上添加id属性
3. 在label标签的for属性中设置对应的id属性值 用法2:
1. 直接使用label标签把内容如文本和表单标签一起包裹起来
2. 把label标签的for属性删除即可
按钮标签-button
在网页中显示用户点击的按钮 谷歌浏览器中button默认是提交按钮
语义化标签
在HTML5新版本中推出了一些有语义的布局标签供开发者使用 字符实体
场景展示特殊字符效果时
结构英文
