Html课程笔记

概念

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

网页的优点

  1. 不需要安装
  2. 无需更新
  3. 跨平台

文本类型
纯文本: 只能包含文字信息
富文本: 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自动获得焦点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值