前端的学习简介(HTML)
注释标签<!-- -->
注释不能嵌套。
文档声明<!doctype html>;声明该文档为HTML5格式
声明<meta charset="utf-8">;声明代码编码格式,指定网页字符集
name;指定数据名称(name=“keywords” content="")
“keywords”;表示网站关键词,可以使用多个,用逗号隔开
"description";指定网站描述
content;指定数据內容
标签<head></head>网页头部,不会直接出现在网页中,主要用来帮助网页搜索引擎解析网页
标题栏<title></tiyle>浏览器标题栏
正文<body></body>
自结束标签<img> <input>
属性
<font></font>
开始标签或自就结束标签
名值对(x=y)
属性和标签名或其它属性应该使用空格隔开
有些属性没有属性值,属性值应该使用引号
字符编码
编码
将字符转换为二进制的过程
解码
将二进制转换为字符的过程
乱码
编码和解码所才用的字符集不同
常见的字符集
ASCII(美国,英国)
GB2312(中国)
GBK(中国)
UTF-8(万国码)
ISO88591(欧)
实体
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格 在HTML中有些时候,我们不能直接书写一些特殊符 号 比如:多个连续的空格,比如字母两侧的大于和小于号 如果我们需要在网页中书写这些特殊的符号,则需要使用htm1中的实体(转义字符)
实体的语法: &实体的名字;
例如:  :空格
>:大于号
<:小于号
©:版权符号
语义化标签
<hgroup>标题分组,可以将一组相关的标题同时放入hgroup
<em>标签用于表示语音语调加重
<strong>强调重要作用
换行符号
块元素独占一行,行内元素不独占一行
块元素(block element ) 在网页中一般通过块元素来对页面进行布局 行内元素(inline element) 行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
块元素中基本上什么都能放 p元素中不能放任何的块元素
浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正
比如: 标签写在了根元素的外部 p元素中嵌套了块元素 根元素中出现了除head和body以外的子元素
布局标签
header表示网页的头部
main表示网页的主体部分(一个页面中只会有一个main)
footer表示网页的底部
nav表示网页中的导航
aside和主体相关的其他内容(侧边栏)
article表示一个独立的文章
section表示一个独立的区块,上边的标签都不能表示时使用section
div没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
span行内元素,没有任何的语义,一般用于在网页中选中文字
列表
无序列表,使用ol标签来创建无序列表 使用li表示列表项 无序列表,使用ul标签来创建无序列表 使用li表示列表项 定义列表,
使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
超链接
超链接可以让我们从一个页面跳转到其他页面
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径 相对路径都会使用.或..开头 ./
../
./可以省略不写,如果不写./也不写.. /则就相当于写了./ ./表示当前文件所在的目录 ../表示当前文件所在目录的上一级目录
target属性,用来指定超链接打开的位置
可选值:
_self默认值在当前页面中打开超链接
_blank 在一个新的要么中打开超链接
在开发中可以将#作为超链接的路径的展位符使用
可以直接将超链接的href属性设置为#,这样点击超链接以后 页面不会发生跳转,而是转到当前页面的顶部的位置 可以跳转到页面的指定位置,只需将href属性设置#目标元素的id属性值 id属性(唯一不重复的) 每一个标签都可以添加一个id属性 id属性就是元素的唯一标识, 同一个页面中不能出现重复的id属性
可以使用javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生
图片标签
图片标签用于向当前页面中引入一个外部图片
<img src="" alt"">(自结束标签)
使用img标签来引入外部图片,img标签是一个 自结束标签 img 这种元素属于替换元素(块和行内元素之间,具有两种元素的特点 属性: src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录
width 图片的宽度(单位是像素)
height 图片的高度
宽度和高度中如果只修改了一个,则另一个会等比例缩放
注意: 一般情况在pc端,不建议修改图片的大小
图片的格式:
jpeg(jpg) 支持的颜色比较丰富,不支持透明效果,不支持动图 一般用来显示照片
gif 支持的颜色比较少,支持简单透明,支持动图 颜色单一的图片,动图
png 支持的颜色丰富,支持复杂透明,不支持动图 颜色丰富,复杂透明图片(专为网页而生)
webp 这种格式是谷歌新推出的专[用来表示网页中的图片的一种格式 它具备其他图片格式的所有优点,而且文件还特别的小
缺点:兼容性不强
base64 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片 一般都是一些需要和网页-起加载的图片才会使用base64
效果一样,用小的 效果不一样,用效果好的
内联框架
<iframe src="" width="" heigt=""></iframe>
内联框架,用于向当前页面中引入一个其他页面 src 指定要引入的网页的路径 frameborder 指定内联框架的边框
很少使用
音视频文件引入
<audio src="" controls></audio>
audio 标签用来向页面中引入一个外部的音频文件的 音视频文件引入时,默认情况下不允许用户自己控制播放停止
属性: controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
如果设置了 autoplay 则音乐在打开页面时会自动播放 但是目前来讲大部分浏览器都不会自动对音乐进行
loop 循环播放
<video controls> <source src=""> </video>
使用 video 标签来向网页中引入一个视频 使用方式和audio基本上是一样的