第一章 HTML基本标签
1.HTML:
HTML:超文本标签语言(标签又称标记、元素)。
浏览器:“解释和执行”HTML源码的工具 (运行网页的工具APP)。
客户端:享受服务的计算机
服务器:提供服务的计算机
2、基本框架(网页最小结构)
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页内容:这是网页的最小结构
</body>
</html>
3、<head> 头部
(1)<title>网页标题:网页摘要信息利于浏览器解析和搜索引擎搜索
(2)<meta /> 数据元 文档的信息描述
[1]描述文档类型和字符编码
[2]描述搜索:关键字和描述
注:charset编码方式——w3c web网页语言 统一规范 网页 全世界 utf-8、只想服务 于国内 例如 eg:中文 编码 该gbk gb2312
例如:
<head>
<title>淘宝网</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name= "keywords" content= "淘宝,网上购物,交易市场" />
<meta name= "description" content= "淘宝网,提供各类服饰、美容、家居、数码、……" />
</head>
4、<body>身体,网页内容(可以是文本、图像等 )
5、HTML标签分类
块级标签:显示为“块”状,前后隔一行 ,一块里可以包含多行【独占一行、能够控制的内、外边距 、宽度浏览器始终是一样大的、display:block 默认block】
行级标签:按行逐一显示 ,一行中可以包含图文内容。【默认不换行文本内容都在同一行上面、高,行高及外边距和内边距部分可改变、display:inline; 默认是行内元素inline】
分类好处:方便布局设计
6、块级标签
(1)基本块级标签
<h1>—<h6>:标题标签,<h1>最大,<h6>最小 —— h1只能在页面出现一次, 出现多次不利于我们的页面排名,多的认为作弊,不利于搜索引擎搜索
<p>:定义段落
<hr />:定义水平线
(2)用于布局的块级标签
[1]有序列表:默认为阿拉伯数字
<ol>
<li>列表项</li>
</ol>
[2]无序列表:默认为小圆点
<ul>
<li>列表项</li>
</ul>
[3]描述标签
<dl>
<dt>描述标题</dt>
<dd>描述内容</dd>
</dl>
[4]表格标签:<table>\表格行<tr>\表格列(单元格)<td>
<table>
<tr>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
</table>
[5]表单标签:<form>
<form method="post|get" action="url地址">
表单内容
</form>
[6]块标签:<div>作为容器来使用
7、行级标签
图片标签:<img src="图片路径" alt="图片不显示的提示文字" title="鼠标悬浮提示文字" align="对齐方式" />—— alt 提供给搜索引擎抓取,align图后文字对其方式-值可为居图中absmiddle,right,left,宽高-width/height
范围标签:<span> </span>
换行标签:<br /> 不建议使用
字体标签:<font> 作用改变文字字体内容 不建议使用 【size = "文字大小" color ="文字颜色"】。如果只是为了修饰文本 就可以使用
(1)strong b 标记的区别
strong 文字显示粗体状态 强调 文章中的某一些重要词 SEO收录有一定影响 对我们站点排在百度首页有一定影响
b 文字显示粗体状态 没有什么大的作用只是修饰页面字体而已
(2)em i 标记的区别
em 斜体 强调(相对strong来说弱一点) SEO页面有一定作用
i 斜体 没有强调 用在项目里面比较多
预格式化文本标签 ——<pre>、<meta>、<mark>、<small>
<pre> 作用:保持文本原有的格式
文本移动标记:<marquee > 由于没有语义、代码多,现在已经被w3c抛弃
a1. direction滚动方向 默认向左"left" right右 down下 up上
a2.文本背景 bgcolor="red"
a3.behavior滚动方式 scroll 默认向左一直滚动,slide,单向一次停止,来回走alernate
a4.loop 循环次数 loop="自定义次数" 如果true 无限循环
a5.scrollAmount="速度值" 文本速度值
a6.鼠标移入停止 onmouseover=this(指的是marquee当前标记).stop() 停止,鼠标移入marquee让它自己停止动画
a7.鼠标移出执行动画 动起来 onmouseout=this.start() 开始动
8、XHTML的基本规范
(1)标签名和属性名称必须小写
(2)HTML标签必须关闭
(3)
标签必须正确嵌套
(4)必须添加文档类型声明 【!DOCTYPE】
(5)属性值必须用引号括起来
9、实际开发的4种块状结构
(1)div-ul(ol)-li :常用于分类导航或菜单等
(2)div-dl-dt-dd :常用于图文混编的场合
(3)table-tr-td :常用于图文布局或显示数据
(4)form-table-tr-td:常用于布局表单
第一章 HTML基本标签的更多相关文章
- WEB的进击之路-第一章 HTML基本标签(1)
一.HTML简介 超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包括"头&q ...
- [OpenGL红宝书]第一章 OpenGL概述
第一章 OpenGL概述 标签(空格分隔): OpenGL 第一章 OpenGL概述 1 什么是OpenGL 2 初识OpenGL程序 3 OpenGL语法 4 OpenGL渲染管线 41 准备向Op ...
- 《Django By Example》第一章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:本人目前在杭州某家互联网公司工作, ...
- 《Entity Framework 6 Recipes》翻译系列(2) -----第一章 开始使用实体框架之使用介绍
Visual Studio 我们在Windows平台上开发应用程序使用的工具主要是Visual Studio.这个集成开发环境已经演化了很多年,从一个简单的C++编辑器和编译器到一个高度集成.支持软件 ...
- Asp.Net MVC4 + Oracle + EasyUI 学习 第一章
Asp.Net MVC4 + Oracle + EasyUI 第一章 --操作数据和验证 本文链接:http://www.cnblogs.com/likeli/p/4234238.html 文章集合 ...
- 【vue.js权威指南】读书笔记(第一章)
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
- SpringMVC从入门到精通之第一章
第一节 简介:SpringMVC是Spring框架的一个模块,Spring和SpringMVC无需通过中间整合层进行整合.SpringMVC是基于MVC的WEB框架.MVC设计模式在B/S下的应用: ...
- 精通Web Analytics 2.0 (3) 第一章:网站分析的新奇世界
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第一章:Web Analytics 2.0的新奇世界 多年以来,我们很清楚的知道,网站分析能够真正的改革网络上业务的完成方式.那 ...
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
随机推荐
- Android Studio自动排版的两种方法
Android Studio这样的集成开发环境虽然代码自动化程度很高,但是自动化程度高导致人的自主性就下降了,而且总是依赖编辑器的功能也会搞得代码排版很别扭. 最难受的是你在Android Studi ...
- day0319 模块
一.序列化 将原本的字典,列表等内容转化成一个字符串的过程就是序列化. 序列化的目的: 1.以某种存储形式使自定义对象持久化 2.将对象从一个地方传递到另一个地方. 3.程序更具有维护性 二. Jso ...
- 转:eval(data)和eval("("+data+")")
http://www.w3school.com.cn/jsref/jsref_eval.asp JavaScript eval() 函数:eval() 函数可计算某个字符串,并执行其中的的 JavaS ...
- 2018/04/14 理解oAuth2.0
最近都近没有更新博客了,卡在 oAuth 上了. 之前公司做统一身份的认证,不了解 oAuth 的我在这卡了两天. 于是决定仔细研究原理,理论指导实践. -- 什么是 oAuth ? 简单来说 oAu ...
- 【Python全栈-HTML】HTML入门
HTML入门介绍 参考: https://www.bilibili.com/video/av21663728/?p=339 http://www.cnblogs.com/yuanchenqi/arti ...
- 【python基础】os.path模块常用方法详解
os.path模块 主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法. 更多的方法可以去查看官方文档:http://docs.python.org/library/os.path. ...
- MVVM软件设计模式(转)
add by zhj: MVVM是一种软件设计模式,这里要说一下设计模式,我们通常所的设计模式是指面向对象中的设计模式,用在面向对象编程语言中.但软件设计模式是更高一个级别的设计模式,两者不是同一个东 ...
- oracle中varchar2(2)存不了一个汉字的原因
错误提示: 一个汉字占了三个字节,而不是两个,这跟字符集有关. 查一下字符集:select userenv('language') from dual; 结果显示,本机Oracle的字符集是UTF-8 ...
- jquery实现简单的弹出框
弹出框本身是一个div,默认是隐藏不展示的,在需要弹框的时候使其显示,并浮在当前页面之上 弹框样式: .tanchuang { width: 100%; height: 100%; display: ...
- office excel中怎么添加批注及修改批注用户名
office excel中怎么添加批注及修改批注用户名 参考:https://jingyan.baidu.com/article/c33e3f48a52853ea15cbb5db.html 1. of ...