HTML5基础

最新推荐文章于 2021-06-28 12:44:45 发布

星辉闪烁奇迹

最新推荐文章于 2021-06-28 12:44:45 发布

阅读量246

点赞数 1

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_44186793/article/details/88895558

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

《HTML5基础》
一、HTML简介
1.HTML：Hyper Text Markup Language 超文本标记语言
2.HNML是一门制作网页的计算机编程语言（相对于Java逻辑上更简单，但是记忆的东西更多）
3.超文本最早是指拥有超链接这样的超越普通文本功能的内容
4.HTML语言由大量的标签组成，所以是标记语言
5.HTML5有些地方会简称H5，是HTML4的升级版本
6.HTML5涵盖了HTML4，其中60%是HTML4的内容，40%是新增的内容
7.HTML编写好以后，由浏览器来解析渲染和呈现
8.常见的浏览器厂商：
谷歌chrome、IE(微软）、FireFox(火狐）、QQ Browser、猎豹、 Safari、360、Opera
9.早期，各种浏览器标准不一，导致网页的兼容性差，程序员为了解决兼容性工作量大
10.W3C组织（World Wide Web Consortium）（www.万维网）指定统一的W3C标准
a.HTML
b.CSS
c.JavaScript

二、网页的基本结构
1.编写网页的工具：任意文本编辑器
a.记事本
b.Notepad++
c.WebStorm
d.Sublime
2.新建一个记事本，修改后缀.txt为.html或.htm
3.文件的后缀可能被隐藏，需要调出来
4.修改了后缀以后，文件的类型就变了，变成网页文件了，图标也会变
5.网页文件的图标根据不同电脑安装的浏览器不同，显示的效果不一样，没有太大关系
6.在文件顶部编写声明：
!DOCTYPE html
7.文档架构：
html
head
title标题title
head
body
这里是主体
body
html
8.html作为根节点，有且只有一个
9.head标签表示头部信息
10.body标签表示主体
11.title标签表示标题，显示在浏览器标题栏
12.代码编写完成后双击用浏览器查看效果

三、meta标签的使用
1.meta标签用于描述网页的摘要信息或者配置信息
2.包括网页作者、描述、关键字等

<meta name="description"content=“学生上三自己做的一个个人博客”/>

keywords表示搜索关键字，description表示网站内容的具体描述
    	 注意：使用WebStorm工具生成的HTML基本结构的<head>标签里有个属性
     	lang="en"，表示页面是英文的。用Chrome之类的浏览器打开时会提示是否需要翻译。

3.还可以用于设置网页的编码

4.常见编码：
gb2312:简体中文，一般用于包含中文和英文的页面。
ISO-8859-1：纯英文，用于只包含英文的页面。
big5:繁体，一般用于带有繁体字的页面。
UTF-8：国际通用的字符编码，支持多国语言，国际通用性更好，兼容性更高。
5.中文乱码的解决：
a.通过meta标签设置网页的编码为UTF-8
b.修改文件的编码为UTF-8（用记事本打开网页文件，另存为，选择编码）
6.meta标签是可选标签，通常根据需要进行编写

四、HTML5文档结构
有两部分：头部（head) :网页标题等信息和主体(body)网页内容等信息
主体网页内部相关结构元素：
header：标记头部区域的内容
footer:标记脚部区域的内容
section:Web页面中的一块独立区域
article:独立的文章内容
aside:相关内容或应用（常用于侧边栏）
nav：导航栏辅助内容

   网页的基本信息：
  1.!DOCTYPE声明：用于约束HTML文档结构，检验是否符合相关Web标准，
  使用哪种规范来解释文档中的代码。这个声明必须位于HTML文档的第一行。
  
  2.<html>标签：是HTML文件的开头。</html>是HTML文件的结束。
      HTML页面的所有标签都要放置在<html>与</html>标签中，
      <html>标签是HTML文件必不可少的内容。
      HTML不区分大小写。
  
  3.<head>标签：是HTML文件的头标签，作用是放置HTML文件的信息。
     如定义CSS样式代码可放置在<head>与</head>之中。
  
  4.<title>标签：是标题标签。可将网页的标题定义在<title>与</title>中。
  5.<body>标签：是HTML页面的主体标签。页面中的所有内容都定义在其中。
     <body>也是成对使用的，以<body>开头，以</body>结束。
      标签本身也具有控制页面的一些特性，例如控制页面的背景图片和颜色等。

3.HTML基本标签
1.标题标签：表示一段文字的标题或主体，并且支持多层次的内容结构。
一级标题采用h1 二级标题采用h2 其他标题以此类推
HTML一共提供了六级标题h1~h6。
数字越小，表示级别越高，文字的字号越大。
2.换行标签：使网页中的文字实现换行。
br表示强制换行显示，该标签比较特殊，没有结束标签。
3.段落标签：p
4.水平线标签：hr表示一条水平线。该标签没有结束标签。与换行标签一样。
5.居中标签：可以让页面的内容在页面的居中位置显示，
使用center标签。标签中的内容为居中显示。
6.字体样式标签：
strong:粗体，表示强调的作用.
b标签也显示粗体
em：斜体。
7.注释和特殊符号：
HTML的注释格式：快捷键：ctrl+/

特殊符号			字符实体
空格			&nbsp;
大于号(>)			&gt;                greater  than
小于号(<)			&lt;                  less than
引号(")			&quot;
版权符号@		&copy;

五、图像标签
1.网页中也可以显示图片
2.常见的图像格式有（image):
（1）JPG格式。
优点：体积小，清晰，适合在网页中应用，适合用于摄影或连续色调图像的高级格式。
缺点：有损压缩，造成画面失真。
注意：随着JPG格式文件品质的提高，文件的大小和下载时间也会随之增加。
（2）GIF格式。
支持透明色，支持动画，在网页背景和一些多层特效的显示上用的非常多；
（3）BMP格式。
在Windows操作系统上使用的比较多，是位图(BitMap)的英文缩写。
与其他Microsoft、Windows程序兼容。
缺点：不支持文件压缩，也不适用于Web页。
（4）PNG格式。
支持背景透明，支持压缩，体积小，品质高
2.图像标签的基本语法
<img src="图片地址"alt="图像的替代文字"title="鼠标悬停提示文字"width="图片宽度"height=“图片高度”/>
插入图像时使用标签，src和alt必选。

3.链接地址分为绝对路径和相对路径
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。
如：href=“http://www.sohu.com/index.html”

相对路径：相对于当前页面的路径，一般指向本站点内的文件，一般不需要一个完整的URL地址的形式。
如：href=“login/login.html”

注意：
…/表示当前目录的上级目录；
…/…/表示当前目录的上上级目录。
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。
src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。
href 的内容，是与该页面有关联，是引用。
区别就是，引入和引用。

4.with和height:
a.用于设置宽高
b.通常只设置其中一个值
c.因为设置了一个值，另一个值会自动等比缩放
d.不建议设置两个值，如果设置的不对，图片会拉伸变形导致失真效果

六、超链接标签
1.超链接可以用于用户交互，在网页中非常常见
a.超链接默认有下划线
b.鼠标指针移到超链接上会变可点击的手型
c.超链接可以点击，且点击了会有页面跳转
2超链接的基本语法如下：
<a href="链接地址"target=“目标窗口位置”>链接文本或图像
两部份内容：
一是链接地址，即相关路径，对应为标签的href属性（标签用于建立页面间的导航链接）
二是链接文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址。

3.href:表示可以连接的URL，即地址或路径
a.可以写相对路径
b.也可以写绝对路径
c.也可以写#，表示空链接，点击没有实际的跳转效果

4.target:表示目标窗口
a.默认是：_self，自己的意思，表示在本窗口打开，覆盖原有页面内容
b._blank：表示空白窗口，即打开一个新的窗口，不影响原有窗口
5.图片也可以做超链接效果，只要用a标签包含起来

6.超链接的使用
1.页面间链接：A页面到B页面，最常用，用于网站导航。
热点文本/热点图像
热点文本/热点图像：点击文本或图像能够实现跳转的就叫热点文本或图像。
2.锚链接：
1.A页面甲位置到A页面乙位置
1.点击我
2.跳转到这里来
name为标签的属性可以用id属性替换，me为标记名(可以换成其他名字），其功能类似于锚也称锚名。
2.A页面甲位置到B页面乙位置(跳转到不同页面的固定位置)。
1.html
点击我 ”2.html“指的是其路径
2.html
跳转到我这里来

3.功能性链接
作用：启动本机自带的某个应用程序，如电子邮件，QQ等链接。
基本语法：<a href="mailto:电子邮件地址">内容</a>

7.注意事项
1.标签有层级关系，编写的时候要注意缩进对齐
2.标签有开始，有结束，不规范的话会影响网页显示效果
3.网页标签不区分大小写，语法检查不严格，没有报错信息更加不好找错，更要细心
4.标签编写的时候要成对写，不容易遗漏，写完标签的开始和结束，再来写中间的内容
5.标签分行内元素（内联元素）和块元素

星辉闪烁奇迹

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础

《HTML5基础》一、HTML简介1.HTML：Hyper Text Markup Language 超文本标记语言2.HNML是一门制作网页的计算机编程语言（相对于Java逻辑上更简单，但是记忆的东西更多）3.超文本最早是指拥有超链接这样的超越普通文本功能的内容4.HTML语言由大量的标签组成，所以是标记语言5.HTML5有些地方会简称H5，是HTML4的升级版本6.HTML5...
复制链接

扫一扫