HTML&CSS基础知识笔记
HTML
HTML(Hyper Text Markup Language)超文本标记语言
一、HTML介绍
网页的基本结构:
<html>
<head>
<meta>
<title></title>
</head>
<body>
</body>
</html>
- html 定义整个HTML文档
- head 标签是网页的头部,head内容不会在网页中出现,主要用来帮助浏览器或搜索引擎来解析网页
- meta 标签用来设置网页的字符集,避免乱码问题,用来设置网页的元数据
- title标签必须写!
- 迭代
- 网页的版本
- HTML4
- XTML2.0
- HTML5
- …
- 文档的声明
- 文档的声明是用来告诉浏览器当前网页的版本
- HTML5的文档声明:
<!doctype html>
- 网页的版本
- 进制
- 十进制
- 二进制
所有数据在计算机底层都是以二进制形式存储的 - 八进制
- 十六进制
- 字符编码
- 解码
将字符转换为二进制码的过程 - 编码
将二进制码转换为字符的过程 - 字符集(charset)
编码和解码所采用的规则 - 乱码问题
如果编码和解码所采用的字符集不同会造成乱码问题 - 常见的字符集
- ASCII
- ISO88591
- GB2312
- GBK
- UTF-8
- 可以使用meta标签来设置网页的字符集,避免乱码问题:
- 解码
二、实体
实体的语法:&实体名字;
-  ;空格
- >; 大于号
- <; 小于号
- ©; 版权符号
- …
三、meta标签
- meta主要用来设置网页中的一些元数据,元数据是非浏览器看的
- charset 指定网页的字符集
- name 指定数据的名称
- keyword 表示网站的关键字,可以同时指定多个关键字,关键字用 , 隔开
- description 用于指定网站的描述
<meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,营养保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡"> <meta name="description" content="天猫,中国线上购物的地标网站,亚洲超大的综合性购物平台,拥有10万多品牌商家。每日发布大量国内外商品!正品网购,上天猫!天猫千万大牌正品,品类全,一站购,支付安全,退换无忧!理想生活上天猫!">
- http-equiv 将页面重定向到另一个网站
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
- content 指定数据的内容
四、语义化标签(一)
在网页中HTML负责网页的结构,使用HTML应该关注标签的语义 ,而不是样式
- 标题标签
- h1 - h6 一共有六级标题,重要度递减
- h1在网页中重要性仅次于title标签,一般标题标签只使用到h3
- hgroup标签用来为标题分组,可以将一组相关的标题放到hgroup里
- p标签表示页面中的一个段落,是块元素
- em标签用于表示语音语调的加重,在页面中不会独占一行,是行内元素(inline element)
- blockquote表示长引用,是块元素
- q表示短引用,是行内元素
五、语义化标签(二)
- 块元素
在网页中一般通过块元素来对页面进行布局, - 行内元素
行内元素主要用来包裹文字 - 一般情况下,在块元素中放行内元素,而不会在行内元素中放块元素
- 块元素中基本上什么都能做
- p元素中不能放任何块元素
- 浏览器在解析网页,会自动对网页中不符合规范的内容进行修正:
- 标签写在了根元素的外部
- p元素中嵌套了块元素
- html中出现了head和body以外的子元素
六、语义化标签(三)
布局标签(结构化语义标签)
- header 表示网页的头部
- main 表示网页的主体部分(一个网页只有一个)
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 表示和主体相关的其他内容(侧边栏)
- article 表示一个独立的文章
- section 表示一个独立的区块,上边的标签都不能表示使用section
- div 没有语义,就用来表示一个区块,目前来讲div还是主要的布局元素
- span 行内元素,没有任何语义,用于在网页中选中文字
七、列表
列表(list)
在HTML中也可以创建列表,HTML列表一共有三种
- 有序列表
- 使用ol标签来创建有序列表
- 使用li标签表示列表项
- 无序列表
- 使用ul标签来创建无序列表
- 使用li标签表示列表项
- 定义列表
- 使用dl标签来创建定义列表
- 使用dt标签来表示定义的内容
- 使用dd标签来对内容进行解释说明
<dl> <dt></dt> <dd></dd> </dl>
列表之间可以互相嵌套
八、超链接
超链接可以让我们从一个页面跳转到另一个页面,或者是当前页面的其他位置
- 使用a标签来定义超链接,属性:
- href 指定跳转的目标路径,值可以写一个外部网站的地址,也可以写内部页面的地址
- 可以直接将href属性设置为#,这样点击超链接后,页面不会发生跳转,而是转到当前页面的顶部位置
- 还可以跳转到页面的指定位置,只需将href属性设置为#目标元素的id值
- a标签是一个行内元素,在a标签中可以嵌套除它自身的任何元素
- target 用来指定超链接打开的位置,可选值:
- _self 默认值,在当前页面中打开超链接
- _blank 在一个新的页面中打开超链接
- id (唯一不重复)
- 每一个标签都可添加id属性
- id属性是元素的唯一标识,同一个页面中不能出现重复的id属性值
- href 指定跳转的目标路径,值可以写一个外部网站的地址,也可以写内部页面的地址
九、图片标签
图片标签用于当前页面中引入一个外部图片
使用img标签来引入外部托,img标签是一个自结束标签
img这种元素属于替换元素(基于块和行内元素,具有两种元素的特点)
属性:
- src 属性指定的是外部图片的路径(路径规则和超链接一样)
- alt属性对图片的描述,默认情况下不显示,有些浏览器会在图片无法加载时显示
- width图片的宽度(定位是像素)
- height图片的高度
- 注意:一般情况下在pc端,不建议修改图片的大小。在移动端,经常需要对图片进行缩放(大->小)
图片的格式:
- JPEG(JPG)
- 支持颜色比较丰富,不支持透明效果,不支持动图
- 一般用来显示照片
- GIF
- 支持的颜色比较少,支持简单透明,支持动图
- 颜色单一的图片、动图
- PNG
- 支持颜色丰富,支持复杂透明,不支持动图
- 颜色吩咐、复杂透明图片(专为网页而生)
- webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点,而且文件比较小
- 缺点:兼容性不好
- base64
- 将图片使用base64进行编码,可以将图片转换为字符,通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才使用base64
十、内联框架
内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
<iframe src="http://www.qq.com" width="800" height="600" frameborder="0" ></iframe>
十一、音视频
audio标签向页面中引入一个外部的音频文件
音频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
- src 指定外部文件的路径
- controls 是否允许用户控制播放,没有值
- autoplay 音频文件是否自动播放
- loop 音乐是否循环播放
处了使用src来指定外部文件的路径外,还可以使用source来指定文件的路径
<audio controls>
<source src="./source/#.mp3">
<source src=.source/#.ogg"">
<embed src="./source/#.mp3" type="audio/mp3" width="200" height="100" >
</audio>
video标签来向网页引入一个个视频,使用方法和audio一样
十二、表格
1、在网页中我们需要使用表格
- table标签来创建一个表格
- tr标签来表示行
- td标签表示单元格
- rowspan 纵向合并单元格,合并行
- colspan横向合并单元格,合并列
2、还可以将一个表格分成三个部分:
- 头部 thead
- 主体 tbody
- 底部 tfoot
- th表示头部的单元格
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
3、表格的样式:
- border-spacing 指定边框之间的距离
- border-collapse 设置边框的合并
- 单元格 td
- vertical-align 垂直样式
- text-align 水平样式
- 如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个个tbody,并且将tr全部放到tbody中
- tr 不是 table 的子元素
十三、表单
网页中的表单用于将本地的数据提交给远程的服务器
<!--
form 的属性:
action 表单提交的服务器的地址
autocomplete="off" 关闭自动补全
-->
<form action="target.html">
<!--
文本框
注意:数据要提交到服务器中,必须要为元素指定一个name值
readonly 将表单项设置为只读 数据会提交
disabled 将表单项设置为禁用 数据不会提交
autofocus 设置表单项自动获取焦点
-->
账号:<input type="text" name="username"><br>
<!-- 密码框 -->
密码:<input type="password" name="password"><br>
<!--
单选按钮
像这种选择按钮,必须指定一个value属性,
value值会最终作为用户填写的信息交给服务器处理
checked可以将单选框设置为默认选中
-->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked><br>
<!-- 多选框 -->
多选框 <input type="checkbox" name="text" value="1">
<input type="checkbox" name="text" value="2">
<input type="checkbox" name="text" value="3" checked><br>
<!-- 下拉列表 -->
<select name="chose">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select><br>
<!-- 提交按钮 -->
<input type="submit" value="登录">
</form>