房上的猫：HTML5基础
一.W3C标准
1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)和行为(Behavior)
2)不很严谨的说"结构","表现","行为"分别对应了三种非常常用的技术,即HTML,CSS,JavaSxript.也就是说HTML用来决定结构和内容,CSS用来设定网页的表现样式,JavaSpcript用来控制网页的行为
3)W3C标准包括结构化标准语言(HTML,XML),表现标准语言(CSS),行为标准(DOM,ECMAScript)
二.网页编辑工具
使用WebStorm编辑HTML文档:
1)打开WebStorm编辑器后,选择File->New->HTML File命令.打开"HTML File"对话框
2)在"Name"文本框中输入HTML的文件名,在"Kind"下拉列表框中选择"HTML 5 file"选项,单击"OK"按钮即可创建一个页面的模板
3)在body元素和title元素中添加网页的内容
4)网页内容添加完毕后,鼠标移动到WebStorm编辑器的右上方,会出现几个常见的浏览器图标,单击其中一个图标即可打开该页面
注:使用某浏览器测试,前提是本机上安装了该浏览器
5)在浏览器中显示效果
三.HTML5文件的基本结构
最基本与语法:
<标记>内容</标记>
1)标记在有的地方也称为标签或者元素,其实它们知道是同一种东西
2)标签都是成对出现的,有一个开头标记就对应地有一个结束标记,以"<>"开始,以"</>"结束,要求成对出现,标签之间有缩进,体现层次感,方便阅读和修改
<html> <head> <title>网页标题<title> </head> <body> </body> </html>
四.网页的基本信息
1.DOCTYPE声明:
1)约束HTML文档结构,检验是否符合相关Web标准,同事告诉浏览器,使用哪种规范来解释这个文档中的代码
2)DOCTYPE声明必须位于HTML文档的第一行
3)语法：
<!DOCTYPE html>
2.<title>标签:
<title>网页标题</title>
打开网页后,将在浏览器窗口的标题栏显示网页标题
3.<meta>标签:
1)使用该标签描述网页的摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等
2)<meta>标签描述的内容不显示,其目的是方便浏览器解析或利用搜索引擎搜索,它采用"名称/值"对的方式描述摘要信息
1.文档内容类型,字符编码信息:
<meta charset="属性"/>
属性:charset表示字符集编码,常用编码:
1)jb2312:简体中文,一般用于包含中文和英文的页面
2)ISO-885901:纯英文,一般用于只包含英文的页面
3)big5:繁体,一般用于带有繁体字的页面
4)UTF-8:国际性通用的字符编码,同样适用于中文和英文的页面.和gb2312编码相比,国际通用性更好
在保存文件时编码方式一定要与HTML5y页面中的<meta>标签中的编码方式保持一致,否则会出现乱码
2.搜索关键字和内容描述信息:
<meta name="搜索关键字" content="网站内容的具体描述"/>
1)实现的方式仍然为"名称/值"对的形式
2)通过搜索关键字和内容描述信息,方便搜索引擎的搜索
使用WebStorm工具自动生成的HTML基本结构中<head>标签里有个属性lang="en",它的意思是表示本页面是英文的.浏览器会提示是否需要翻译
五.网页的基本标签
1.标题标签:
1)标题标签表示一段文字的标题和主题,并且支持多层次的内容结构
2)HTML共提供了六级标签<h1>--<h6>,并赋予了标题一定的外观,所有标题字体加粗,<h1>字号最大,<h6>字号最小
语法:
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
2.段落标签和换行标签:
1)段落标签<p>内容</p>表示一段文字等内容:一个段落中可以包含多行文字,文字内容将随浏览器窗口的大小自动换行
2)换行标签<br/>表示强制换行显示,该标签比较特殊,没有结束标签,直接使用<br/>表示标签的开始和结束
说明:像换行标签<br/>这样没有结束标签,直接使用<br/>表示标签的开始和结束的标签叫做单标签.成对出现的,如<html></html>这样有开始标签和结束标签的标签叫做双标签
3.水平线标签:
水平线标签<hr/>表示一条水平线,注意该标签与<br/>标签一样.比较特殊,没有结束标签
4.字体样式标签:
<strong>字体变粗</strong> <em>字体倾斜</em>
5.注释和特殊符号:
<!--注释内容-->
当页面的HTML结构复杂或内容较多时,需要添加必要的注释方便代码阅读和维护.同时,有时为了调试,需要暂时注释一些不必要HTML代码
特殊符号:
由于一些符号已作为HTML的语法符号,因此要在页面中显示这些特殊符号,就必须使用相应的HTML代码表示,这些特殊符号对应的HTML代码被称为字符实体,这些字符实体都以"&"开头,以";"结束
| 特殊符号 | 字符实体 |
| 空格 | |
| 大于号(>) | > |
| 小于号(<) | < |
| 引号(") | " |
| 版权符号 | © |
六.图像标签
1.常见的图像格式
1)JPG格式:
>JPG(JPEG)格式图像在Internet上被广泛支持的图像格式
>此格式最适合用于摄影或连续色调图像的高级格式,这是因为JPG文件可以包含数百万种颜色
>通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡
2)GIF格式:
>GIF格式图像是网页中最广泛,最普遍的一种图像格式
>GIF格式文件支持透明色,使得GIF格式在网页的背景和一些多层特效的显示上用得非常多,还支持动画,这是它最突出的一个特点,因此GIF格式图像在网页中应用非常广泛
3)BMP格式:
>BMP格式图像在Windows操作系统中使用得比较多
>BMP格式图像文件格式与其他Microsoft Windows程序兼容
>它不支持文件压缩,也不适用于Web页
4)PNG格式:
>PNG格式是20世纪90年代中期开始开发的图像文件储存格式,它兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特性
>PNG是一种新兴的Web图像格式
2.图像标签的基本语法:
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
语法解析:
1)src属性表示图片路径
2)alt属性指定的替代文本,表示图像无法显示时替代显示的文本,这样,即使当图像无法显示时,用户还是可以看到网页丢失的信息内容
3)title属性可以提供额外的提示或帮助信息,当鼠标移至图片上时显示提示信息
4)width和height两个属性分别表示图片的宽度和高度,如果不设置那么图片默认显示原始大小
在实际的网站开发中,通常会把网站应用到的图片统一存放在一个文件夹中
七.超链接标签
1.基本用法
语法:
<a herf="链接地址" target="目标窗口位置">链接文本或图像</a> <!--语法解析: 1)herf:表示链接地址的路径 2)target:指定链接在哪个窗口打开,常用的取值有"_self"(自身窗口),"_blank"(新建窗口) 3)超链接即可以是文本超链接,也可以是图像超链接-->
根据链接地址是指向站外文件还是站内文件,链接地址又分为结对路径和相对路径:
1)绝对路径:指向目标地址的完整描述,一般指向本站点外的文件
2)相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要一个完整的URL地址的形式
站内使用相对路径时常用到两个特殊符号:
>"../"表示当前目录的上级目录
>"../../"表示当前目录的上上级目录
注:当超链接href链接路径为"#"时,表示空链接
2.超链接的应用场合
1)页面间链接:
页面间链接就是从一个页面链接到另一个页面
2)锚链接:
锚链接常用于目标页内容很多,需定位到目标页内容的某个具体位置时
<a href="#marker">当前位置</a> <a name="marker">目标位置</a>
3.功能型性链接:
功能型链接比较特殊,当单击该链接时不是打开某个网页,而是启动本机自带的某个应用程序
<a herf="www.baidu.com">百度</a>
块元素特性:无论内容多少,该元素独占一行
行内元素特性:内容撑开宽度,左右都是行内元素的可以排在一行
房上的猫：HTML5基础的更多相关文章
- html5基础的常用的技巧
html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...
- HTML5基础知识及相关笔记
HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...
- html5 基础入门
html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...
- HTML5 基础测试题
HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...
- HTML5基础——笔记
HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- 房上的猫：java基础知识部分知识点
1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...
- html5基础知识点
1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...
- html5基础知识
html5+css3 html5定义很多简便东西和宽松语法: 文档头: <!doctype html> 文档编码: <meta cha ...
- HTML5 基础
1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...
随机推荐
- phpcms网站搬家 至 服务器 完整并且详细过程
上传服务器空间后,才会通过搜索域名进行网页访问. 上传的过程肯定会有很多东西要修改,例如数据库怎么上传.路径怎么修改等..... 这就让大家看下,自己不断尝试后的完整搬家步骤!!! 一.上传服务器 ( ...
- 微信小程序语音与讯飞语音识别接口（Java）
项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 而微信小程序上传的文件格式是silk的,而讯飞接口能识别wav 格式的文件,所以需要将小程序上传的silk文件转成wav ...
- 数据结构之【栈】+十进制转d进制（堆栈数组模拟）
其实这篇文章开出来主要是水文章%% %% 栈--后进先出的婊 特点:只能在某一端插入和删除的特殊的线性表 操作:进栈--PUSH->向栈顶插入元素 出栈--POP-->将栈顶元素删除 实现 ...
- 阿里云轻量应用服务器Lamp部署php工程踩过的坑
第一次写博客,也不知道写什么,但是想坚持写博客来提升自己,不喜勿喷. 切回正题,使用阿里云的轻量应用服务器Lamp其实非常方便,价格也很便宜,一键购买需要的环境都帮你搭配好了,剩下的就是自己修改一下数 ...
- java 之 职责链模式（大话设计模式）
目前很多OA办公自动化软件,加快了办公效率,简化流程.相信很多小伙伴都用过.笔者了解到的大多数办公软件底层实现流程大多数采用的都是Activity或者是JBPM框架. 今天笔者要说的也是类似于流程的一 ...
- spring boot系列03--spring security (基于数据库)登录和权限控制（上）
这篇打算写一下登陆权限验证相关 说起来也都是泪,之前涉及权限的比较少所以这次准备起来就比较困难. 踩了好几个大坑,还好最终都一一消化掉(这是废话你没解决你写个什么劲
- Android开发之漫漫长途 Ⅷ——Android Binder（也许是最容易理解的）
该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...
- OJ随笔——【1088-N!】——同余定理
题目如下: Description 请求N!(N<=10000),输出结果对10007取余输入每行一个整数n,遇到-1结束.输出每行一个整数,为对应n的运算结果. Sample Input ...
- 中小企业为什么要上HR系统
人力资源不不过公司资源.也是一种社会资源. 越来越多的企业已将人作为一种重要的资源来看待,资金和技术则是其次.所以企业内部科学的全面的人力资源管理也因此处在了十分重要的位置上. 现在的人力资源是服务于 ...
- Java web轻量级开发面试教程的前言
本文来是从 java web轻量级开发面试教程从摘录的. 为什么要从诸多的Java书籍里选择这本?为什么在当前网络信息量如此大的情况下还要买这本书,而不是自己通过查阅网络资料学习?我已经会开发Java ...