学习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=" 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
-->
原文地址:https://www.cnblogs.com/zhang11424/p/6539202.html