前端之HTML

最新推荐文章于 2022-07-24 22:38:30 发布

dweblover

最新推荐文章于 2022-07-24 22:38:30 发布

阅读量519

点赞数

分类专栏： h5 文章标签：前端 H5 块级元素

本文链接：https://blog.csdn.net/dweblover/article/details/83410231

版权

h5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.初识HTML
(1) HTML是一种超文本标记语言不是编程语言
(2) HTML是用来描述网页的一种的语言
(3) HTML遵循W3C标准，W3C是万维网联盟，它规定了H5是结构，css3是表现，javascript是行为结构就像是人，表现是人穿上各种不同款式的衣服，行为就是人可以唱歌跳舞简单来说就是能动起来

2.认识专业术语
(1) www是环球信息网的缩写英文名是Wolrd Wide Web它是一个由许多互相链接的超文本组成的系统，通过互联网进行访问。例如像我们输入百度就可以进入百度
(2) HTTP超文本传输协议，它是www浏览器和www服务器之间的应用层通信协议
(3) URL统一资源标识符，负责给万维网上每一个资源进行定位
(4) DNS域名系统，因特网上作为域名和IP地址相互映射的一个分布式数据库能够使用户更方便的访问互联网，而不用去记能够被机器直接读取的IP地址
（5） JavaScript脚本语言，是一种动态类，型弱类，型基于原型的语言
（6） CSS层叠样式表是一种用来表现网页样式的语言

3.HTML常用的开发软件
(1)WebStorm
(2)sublime text3
(3)HBuilder
(4)Dreawearver

4.HTML的基础知识
(1)标签（必须成对出现即要有开始标签也要有结束标签）
例如：

<p>我是一个段落标签</p>
<p>起始标签</p>结束标签
 从起始标签到结束标签中的内容就是元素码片

<h1>一级标题标签</h1>
  <h2>二级标题标签</h2>
  <img><!--图片链接标签-->
  <a><!--链接标签-->
  <br/><!--换行标签-->
  <hr/><!--水平线标签-->
  <table><!--表格标签-->
  <ul><!--无序列表标签-->
  <ol><!--有序列表标签-->
  <div><!--容器标签-->

常见的标签有更多标签以及用法可以参考w3c离线参考手册

（2）HTML构成

 <!-- 声明部分 -->
<!doctype html>
<html>
<head><!-- 头部 -->
<meta charset="utf-8">
<title>js练习</title><!-- 标题 -->
</head>
<body>
</body><!-- 主体 -->
</html>

(3)name属性

<meta charset="utf-8"/><!--声明文档中使用的字符编码-->
  <meta name="keywords" content="前端 H5"><!--告诉搜索引擎网页搜索关键字-->
  <meta name="description" content="这是最主流的技术"><!--告诉搜索引擎网页主要内容-->
 <meta name="author" content="CSDN"><!--告诉搜索引擎网页制作者-->
<meta name="copyright" content=""><!--告诉搜索引擎网页版权信息-->
<!--一般建一个网站这些属性都必不可少-->

（4）标准文档流

什么是文档？
一个文档就是一个完整的页面例如一个index.html就是一个文档
什么是文档流？
文档流处在页面的最底层它表示页面中的位置。我们所创建的元素默认都处在文档流中
元素在文档流中的特点？
元素在文档流中的特点要分成两类：一类是块元素，一类是内联元素
块元素在文档流中是独占一行的且宽度默认为父级宽度，内联元素在文档流中是只占自身大小且不换行的同时也不能设置行和高

<!doctype html>
<html>
<head><!-- 头部 -->
<meta charset="utf-8">
<title>练习</title><!-- 标题 -->
<style type="text/css">
h1,h2{
	background-color:#3FF;
}
span,a{
	background-color:#6F6;
}
</style>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题猜猜我在哪里</h2>
<span>我是span标签</span>
<a href="#">我是一个链接</a>
</body><!-- 主体 -->
</html>
自己动手敲敲看，看看有啥区别，自己尝试给它们加上width和height看看有啥效果，一定要多动手哟！！！脱离文档流的方法有浮动和定位我会继续在后面的博文中介绍，感兴趣的可以关注我哟

（5）块级元素和内联元素
1.常见的块级元素

<p><div><h1>~<h6><table><ul><ol>

2.常见的内联元素

 <span><a><img><i><label>

3.块级元素和内联元素的区别
内联元素不会换行不能设置行和高默认就是文字高度
块元素独占一行能设置行高如果不设置行高默认就是父元素的100%
块元素和内联元素可以互相转换如给一个<span>标签设置一个display:block;则成为块元素；给一个<p>标签设置一个display:inline;则成为内联元素；
(6)认识显示模式
浏览器为了实现对标准网页和传统网页的兼容，分别制定了几套网页显示方案，这些方案就是浏览器的显示模式。浏览器能够根据网页文档类型来决定选择哪套显示模式对网页进行解析.

（1）IE浏览器支持两种显示模式:标准模式和怪异模式。在标准模式中，浏览器会根据W3C制定
的标准来显示页面;而在怪异模式中，页面将以IES显示页面的方式来呈现网页，以保证与过去非标准网页的兼容。
（2）Firefox支持三种显示模式:标准模式、几乎标准的模式和怪异模式。其中几乎标准的模式对应于IE和Opera的标准模式，该模式除了在处理表格的方式方面有一些细微差异外，与标准模式基本相同。
（3））Opera支持与IE相同的显示模式。但是在Opera9版本中怪异模式不再兼容IE5盒模型解析方式。

dweblover

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之HTML

1.初识HTML(1) HTML是一种超文本标记语言不是编程语言(2)HTML是用来描述网页的一种的语言(3)HTML遵循W3C标准，W3C是万维网联盟，它规定了H5是结构，css3是表现，javascript是行为结构就像是人，表现是人穿上各种不同款式的衣服，行为就是人可以唱歌跳舞简单来说就是能动起来2.认识专业术语(1) www是环球信息网的缩写英文名是Wolrd Wide...
复制链接

扫一扫