概念
软件的两种架构
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的样式,样式可以调的
列表
<ul> <ol>
\<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
自动获得焦点