HTML5网页设计与优化-优快云博客

概念

软件的两种架构
C/S 客户端/服务器
B/S 浏览器/服务器
网页是B/S架构

网页的优点

不需要安装
无需更新
跨平台

文本类型
纯文本: 只能包含文字信息
富文本: word
超文本标记语言: html

标签属性规范

结构:名值对
属性,标签名和其他属性用空格隔开
若有属性值则用引号
允许没有~~属性值~~

<!doctype html> 声明了此文档是以h5标准浏览器解析
<title>中的数据对SEO重要
样式表现用CSS设置不用HTML设置
实体格式:&实体的名字

meta标签

meta用来设置元数据给搜索引擎爬虫和浏览器读取的

charset指的是网页字符集
name 数据名称
content 指定数据内容
keywords 表示搜索网站的关键字 用逗号隔开
descrition 网站描述会显示在搜索引擎搜索的结果中
title中的内容就是搜索引擎搜索结果的超链接的文字
refresh url=" " 跳转

语义化标签

html是语义便签如： <h1>是一级标题搜索引擎认为ta最重要而其大小可以用CSS随意缩小，
多个h1的话搜索引擎反而认为其不重要了，
h1块标签自动换行

标题组

<hgroup>        //必须相联系的两个标题
	<h1>大标题</h1>
	<h2>小标题</h2>
</hgroup>        //</hgroup><p>也是块元素

引用标签

<blackquote>长引用缩进</blackquote>     //块

<q>短引用</q>     //行内   自动加引号

行内和块

行内元素主要包裹文字 不放块
块元素用来页面布局啥都能放
<p>里面啥都不放
浏览器会自动在内存里为你的纠错
其他块
<header>头部，可以多个每个块也可以有
<main> 主要，一个页面一个
<footer> 底部，可以多个每个块也可以有
<aside>侧边栏
<nav>导航
<article>文章
<section>其他的
都是语义化标签，给搜索引擎看的，不要关注ta的样式，样式可以调的

列表

\<dl>自定义key\<dl>
\<dd>value\</dd>
\<dd>value\</dd>

列表可以嵌套经常嵌套

超链接

可以跳转到其他页面也可以跳转到页面的其他地方
<a> 是行内元素， 里面啥都能放比如div 除了ta自己
<a href=" " target=" "> 超链接</a>
href=“#” 回到本页顶部占位符 javascript:;
href=“#id” 跳转到此id名所在元素

target= _self 默认值 当前页面打开
target= _blank 新的页面打开容易打开多个不用窗口

图片

<img src="./ "  alt=" ”>

替换元素块行特点 不换行
<p>123</p> 显示123 不替换

alt搜索引擎读取
width height 修改一个同比缩放
一般调整大小用ps 移动端会用到

jpng 不透明不动颜色丰富照片
gif 简单透明动颜色单一动图
png 复杂透明 不动颜色丰富网页
webp 兼容性不好
base64 编码加密将图片转成字符需要同步加载显示的时候

音频播放器

\<frame src = " " >\<frame> 内联框架打开一个嵌套网页搜索引擎不会爬很少使用
\<audio src=" " controls autoplay loop>\</audio>
控制和自动播放
autoplay不同浏览器处理方式不同
loop 循环

<audio   >
	对不起不支持    //不支持不认识标签   会直接显示文字
	<sourse  src="  .ogg"> //可代替<audio>   解决兼容
	<sourse  src=" .mp3">    //按顺序播放  
	<embed   src="" >  </embed>   //有这个就都兼容了不需要字了
</audio>

视频播放器

\<video> \</video> 和audio一样

视频和音频文件一般放在其他云如七牛云
免费的可以放在腾讯优酷等

表格

thead,tfoot中的内容在换页的长表格中固定在每页的页眉和页脚
tbody不写浏览器会自动生成，默认在able和tr之间
th表头单元格合并单元格合并之后的单元格　不影响之前单元格
表格列数是最多表格的行决定
单元格边框之间距离可设置　常见的单元格是合并边框后的
table块设置整个表格在页面中的位置
text-align设置内容居中可设置在table或单元格表格可以嵌套　用来布局　维护难

内容大小会随表格放大加大
border-spacing:边框直接距离
border-collapse:合并边框
没有tbody标签浏览器会自动加在table后面
td标签中居中 vertical-align:middle text-align:center
margin:0,auto 左右居中

表单

<form action="　">action:表单提交的服务器
提交到服务器必须有name
单选radio和多选checkbox的　相同name为一组　　value为选项
有提交属性的必须有value提交服务器的内部值
value也是框自带默认值

<input  type="text"  type="password"隐藏输入  
type="radio" type="submit"   type="reset" > 
 <button type="submit" type="reset"  
  type="button">  </button>

checked默认选中
select option下拉选项 selected默认选中
autocomplete=off 关闭自动补全
readonly只读会提交
disabled禁用不会提交
autofocus自动获得焦点