web 基础(一) HTML
web 基础(一) HTML 与 XHTML
一、HTML介绍
HTML( Hyper Text Markup Language)指的是超文本标记语言,是用来描述网页的一种语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
(一)特点:
- 简易性。超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
- 可扩展性。超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
- 平台无关性。虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
- 通用性。另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
二、XHTML
XHTML(eXtensible HyperText Markup Language) 指的是可扩展超文本标记语言,是将超文本标记语言HTML(HyperText Markup Language)作为XML应用而重新定义的标准。
(一)、HTML和XHTML之间的差异
- XHTML 元素必须被正确地嵌套。 一般html网页可以“<b><i>主要内容</b></i>”这是个不严格,在XHTML是错误的;正确的在xhtml标准中就必须要求这样“<b><i>主要内容</i></b>”。
- XHTML 元素必须被关闭。如一个HEAD里的例子,“<meta name="keywords" content="关键字" > ”像这个标签在html是可行的,但是为了xhtml的标准所以必须关闭如“<meta name="keywords" content="关键字" /> ”
- 标签名必须用小写字母。在以前的网页中对于很多标签通常使用大写或大小写的编排方式,但是在为了WEB标准现在标签都要求小写统一
- XHTML 文档必须拥有根元素。意思就是一什么标签开始就要用什么标签结束,如<body>开始就要在内容结束用</body>来关闭。
- 对于图片需添加alt属性。以前很多时候在网页里显示图片img标签里都可加可不加alt属性,但是现在xhtml要求必须加上alt属性,不然xhtml验证将提示错误,哪怕alt的值为空都可以。加上alt可以对图片进行文字说明,可让搜索引擎辨别图片内容,是优化网页好地方。
三、HTML常用标签
上面列出了HTML 常用的标签,详细标签可访问:HTML 标签(按功能排序)。
四、元素的常用属性
上面是 HTML文档里标签的共同属性,每个标签不仅有共同属性,还有它们各自特有的属性,详细内容可以访问:元素的其他属性。
五、头部
一个完整的HTML 文档,分别有头部和主题部分,头部 <head>元素包含了所有的头部标签元素。可以添加在头部区域的元素标签为: <title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>.。
- <title>:定义文档的标题。浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上, <title>文档标题</title>
- <style>:用于为 HTML 文档定义样式信息。在 style 中,可以规定在浏览器中如何呈现 HTML 文档。
- <meta>:元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
- <link>:标签定义了文档与外部资源之间的关系。最常见的用途是链接样式表, <link rel="stylesheet" type="text/css" href="style.css" /> 。
- <script>:用于加载或编写脚本文件,如: JavaScript。
- <noscript>:用来定义在脚本未被执行时的替代内容(文本)。
- <base>:为页面上的所有链接规定默认地址或默认目标。
六、主体
主体部分是 HTML 文档的重要部分,该部分编写的代码最终会呈现给客户。<body> 元素定义文档的主体。<body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。其中常见的有:
1、定义标题:<h1> -> <h6>
<h1> 定义最大的标题。 <h6> 定义最小的标题。标题是通过 <h1> -> <h6> 标签进行定义的。如下所示:
<h1>这是h1标题。</h1>
<h2>这是h2标题。</h2>
<h3>这是h3标题。</h3>
2、定义段落:<p>
定义一个段落,如果在不产生一个新段落的情况下进行换行(新行),使用 <br> 标签。如下所示:
<p>这个<br>段落<br>演示了分行的效果</p>
3、超链接:<a>
定义超链接,用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性,它指示链接的目标。如下所示:
<a href="https://www.baidu.com/">百度</a>
4、图片:<img>
向网页中嵌入一幅图像,<img> 标签有两个必需的属性:src 属性 和 alt 属性。src 指 "source"。源属性的值是图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本。如下所示:
<img src="图片的URL" alt="图片" />
5、文档的分区或节点:<div>
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。如下所示:
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
七、示例
HTML 规范的文档格式:
<!DOCTYPE html> -----------------》 文档的定义类型
<html lang=en> ------------------》 HTML 文档
<head> ------------------------》 文档头部
<meta charset=utf-8> --------》 定义文档字符集 utf-8
<title>HTML</title> ---------》 定义一个标题
</head>
<body> ------------------------》 网页主体,网页可见内容
</body>
</html>
HTML 示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>第一个网页</title>
</head>
<body>
<h1>这是第一个网页</h1>
<p>这是一个段落</p>
<a href="https://www.baidu.com/">跳转到百度</a>
</body>
</html>
web 基础(一) HTML的更多相关文章
- Golang友团无闻Go语言Web基础视频教程
教程内容:GO语言资料Golang友团无闻Go语言编程基础Golang友团无闻Go语言Web基础教程 Go语言Web基础教程列表:[Go Web基础]12Go Web 扩展学习.mp4[Go Web基 ...
- HT for Web基础动画介绍
在上一篇<基于HT for Web矢量实现3D叶轮旋转>一文中,我略微提了下HT for Web基础动画的相关用法,但是讲得不深入,今天就来和大家分享下HT for Web基础动画的相关介 ...
- Web基础开发最核心要解决的问题
Web基础开发要解决的问题,往往也就是那些框架出现的目的 - 要解决问题. 1. 便捷的Db操作: 2. 高效的表单处理: 3. 灵活的Url路由: 4. 合理的代码组织结构: 5. 架构延伸 缓存. ...
- web基础--html
WebBasic 1.web应用体系 课程大纲 1.web基础:做网页 2.结构: a.html 勾勒网页结构及内容 b.css ...
- java web基础环境搭建
java web基础环境包括:(1)servlet容器也即tomcat(2)jre即java程序运行环境 环境变量配置:分别下载jdk和tomcat安装包. jdk环境变量配置: 第一步:系统环境变量 ...
- Web基础知识和技术
WEB是一个外延广泛的概念,不单单指网站,乌徒帮专注拥有WEB界面的网站开发,帮助初学者或已经进入开发的朋友们提供参考讨论平台,然而并不一定能将所有的WEB知识讲全讲透,只是能满足初涉者的建站需求,能 ...
- java web基础 --- URL重定向Filter
java web基础 --- URL重定向Filter httpRequest.getRequestDispatcher("/helloWorld").forward(httpRe ...
- (0)写给Web初学者的教案-----Web基础
0,Web基础 一. What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...
- web基础系列(五)---https是如何实现安全通信的
https是如何实现安全通信的 如果有不正确的地方,还望指出! web基础系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 回顾 总结几个概念(具体描述可以看上一篇文章) 数字 ...
- web基础笔记整理(一)
一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...
随机推荐
- 04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的.兼容多浏览器的JavaScript库.# 2. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地 ...
- python库-collections模块Counter类
Counter类主要是用来跟踪值出现的次数.它是一个无序的容器类型,以字典的键值对形式存储,其中元素作为key,其计数作为value. demo: all_words = [] # 列表里面是汉字(可 ...
- Java实现 LeetCode 747 至少是其他数字两倍的最大数(暴力)
747. 至少是其他数字两倍的最大数 在一个给定的数组nums中,总是存在一个最大元素 . 查找数组中的最大元素是否至少是数组中每个其他数字的两倍. 如果是,则返回最大元素的索引,否则返回-1. 示例 ...
- Java实现 LeetCode 554 砖墙(缝隙可以放在数组?)
554. 砖墙 你的面前有一堵方形的.由多行砖块组成的砖墙. 这些砖块高度相同但是宽度不同.你现在要画一条自顶向下的.穿过最少砖块的垂线. 砖墙由行的列表表示. 每一行都是一个代表从左至右每块砖的宽度 ...
- Java实现 LeetCode 207 课程表
207. 课程表 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹配来表示他们: [0,1] ...
- Java实现 LeetCode 79 单词搜索
79. 单词搜索 给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中"相邻"单元格是那些水平相邻或垂直相邻的单元格. ...
- CSS 简介/特点/优势/给特定浏览器提供不同样
1.CSS简介 CSS全称Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”,通常称为CSS样式或者样式表.CSS是一些纯文本内容,文件格式为.css. 2.CSS特点 ...
- 更多的bash shell命令
1.探查进程:ps 2.实时监控进程:top 3.结束进程:kill.killall 4.查看挂载媒体:mount 5.移除设备:nmount 6.查看已挂载设备的使用情况:df 7.显示特定磁盘的使 ...
- python—socket编程
一:客户端/服务器 架构 1.硬件C/S架构:(例如,打印机) 2.软件C/S架构:互联网中处处是C/S架构 腾讯作为服务端为你提供视频,你得下个腾讯视频客户端才能看它的视频 C/S架构与socket ...
- iOS-UIViewController创建的几种方法和UIWindow的介绍
在上一篇笔记中<iOS-程序启动原理和UIApplication>,http://blog.csdn.net/yang198907/article/details/49735531 在程序 ...