网页制作HTML
网页制作HTML
网页制作简单介绍
<!doctype html> *(告诉浏览器,HTML5文档)*
<html lang="en"> *(网页的开头,lang=language,en=English,zh=中文)*
<head> *(头标记)*
<meta charset="UTF - 8">*(编码,UTF - 8是国际编码,不加编码浏览器无法识别,真正决定编码的是服务器。简体中文:GB2312 繁体字,大五码)*(meta是元标记)
<mate name="Keywords" content="关键词1,关键词2,关键词3">*(搜索引擎的关键词)*
<mate name="Description" content="描述">
<body>*(主体标记)*
</head> *(网页的结尾)*
万维网之父:蒂姆.伯纳斯.李
网页制作02
HTML5
- HTML5是HTML最新的修订版本
- HTML是一种超文本标记
- XHTML
HTML5常用模板(见第一课)
[<!doctype html>,说明这个网页是HTML5文档类型。浏览器在处理网页时就会用到这个信息。]
HTML5标记一般格式
- 双标记格式:<标记(名称) 属性1=”属性值1” 属性2=”属性值2” …> 对象 </标记(名称)>
- 单标记格式: <标记(名称) 属性1=”属性值1” 属性2=”属性值2” …>
- 说明:(1)标记有双标记和单标记。双标记比如html、head、title及body,单标记 如meta标记、img标记、br标记等。 (2)标记名不区分大小写。建议使用小写英文字母。 (3)属性书写不分先后顺序,属性值用英文双撇号括住。 (4)HTML标记可以嵌套不可以交叉。 (5)HTML文件扩展名为html
HTML5注释
- 格式:
建立本地站点
站点结构图所示:
注意:站点文件夹不要用中文命名,img放图片,css放样式,js放行为。
第一个网页
<head>
<meta charset="UTF-8">
<title>这是第一个网页</title>
</head>
<body>
2021,你好!
</body>
Editplus软件的使用
- 新建、保存及预览: 1)新建HTML文件:Ctrl+Shift+N 2)保存文件: Ctrl+S 3)预览: Ctrl+B 首页 index.html
- 配置字体:打开【工具】|【参数设置】,在【常规】类别中,选择【字体】。
- 修改【文件】设置: 1)【默认编码】为“UTF-8” 2)去掉“保存时创建备份文件”的选框对勾
文本元素
段落标记
`<p>段落内容</p>
空格和换行
(1)空格代码:  (2)换行标记:
标题标记
<h1>一号标题<h1> 搜索引擎 logo,企业名称
<h2>二号标题<h2> 栏目标题
<h3>三号标题<h3>
<h4>四号标题<h4>
<h5>四号标题<h5>
<h6>四号标题<h6>
水平标尺
水平标尺:<hr>
水平标尺标记可以在网页上绘制一条水平线,代表内容主题分隔或变化。 注意: 水平标尺慎用,如果不是用来表示分隔、变化的语义,就可以用CSS样式为网页元素添加线或边框。
短语标记
- i和b标记
i标记表示不同的情绪或声音,也可以表示技术术语、生物分类,来自另一种语言的成语或习惯、想法等,斜体显示。格式:
<i>文本</i>
b标记表示文档中的关键字、商品名称等,这些文本会加粗显示。格式:
<b>文本</b>
- em和strong标记
em 标记中的内容是被强调的,斜体显示。格式:
<em>强调文本</em>
strong 标记中的内容是被强调的,粗体显示。格式:
<strong>强调文本</strong>
注意:1、搜索引擎更关注
和
标记。 2、如果只是单纯想要把文本斜体或粗体显示,用CSS样式中定义文字的样式。
- sub标记和sup标记
sup是上标标记。格式:
<sup>上标文本</sup>
sub标记是下标标记。格式:
<sub>下标文本</sub>
- pre标记和code标记
pre 标记可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。常用来表示计算机的源代码。格式:
<pre>文本</pre>
code标记文本是程序代码或者其他机器可以阅读的文本内容,通常使用等宽字体。格式:
<code>程序源代码</code>
图片
网页图片
Internet上最常见的图像包括JPEG、GIF和PNG。
- GIF:GIF(Graphics Interchange Format)即图像交换格式。GIF是位图图像,最多可以有256种颜色。GIF格式可以支持透明背景。GIF提供动画功能。
- JPEG:JPEG格式是Joint Photographic Experts Group(联合图像专家组)专门为处理照片而开发的,是一种有损压缩格式。JPEG可以支持1670万种颜色,但是没有透明度,也没有动画功能。 RGB 255乘255乘255 CMYK 打印颜色 图像优化:保证图片的显示效果的基础上,尽量图片要小
- PNG:PNG(Portable Network Graphics),即便携式网络图片。PNG综合了上述两种格式的优点:压缩时像GIF一样没有像素上的损失,还能像JPEG那样呈现数以百万计的颜色。 PNG提供了一种隔行显示方案,显示速度比GIF和JPEG都快得多。 具有优秀的透明度[透明和半透明]的支持能力。 网页制作中,色彩丰富的图片,采用JPEG或PNG格式;如果图像颜色较少时,比如网站logo、一些小图标、分隔线等采用GIF格式。Png也学用放logo图片,背景透明,可能很好的融合到不同背景的网页中去。 半透明:PNG-24
img标记
格式:
<img src="图像源文件所在的路径" alt="替代文本" >
- img标记的src属性:src属性包括URL域名路径和相对路径。 1.URL域名路径URL域名路径,包含名称协议名称http://和域名,即图片所在的网址路径。 2.相对路径 [难点,重点]:相对路径即在同一个站点文件夹下,是从当前路径开始的路径定位。 说明:使用相对路径插入图片,必须先明确当前网页文件的存储位置,然后再去寻找图片文件路径。 路径符号含义如下: 路径符号: / 返回上一层目录:../ 返回上一层的上一层目录:../../
- alt属性:alt属性告诉搜索引擎,这个图片是什么,方便搜索引擎搜索到。屏幕朗读器等软件会将alt属性中的文本读出,提供无障碍访问。 如果浏览器找不到图片时,显示alt属性中的内容。
- title属性:title是在图片正常加载鼠标浮上去显示的信息,区别于alt属性内容的是图片无加载时才显示。 title属性值可以比alt属性值更具描述性,方便浏览者识别,创造良好的用户体验
- width和height属性:图片的宽和高一般在CSS样式中约束,如果要在img中使用,建议只用其中一个值,比如给定width,height会按比例自动计算,这样可以避免图片变形。
列表
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于
标记 ,每个列表项始于
。
像一个容器。例:
<ul>
<li>无序列表</li>
</ul>
无序列表的嵌套
无序列表嵌套在ul标记中。例:
<ul>
<li>首页</li>
<li>新品推荐
<ul>
<li>当季新品
<ul>
<li>咖啡融合冰淇淋</li>
<li>冷萃新咖啡</li>
</ul>
</li>
<li>星礼卡
<ul>
<li>早安新一天</li>
<li>星享俱乐部</li>
</ul>
</li>
</ul>
</li>
<li>咖啡文化</li>
<li>详细介绍</li>
<li>美食介绍</li>
</ul>
有序列表
有序列表也是一列项目,只是列表项目使用的是数字进行标记。有序列表始于ol标签。
- 有序列表的列表符号: type="A" A B C D ;type="a" a b c d;type="1" 1 2 3 4 ; 默认值type="I" I II III ;type="i" i ii iii
<ol>
<li>Java</li>
<li>C/C++</li>
<li>Python</li>
</ol>
- 有序列表的嵌套
定义列表
定义列表不仅仅是一列项目,而是项目及其注释的组合。定义列表以
标记开始。每个定义列表项以
开始。每个定义列表项的定义以
开始。
<dl>
<dt>春分</dt>
<dd>春分,二十四节气之一,是春季第四个节气</dd>
<dd>春分的意义,一天时间白天黑夜平分,各为12小 时</dd>
<dt>清明</dt>
<dd>春分后15天是清明节,又叫“踏青节”</dd>
</dl>
链接标签
- <a>标记
格式:<a href="链接地址" target="链接地址"/>可点击的超链接</a>
href(链接要打开的页面) path代表路径。
href(hypertext reference)属性表示当超链接被点击时要打开哪个页面,分绝对链接和相对链接两种情况。 1.绝对链接 绝对链接用来链接其他网站上的资源,即页面所对应的URL域名地址。 例:<a href="http://www.baidu.com">点击跳转到百度页面</a> 2.相对链接 相对链接用来链接自己网站内部的网页,稍后我们用实例来说明。 例:<a href=“index.html”>首页</a> 3.空链接 href属性等于#时,代表空链接。
target超链接标记的目标属性
超链接标记的目标属性【target】: _self:将被链接文档在同一窗口中打开,即自身。此项为默认选项。 _blank:将被链接的文件在新窗口中打开。
导航 超链接标记实现网页导航功能,常与无序列表标记<ul>标记配合使用。 1.导航
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">日志</a></li>
</ul>
2.下拉菜单导航 下拉菜单导航常需要结合无序列表嵌套及CSS样式实现
例:
<!--#表示空链接-->
<h1><a href="#">孤烟冷的博客</a></h1>
<a href="#"><img src="img/logo01.jpg" alt="孤烟冷" title=" 孤烟冷"></a>
</hr>
<!--导航-->
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="photo.html">相册</a></li>
<li><a href="diary.html">日志</a></li>
</ul>
锚点链接
锚点链接指在同一页面的不同位置的链接。
给网页设置锚点链接分两步: 先给“锚点命名”,然后“抛锚”,即设置超链接。
<a name=“锚点名”></a>
<a href=“#锚点名”></a>
浮动框架
浮动框架可以实现在一个浏览器窗口中同时显示多个页面文档。
格式:
< iframe src="源文件地址" width=”宽” height=”高” name=”名称” ></iframe>
例:
<h1><a href="#">孤烟冷的博客</a></h1>
<a href="#"><img src="../img/logo01.jpg" alt="孤烟冷" title=" 孤烟冷" width="200" height="200"></a>
</hr>
<!--导航-->
<ul>
<li><a href="main.html" target="iframe-main">首页</a></li>
<li><a href="photo.html" target="iframe-main">相册</a></li>
<li><a href="diary.html" target="iframe-main">日志</a></li>
</ul>
<!--浮动框架-->
<iframe name="iframe-main" src="main.html" width="1200" height="600"></iframe>
表格标签
例:
<caption>年龄统计表</caption>
<table border="1" width="281" height="199">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均年龄</td>
<td>18.5</td>
</tr>
</tfoot>
表单标签
HTML表单用于搜集不同类型的用户输入,表单就是一个包含表单元素的区域<form>表单元素N个</form>,表单元素是允许用户在表单中(比如文本域、下拉列表、单选框、复选框等等)输入信息的元素,以及文本标签;表单使用表单标签定义<form>
- 表单标签格式:
<form></form> 表单的最外层包裹元素(非必须)
- 常用属性:
action="url" 规定表单发送数据的路径
autocomplete= on/off 是否应该启用自动完成功能
method=post/get 属性规定如何发送表单数据(表单数据发送到action属性所规定)
-
表单:表单是一个包含表单元素的区域,用于搜集不同类型的用户输入,
表单使用表单标签<form>定义。
语法:
<form >
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
- input标签:
<input> 用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
- 单行文本框:在html页面创建文本域,用户可以在文本域写入文本。
语法:
<input type=“text” name=“自定义名字”>
密码域:当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
语法:
<input type=“password” name=“自定义名字”>
- 单选按钮:
当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮都会变为非选中状态。
语法:
<input type=“radio”checked name=“自定义名字” value=“提交给后台的值”>
注意:checked设置为默认选中,有多个按钮时,所有按钮的name必须相同。
如果是一组单选按钮里,name值要相同,用不现的id区分。
- 复选框:
可以选择多项
语法:
<input type=“checkbox”name=“自定义名字” value=“传给后台的值” checked>
注意:name值必须一样,checked设置为默认选中,也可不设置
- 文件域:
文件域表单由一个文本域和一个按钮组成,单击按钮后会激活一个文件选择对话框,从本地磁盘中选择一个文件,被选中文件的路径极文件名自动填写在文本域中。上传文件时,需要用到文件域。
语法:
<input name=”doc” type=”file” id=”doc” value=”c:\my1.txt”/>
文件域用<input>标记实现,type=”file”表示这是一个文件域表单元素。id和name属性均为文件域的名字,value属性为被选中文件的路径及文件名。
HTML标签 - label标签
<label> 标签为 input 元素定义标注(标记);
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上<label> 标签的 for 属性应当与相关元素的
id 属性相同。
<form>
<label for="nan">男</label>
<input type="radio" name="sex" id="nan" /><br />
<label for="nv">女</label>
<input type="radio" name="sex" id="nv" /><br />
<label for="xq">篮球</label>
<input type="checkbox" id="xq"/>
</form>
复选框和label
由于多选按钮本身比较小,因此出于用户体验的考虑,通常点击选项的文本就应该代表着选择对应的checkbox项,可通过label的for属性关联checkbox的id达到此目的。
例如:
<input type=“checkbox”name=“interest”id=“interest” value=“传给后台的值” checked><label for=“interest”>写程序</label>
这样,当点击“写程序”这个label的时候,就会触发checkbox的选中
注意:<label> 标签的 for 属性应当与相关元素的 id 属性相同。
-
多行文本输入框(文本域)
<textarea name="file" rows=20 cols=30></textarea>
cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字
rows,水平列。表示可显示的行数,例如rows=10,表示可显示10行。超过10行,则需要拖动滚动条来浏览了
name,文本框的名称,这项必不可省,因为存储文本的时候必须用到。
-
下拉列表
select 元素可创建单选或多选菜单
<select name="data" id=”data”>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四</option>
</select>
-
提交和重置按钮
<input type="submit" id="submit" value="提交" />
<input type="reset" id="reset" />
-
按钮
<input type="button" id="ok" value="确定">
-
定义域
组合表单中的相关元素:
<fieldset>
<legend>定义域标题</legend> <input type="text" /> </fieldset>
-
隐藏输入框
隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。
<input type="hidden" name="field_name" value="value">
音频标签
视频- AVI格式
文件:.avi
描述:AVI(Audio Video Interleave)格式是由微软开发的。但非windows计算机并不总是能够播放。
- WMV 格式
文件:.wmv
windows Media格式是由微软开发的。视频在所有非windows计算机上都无法播放,因为没有合适的播放器。
- QuickTime格式
文件:.mov
QuickTime格式是由苹果公司开发的,是web上常见的格式。
- RealVideo格式
文件: .rm .ram
RealVideo格式是由Real Media针对Web开发的。该格式允许低带宽条件下(在线视频、网络电视的)的视频流。由于是低带宽优先的,质量常会降低。
5.Mpeg-4格式
文件: .mp4
Mpeg-4(H.264)是跨平台的国际标准,由MPEG(Moving Picture Experts Group动态图像专家组)于1998年确定,是一种专门针对Web的视频格式,目标是以最少的数据获得最佳的图像质量,得到了所有最流行的浏览器的支持.
- Flash格式
文件:.swf .flv
Flash(shockwave)格式是由Macromedia公司开发的,是在HTML5之前非常流行的视频格式,已经成为事实的标准。很多视频网站在html中嵌入flash视频播放器,通过flash播放器播放mpeg-4格式的视频文件。但是由于性能的原因,flash已经不被ipad、iphone和很多新的安卓设备所支持。
浏览器想要播放视频,必须预先安装对应的浏览器播件。
在HTML5之前,HTML4和xhtml时,使用embed标记。
例:<embed type="application/x-shockwave-flash"
src="zq.swf" width="500" height="430">
</embed>
说明:type属性指定要加载的播件。
embed标记并没有纳入HTML标准中。
常用object 标记来播放视频:
例:<object type="application/x-shockwave-flash"
data="zq.swf" width="500" height="430">
</object>
说明:object标记在低版本的IE中无法工作(<=IE8)
解决办法如下:
例: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="500" height="430">
<param name="src" value="zq.swf" />
</object>
这里使用param标记来指定视频的URL地址。
说明:只用于IE的低版本,从IE11开始不提供支持,其它浏览器不可用
使用object兼容所有的浏览器:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="500" height="430">
<param name="src" value="zq.swf" />
<object type="application/x-shockwave-flash"
data="zq.swf" width="500" height="430">
</object>
</object>
video [HTML5]
不需要下载任何额外的浏览器视频播放插件。
完全由浏览器自身实现视频的解码和播放。
格式:<video src="test.mp4" controls></video>
说明:src:视频的URL地址
controls:显示视频播放控件
HTML5没有对视频播放给视频播放组件外观进行定义,所以不同浏览器的视频播放组件并不一致。
如果想取得一致的视频播放组件外观,可以使用JavaScript设置。
- src
视频的URL地址
- controls
显示视频播放控件
3.autoplay
页面加载,视频会自动播放。一般不要使用自动播放功能,大多数用户喜欢自己来决定是否播放。
controls和autoplay都是布尔属性,只有属性名,没有属性值。比如有autoplay这个属性,则视频会自动播放,如果没有,则不自动播放。
4.preload
preload=”none”
视频播放前,浏览器不会预先下载视频资源,当用户不点播放按钮时,会节省带宽。
preload=”metadata”
视频播放前,浏览器不会下载视频资源,但是会获取资源的元数据(视频大小、持续时间、视频格式、前几帧画面)
preload=”auto” [默认值]
浏览器根据实际情况动态决定,例如:在wifi、3G、4G、5G数据漫游等情况下,动态采用不同的加载方案。
例:<video src="test.mp4" controls preload></video> 布尔属性
<video src="test.mp4" controls preload="auto"></video>属性值
两段代码意思一样
注意:如果设置了autoplay属性,则preload属性将会被忽略。
5.muted
添加这个属性视频将静音播放。
也可以在视频加载后,在视频播放窗口中开启音乐的播放
6.loop
是否循环播放。
当视频播放结束后,继续重头播放。如果没有设置自动播放,则会停在视频的第一帧。
7.poster
有的视频第一帧是黑屏,有的不适合当作封面。
我们可以用一张图片做视频的封面。
<video src="test.mp4" controls poster="hh01.jpg" width="800" height="1000"></video>
8.width和height
视频格式
视频编码
视频格式依然是混乱的。
可以采用如下方式解决,让浏览器从上到下查找source元素周期律,直到找到它能播放的一种格式。
<video controls width="800" height="1000">
<source src="test.mp4">
<source src="test.webm">
<source src="test.ogv">
<p>对不起,您的浏览器不支持video标签</p>
</video>
这样的过程比较消耗时间
解决办法:
<video controls >
<source src="test.mp4" type='video/ogg; codecs="theora,vorbis"'>
</video>
<source src="test.mp4" type='video/ogg; codecs="theora,vorbis"'>
说明:
type是一个可选的属性,这是向浏览器提供一个提示,帮助它确定能不能播放这种类型的文件。video/ogg是视频文件的MIME类型,指定了容器的格式.
codecs 为视频的解码和编码:theora为视频的解码器;vorbis为视频的编码器
兼容所有视频格式:
<video controls >
<source src="test.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
<source src="test.webm" type='video/ogg;codecs="vp8,vorbis"'>
<source src="test.ogv" type='video/ogg;codecs="theora,vorbis"'>
<p>对不起,您的浏览器不支持video标签</p>
</video>
说明:mp4的编码和解码器比另外两种更为复杂,因为H.264支持多种等级,不同的使用情况(如高带宽和低带宽)会有不同的编码。
如果不知道视频编码是什么,可以不加codecs属性,这会对性能有一点儿影响,但是不会太大。
最重要的是使用video标记时,确定浏览器支持这个标记。IE8及IE以下版本和其它浏览器的低版本是不支持video标记的。
对不支持video标记的浏览器,需要兼容低版本浏览器,需要加embed或object元素
<video controls >
<source src="test.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
<source src="test.webm" type='video/ogg;codecs="vp8,vorbis"'>
<source src="test.ogv" type='video/ogg;codecs="theora,vorbis"'>
<p>对不起,您的浏览器不支持video标签</p>
<embed src="test.swf" type="application/x-shockwave-flashe"></embed>
</video>
浏览器对video标签的支持情况:http:caniuse.com/#search=video
音频播放
在HTML5之前,要播放音频文件得需要先安装对应原浏览器播件。
和播放视频一样,使用embed标记和object标记。
也可以使用flash播放播放音频文件。
HTML5播放音频使用audio标记。
不需要下载任何额外的浏览器音频播放插件
完成由浏览器自身实现音频的解码和播放。
audio标记的属性同video标记中的所有属性。
几乎所有的浏览器都支持audio标记。
<body> <!--start of 头部--> <!--header标记放置在页面的顶部,也可放置在其他位置--> <header> <img src="img/logo01.jpg" alt="孤烟冷" width="100" height="100"> <hi><a href="#">孤烟冷</a></hi> <!--导航--> <!--nav表示页面的导航,其他副导航或超链接不能用nav--> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">日志</a></li> <li><a href="#">相册</a></li> <li><a href="#">说说</a></li> </ul> </nav> </header> <hr> <aside> <section> <header> <h2>个人宣言</h2> <p>岱川孤烟冷,段影嘉月衍。</p> </header> </section> <section> <header> <h2>访客</h2> </header> <!--图像和图像标题或视频和视频标题--> <figure> <img src="img/photo02.jpg" alt="js的小迷弟" width="100" height="100"> <figcaption>js的小迷弟</figcaption> </figure> <figure> <img src="img/2.jpg" alt="反j复坤" width="100" height="100"> <figcaption>反j复坤</figcaption> </figure> <figure> <img src="img/3.jpg" alt="西兰花王国上将" width="100" height="100"> <figcaption>西兰花王国上将</figcaption> </figure> </section> </aside> <!--start of main--> <!--main标记是显示页面的主体内容,每个页面只能有一个main标记--> <main> <!--一篇博客文章--> <article> <header> <h3>行内元素和块元素</h3> <!--time表示一个日期,或者一个时间,或者同时表示一个日期和时间值。 datetime属性后边是一个固定格式的日期或时间值,可以被搜索引擎、屏幕阅读器等方便识别--> <time datetime="2022-10-12">2022-10-12</time> </header> <p>块元素:无论内容多少,该元素独占一行。(p、h1-h6)</p> <p>行内元素:内容撑开宽度,左右都是行内元素的可以在排一行(a.strong.em…)</p> <footer> <span>阅读</span> ¦ <span>评论</span> <a href="#">查看全文>></a> </footer> </article> <article> <header> <h3>JAVA的特性和优势</h3> <time datetime="2022-9-12">2022-9-12</time> </header> <p>Java是面向对象的,拥有有简单性、可移植性(跨平台性)、动态性、安全性和健壮性,具有高性能、分布式、多线程的特点。</p> <footer> <span>阅读</span> ¦ <span>评论</span> <a href="#">查看全文>></a> </footer> </article> <article> <header> <h3>为什么说Java具有解释型和编译型的特点</h3> <time datetime="2022-8-12">2022-8-12</time> </header> <p>JAVA语言是一种编译型-解释型语言,同时具备编译特性和解释特性(其实,确切的说java就是解释型语言,其所谓的编译过程只是将.java文件编程成平台无关的字节码.</p> <p>Java和其他的语言不太一样。因为java针对不同的平台有不同的JVM,实现了跨平台。所以Java语言有一次编译到处运行的说法。</p> <footer> <span>阅读</span> ¦ <span>评论</span> <a href="#">查看全文>></a> </footer> </article> </main>
l HTML结构清晰
l 代码可读性好
l 无障碍阅读
l 搜索引擎可根据标签的语义确定上下文和权重问题
l 移动设备能更完美的展示页面
l 便于团队维护开发
- div
在网页中创建一个常规结构区域。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
DIV标签应用于 Style Sheet(样式表)方面会更显威力
例:<div></div>
- article
表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用。
例:
一篇博客
一个论坛帖子
一篇新闻报道
一个用户评论
article标记还可用来同时显示文章和用户评论,则需要嵌套使用:
<article>
<!—文章内容-->
<article>
<!—用户评论-->
</article>
<article>
<!—用户评论-->
</article>
</article>
- header
一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包括整个页或某个区块的标题、简介等信息。
header标记的使用:
一个文档中可以包含多于一个的header标记。
header标记不一定非要显示在页面的上方,它的内容决定这里需要使用header标记,位置并不重要。
可以body、article、section和aside增加header标记。
例1:
<header>
<!—网站logo-->
<!—网站导航-->
</header>
例2:
<article>
<header>
<!--文章标题-->
<!--文章发布时间-->
</header>
<p>文章内容</p>
</article>
3.footer
一般被放置在页面的底部,或者页面中某个区块元素的底部。
例1:
<footer>
Copyright © 1996 - 2018 SINA Corporation, All Rights Reserved
新浪公司 版权所有
</footer>
例2:
<footer>
阅读(13) ┆ 评论(0) ┆ 还没有被转载 ┆ 收藏(0)查看全文>>
</footer>
4.nav
表示页面的导航,可以通过导航连接到网站的其他页面或当前页面的的其他部分。
可以把nav标记放在header标记中。
例:
<header>
<!--网站导航-->
<h1><a href="http://blog.sina.com.cn/jianzimagnolia">减字的博客</a></h1>
<!--网站导航-->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="photo.html">相册</a></li>
<li><a href="diary.html">日志</a></li>
</ul>
</nav>
</header>
搜索引擎或屏幕阅读器会根据nav标记来确定网站的内容。并不是任何一组超链接都适合放在nav标记中。
比如副导航,比如页脚部分的导航内容,都不可以用nav标记。
例:小米官网
5.aside
包含的内容不是页面的主要内容,具有独立性,是对页面内容的补充。
一些使用aside的例子:
页面侧边栏
广告
友情链接
文章引语(内容摘要)
6.section
一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer)。
div与section的区别:
div应用更广泛,只要你想为一个区域定义一个样式,就可以使用div标签。
section包含的内容是一个明确的主题,通常有标题区域。
7.main标记
显示页面的主体内容
每个页面只能有一个main标记。
main标记中不包含网站标题、logo、主导航、版权声明等信息。
8.figure和figcaption
图像和图像标题或视频及视频标题
例:
<figure>
<img src="img/m01.jpg" alt="咪宝的娃">
<figcaption>咪宝的娃第六天</figcaption>
</figure>
figure标记可以给img图片标记使用,带有标记的图片,及用于video标记,表示带有标题的视频。
9.time和span{i和b,em和strong}
time表示一个日期,或者一个时间,或者同时表示一个日期和时间值。
例:
<time datetime='2019-04-12'>
2019-04-12
</time>
datetime属性后边是一个固定格式的日期或时间值,可以被搜索引擎、屏幕阅读器等方便识别。
如果定义了datetime属性,则time村记中间的文本只要人可以识别就可以,例如“今天”、“1小时前”、“结婚纪念日”及“情人节”等等。
如果没有定义datetime属性,则time标记中的文本需要是一个固定格式。这样方便搜索引擎、屏幕阅读器正确地识别时间值。
固定格式写法如下:
指定年月日:2020-04-20
指定年月:2020-04
年份可以是两位数字:20-04-20
指定时间(24小时制):10:59:10
指定时间(24小时制):10:59
指定日期和时间,日期和时间中间空一个格:2020-04-20 10:59:10
指定日期和时间,日期和时间中间隔个T,表示时间:2020-04-20T10:59:10
Z表示使用UTC标准时间:2020-04-20T10:59:10Z
注:UTC标准时间+8小时=北京时间
span标签是的行内标签, 被用来组合文档中的行内元素。
<hr> <!--底部版权部分--> <!--一般被放置在页面的底部,或者页面中某个区块元素的底部--> <footer> <div>Copyright © 2005-2020 Tencent.All RightsReserved.</div> <div>腾讯公司版权所J</div> </footer> </body>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战