前端的学习简介(HTML)

HTML5

注释标签<!-- -->

注释不能嵌套。

文档声明<!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中的实体(转义字符)

实体的语法: &实体的名字;

例如: &nbsp:空格

&gt:大于号

&lt:小于号

&copy:版权符号

语义化标签

<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来对内容进行解释说明

列表之间可以互相嵌套

 

超链接

超链接可以让我们从一个页面跳转到其他页面 或者是当前页面的其他的位置 使用a标签来定义超链接

属性: href指定跳转的目标路径 值可以是一个外部网站的地址 也可以写一个内部页面的地址 超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素

当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径 相对路径都会使用.或..开头 ./

../

./可以省略不写,如果不写./也不写.. /则就相当于写了./ ./表示当前文件所在的目录 ../表示当前文件所在目录的上一级目录

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基本上是一样的

 

posted @ 2021-11-30 21:50  苏槿年  阅读(40)  评论(0编辑  收藏  举报