学习HTML5一周的收获1

HTML5的基本结构

学习了title标签（显示网站名称），link标签（链接文件，可做网页美化）

快捷键：Ctrl+/ 注释

学习【meta标签】

1、charset属性：单独使用，设置文档字符集编码格式。

>>>写法：<meta charset="UTF-8">

>>>常见的中文编码格式：

GB-2312：国标码，简体中文

GBK：扩展的国际码，简体中文

UTF-8：万国码Unicode码，基本兼容各国语言

2、http-equiv属性：需配合content属性使用，主要声明浏览器如何解释编译文件。

>>>写法：<meta http-equiv="属性值"content="属性值详细内容">

>>>常见属性值：content-Type HTML4.01之前的文档内容编码声明

refresh 网页刷新 set-cookie设置浏览器cookie缓存

3、name属性：需配合content属性使用。主要用于给搜索引擎提供必要信息。

>>>写法：<mate name="属性值" content="属性值详细内容">

>>>重要属性值：auther 作者，声明网站作者，常用公司网址表示

keywords 网站关键字，多个关键字，用英文逗号隔开

description 网页描述，搜索引擎显示在title下的描述内容

 

*http-equiv和name属性，必须与content属性配合使用，前两者只是声明即将修改哪些属性值，而实际的属性值内容，在content中描述。

<!--作者-->

<meta name="author" content="http://www.jredu100.com"/>

<!--网页关键字-->

<meta name="keywords" content="heml5,网页，web前端开发" />

<!--网页描述-->

<meta name="description" content="这是我在捷瑞教育开发的第一个网页"/>

<!--声明文档的编码格式-->

<meta charset="UTF-8">

 

标签分类

<!--[HTML标签分类]

1、块级标签：自动换行、前后隔一行

2、行级标签:按行逐一显示。

是否自动换行，是我们判定块级标签的重要指标

-->

<!-- [常见的块级标签]

标题标签<h1></h1>……<h6></h6>

水平线<hr/>

段落<p></p>

换行<br/>

引用<blockquote></blockquote >

预格式<pre></pre>

-->

<!--默认加粗，h1最大，h6最小-->

<h1>一级标题</h1>

<h2>一级标题</h2>

<h3>一级标题</h3>

<h4>一级标题</h4>

<h5>一级标题</h5>

<h6>一级标题</h6>

<!--水平线<hr/>-->

<hr/>

<!--段落<p></p>-->

<!--换行<br/>-->

<p>这是p标签中的一个段落。这是p标签中的一个段落。这是p标签中的一个段落。这是p标签中的一个段落。</p>

<p>这是p标签中的一个段落。这是p标签中的一个段落。<br/>这是p标签中的一个段落。这是p标签中的一个段落。</p>

<!--引用<blockquote></blockquote>

1、表明标签总的文字，为引用的内容。浏览器显示为段落缩进

2、cite属性，表明引用的来源，一般为引用的网址URL

 

-->

<!--预格式<pre></pre>-->

<pre>1

2

3

</pre>

<!--[有序列表ol order list]-->

<ol>

<li>列表第一项</li>

<li>列表第二项</li>

<li>列表第三项</li>

<li>列表第四项</li>

</ol>

<!--[无序列表ul unorder list]-->

<ul>

<li>列表第一项</li>

<li>列表第二项</li>

<li>列表第三项</li>

<li>列表第四项</li>

</ul>

<!--定义描述列表

<dl>

<dt>标题</dt>

<dd>描述项</dd>

</dl>

-->

<dl>

<dt>这是dl列表的标题</dt>

<dd>描述项1</dd>

<dd>描述项2</dd>

<dd>描述项3</dd>

<dd>描述项4</dd>

</dl>

<blockquote cite="http://www.jredu100.com">哈哈哈哈哈哈哈</blockquote>

<!--

【图片组合标签figure】

1、<figure></figure>标签有两个子标签。

<img src="">:一副图片，src为路径

<figcaption></figcaption>:图片标题

2、浏览器显示为：图片与标题上下排列，且整体向后缩进一个单位

 

-->

<figure>

<img src="img/微信.png" />

<figcaption>微信</figcaption>

</figure>

<!--【分区标签 div】

常配合css使用，为网页中最常用的的分区标签，常用于网页布局使用

-->

<div style="width: 100%;height: 100px;">

这是div里面的文字

<h1>div标题</h1>

</div>

行级标签

<!--常见的行级标签

span（文本）

img（图片）

em（强调）

strong（强调）

q（短引用）

a（超链接）

i（倾斜）

b（加粗）

small（缩小字体）

-->

<!--

span（文本）：用于包裹一部分文字，进行特定样式的修改。

-->

<!--

em(强调)：浏览器会显示为倾斜

strong(强调)：会显示为加粗

两者都表示强调，后者大于前者，两者均可多层嵌套，表示强调程度为递增。

-->

<!--四者的区别

em和i都能倾斜，strong和b都能加粗，但是strong和em多了强调的语义，

可帮助搜索引擎抓住网页重点，而且HTML5要求开发者，尽可能的实现代码的语义化。

-->

姜浩真<span style="color: blue;font-size: 36px;">帅！！！</span>

<!--

q:常用于一句话的引用，cite属性表示引用来源

浏览器解析时，

-->

<q cite="http://www.jredu100.com">被引用的一句话</q><br>

<em>

被强调了！！！

</em><br>

<strong>被强调了！！！</strong><br>

<i>被强调了！！！</i><br>

<b>被强调了！！！</b><br>

<!--

small:small标签可以多层嵌套，表示更小一号，直到字体小到最小为止。

big:用big同上

但是在新规划中，两者不被提倡使用，提倡使用样式表替代style="font-size:11px;"

css样式替代

-->

<!--img 图片标签

1、src属性：表示图片引用路径

>常见路径的写法

* 相对路径

当图片在当前文件下一层时，文件夹名/图片名 img/abc.jpg

当图片与当前文件在同一层时，图片名 src="abc.jgp"

当图片在当前文件上一层时，../图片名 src="../computer.jgp"

使用相对路径时，图片最外层只能放到网站根目录。

 

 

绝对路径:写法file:///E:/aaa.png 但是，严禁使用。

网络连接：直接使用图片的网络地址，但是图片在别人的服务器，不可控，

所以不建议使用。

2、title:当鼠标指上时，显示的提示文字

3、alt：当图片无法加载时，显示的文字

4、width/height:图片的宽度和高度

5、align:图片周围的文字，相对于图片的排列方式。可选值：top/center/bottom

-->