首页 > 代码库 > 学习HTML5一周的收获1

学习HTML5一周的收获1

2024-09-08 09:42:20   218人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/abc.jgp"
当图片在当前文件上一层时，../图片名 src="http://www.mamicode.com/computer.jgp"
使用相对路径时，图片最外层只能放到网站根目录。
 
 
绝对路径:写法file:///E:/aaa.png 但是，严禁使用。
网络连接：直接使用图片的网络地址，但是图片在别人的服务器，不可控，
所以不建议使用。
2、title:当鼠标指上时，显示的提示文字
3、alt：当图片无法加载时，显示的文字
4、width/height:图片的宽度和高度
5、align:图片周围的文字，相对于图片的排列方式。可选值：top/center/bottom
-->

学习HTML5一周的收获1


联系
我们