HTML5入门(---------------HTML——基本骨架--------------)
HTML基础
一、HTML
超文本标记语言、英文全拼:HyperText Markup Language。负责网页的语义描述。
二、HTML基本骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Doctype:文本类型 如果仅写:html那么这代表是html5的网页类型,它符合w3c的标准。
Html:根目录标签,包含了网页的所有内容
Head:负责页面的属性配置,不做任何显示性内容操作。
Meta:翻译为“元”,代表基本属性。
Charset:字符集,它是告诉浏览器当前网页使用的是哪一种编码标准
能够支持中的编码有两种:
第一种utf8国际编码
第二种gb2312中文编码,中文的文本库加上外语的一些通用字符语言
Utf8编码>gb2312编码(文本库内容),utf8每个汉字占用3个字符,在gb2312种只占2个字符。
使用gb2312优点: 小,速度快!
以后我们的课程中一般就会使用utf8编码,因为我们懒,我就不想改!
注意:文本保存的编码格式一定要和页面内部声明的编码格式完全相同,不然会出现乱码!!!!
Description:网页描述,提供给用户看到页面的介绍,利于搜索引擎优化(SEO)
Title:网页标题、搜索引擎优化。
Body:网页内容标签,他就是一个大的容器。我们所有语义化标签都在body中。
三、HTML中基本的语法特性
1.在html中对换行以及缩进不敏感,但是一定要注意网页中结构的嵌套!
2.Html中空白折叠现象,html文本中所有的换行、缩进、空格最终都会折叠为一个空格来展示。
3.Html中标签一定要严格封闭。
四、html中文本标签
1.h1-h6标签,标题标签
2.p标签:段落标签,一般只存放文本、图像或者a链接标签等。注意:p标签中不要放h标签。
3.stong:文本加粗
4.I:文本倾斜
5.Em:文本倾斜
6.Big:大字体标签
7.Small:小字体标签
8.Sup:添加文本上标
9.Sub:添加文本的下标
从3-9为文本格式化标签,为了突出着重描述某个或某段字体。
五、图像标签
Img:英文全拼image-图像。
Src:英文全拼 source-来源路径,这个属性我们写图像的路径。
绝对路径:当前文件所在你计算机的完整路径。
相对路径:首先要有参照路径,参照路径就是当前html页面所在的文件路径。然后根据参照路径查找图片路径
Alt:提示属性,图片在不显示的情况下,给用户的提示文字。
Img标签在写路径时一定要加上扩展名,而且能够支持的图片类型有:jpg、jpeg、png、bmp、gif。 最好加上width和height属性,这是为了性能考虑。
六、锚点链接标签
a标签:超级链接标签,是联通各个页面之间的锚点。
Href属性:将要打开查看的链接地址。
Title属性:当鼠标悬停时的给用户看的提示文本。
Target属性:_blank设置链接打开时将使用新的页面
页内锚点:需要有两个a链接标签相互对应,并且其中之一的a链接需要设置name或者id属性
例如:
<a href="#lsyg">查看历史沿革</a>
<h1><a name="lsyg">历史沿革</a></h1>
跨页面的锚点跳转,例子:
<a href="04-页面内的锚点.html#bxtj">办学条件</a>
七、列表
无序列表:ul标签,里面包含着li标签。li标签代表的是每一项。
注意:li标签是不可以单独写的,必须嵌套在ul或者ol中.
有序列表:ol标签,和无序列表类似。
无序列表与有序列表的不同点:无序列表在页面中的语义是无序的,有序列表在页面中的语义是有顺序我们可以看的到的。
注意:ul或者ol中只能放li标签,但是li标签中可以放任何元素。
自定义列表:dl标签,里面包含了两个标签dt和dd。
dt标签:列表的小标题。
Dd标签:列表项。
八、table表
Table标签:表的语义
Tr:tablerow 行标签,代表一行
Td: 列标签,代表一列。
一般td标签被包含在tr标签中
Th:表中标题标签。
九、Div
Html中非常非常重要的一个标签,从我们单独拿出来说就足以看得出对它的重视。
在div标签中可以放任何的标签,包括div标签。
Span标签:普通的文本标签,是行内标签。它主要是给某段文字设置不同的演示,体现出文本的不同需求。
十、其他标签
Br标签:换行标签,
Hr标签:水平分割线
: 空格符号
© 版权符号
HTML5入门(---------------HTML——基本骨架--------------)的更多相关文章
- HTML5入门以及新标签
HTML5 学习总结(一)--HTML5入门与新增标签 目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- HTML5入门要点
要点 HTML5是HTML的最新版本.通过引入心的标签.新的语义和媒体元素,同时要依赖一组支持Web应用的JavaScript库 XHTML不再是Web页面开发标准.开发人员和W3C组织觉决定还是继续 ...
- 2018年html5入门到精通教程电子书百度云盘下载共22本
名称 查看 <HTML5启动和运行>(HTML5.Up.and.Running)扫描版[PDF] 下载 <Pro HTML5 Performance>(Pro HTML5 Pe ...
- 给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- html5入门
1.canvas标签 <canvas id="myCanvas"></canvas><!--canvas标签定义图形,比如图标和其他图像--> ...
- 【活动】不用买书,不用花钱,可以免费看HTML5入门连载了
清华大学出版社推出的<HTML 5网页开发实例详解>适合HTML 5开发初学者和前端开发工程师.本书一经上市,就获得了读者的一致好评,为感谢读者,推出本书的连载活动. 本书术新颖.与时 ...
- HTML5入门4---HTML5 与 HTML4 同一网页的不同写法
HTML4写法 css: body { font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana ...
随机推荐
- 关于依赖注入IOC/DI的感想
之前一直不明白依赖注入有什么好处,甚至觉得它是鸡肋,现在想想,当时真是可笑. 这个想法正如同说接口是没有用处一样. 当整个项目非常庞大,各个方法之间的调用非常复杂,那么,可以想象一下,假设说没有任何的 ...
- CSS的::selection使用方法
请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm CSS改变默认文本选中的颜色的方法 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个 ...
- WePayUI 快快尝鲜体验
好久没有更新博客了... 时间真的很快~~~ 不废话了..干货会直接上~~~ WePayUI是什么 WePayUI 由微信支付为服务商和商户量身打造,用于快速制作符合微信支付规范的Web页面.WePa ...
- javascript中BOM部分基础知识总结
一.什么是BOM BOM(Browser Object Document)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: 由于BOM主要用于管 ...
- 使用jq插入节点
.append()和.appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插 ...
- Android开发6:Service的使用(简单音乐播放器的实现)
前言 啦啦啦~各位好久不见啦~博主最近比较忙,而且最近一次实验也是刚刚结束~ 好了不废话了,直接进入我们这次的内容~ 在这篇博文里我们将学习Service(服务)的相关知识,学会使用 Service ...
- Linux安全基础:find命令的使用
find 命令用于查找文件系统中的指定文件. *命令格式:find pathname -option [-print -exex -ok] 1.pathname要查找的目录路径 ~表示home目录 . ...
- 从 HTTP 到 HTTPS - IIS 部署免费 HTTPS
这篇文章首发于我的个人网站:听说 - https://tasaid.com/,建议在我的个人网站阅读,拥有更好的阅读体验. 这篇文章与 博客园 和 Segmentfault 共享. 前端开发QQ群:3 ...
- MDM证书申请的流程
MDM证书申请的流程 整个流程分为两部分:vendor,customer. 一.Vendor 1.成为一个 MDM Vendor 1) 首先你需要拥有一个 Apple Enterprise accou ...
- 从英文变形规则计算到Restful Api设计
➠更多技术干货请戳:听云博客 一天在研究Restful API设计,命名的时候我总是很纠结,我相信大多数人也有这种感觉,不是说想不出来某个单词怎么写的问题,像我这种没事背单词背到13000词量的人也要 ...