网页制作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)空格代码:&nbsp (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">

    音频标签


    视频

    1. AVI格式   

    文件:.avi

    描述:AVIAudio Video Interleave)格式是由微软开发的。但非windows计算机并不总是能够播放。

    1. WMV 格式

    文件:.wmv

    windows Media格式是由微软开发的。视频在所有非windows计算机上都无法播放,因为没有合适的播放器。

    1. QuickTime格式

    文件:.mov

    QuickTime格式是由苹果公司开发的,是web上常见的格式。

    1. RealVideo格式

    文件: .rm  .ram

    RealVideo格式是由Real Media针对Web开发的。该格式允许低带宽条件下(在线视频、网络电视的)的视频流。由于是低带宽优先的,质量常会降低。

    5Mpeg-4格式

       文件: .mp4     

      Mpeg-4(H.264)是跨平台的国际标准,由MPEG(Moving Picture Experts Group动态图像专家组)1998年确定,是一种专门针对Web的视频格式,目标是以最少的数据获得最佳的图像质量,得到了所有最流行的浏览器的支持.

    1. Flash格式

    文件:.swf  .flv    

    Flash(shockwave)格式是由Macromedia公司开发的,是在HTML5之前非常流行的视频格式,已经成为事实的标准。很多视频网站在html中嵌入flash视频播放器,通过flash播放器播放mpeg-4格式的视频文件。但是由于性能的原因,flash已经不被ipadiphone和很多新的安卓设备所支持。

    浏览器想要播放视频,必须预先安装对应的浏览器播件。

    HTML5之前,HTML4xhtml时,使用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设置。

     

    1. src

    视频的URL地址

    1. controls

    显示视频播放控件

    3.autoplay

    页面加载,视频会自动播放。一般不要使用自动播放功能,大多数用户喜欢自己来决定是否播放。

    controlsautoplay都是布尔属性,只有属性名,没有属性值。比如有autoplay这个属性,则视频会自动播放,如果没有,则不自动播放。

    4.preload

     

    preload=none

    视频播放前,浏览器不会预先下载视频资源,当用户不点播放按钮时,会节省带宽。

    preload=metadata

    视频播放前,浏览器不会下载视频资源,但是会获取资源的元数据(视频大小、持续时间、视频格式、前几帧画面)

    preload=auto” [默认值]

    浏览器根据实际情况动态决定,例如:在wifi3G4G5G数据漫游等情况下,动态采用不同的加载方案。

    例:<video src="test.mp4" controls preload></video> 布尔属性

    <video src="test.mp4" controls preload="auto"></video>属性值

    两段代码意思一样

    注意:如果设置了autoplay属性,则preload属性将会被忽略。

    5.muted

    添加这个属性视频将静音播放。

    也可以在视频加载后,在视频播放窗口中开启音乐的播放

    6loop

    是否循环播放。

    当视频播放结束后,继续重头播放。如果没有设置自动播放,则会停在视频的第一帧。

    7poster

    有的视频第一帧是黑屏,有的不适合当作封面。

    我们可以用一张图片做视频的封面。

    <video src="test.mp4" controls poster="hh01.jpg" width="800" height="1000"></video>

    8.widthheight

    视频格式

    视频编码

     

     

     

     

    视频格式依然是混乱的。

    可以采用如下方式解决,让浏览器从上到下查找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标记时,确定浏览器支持这个标记IE8IE以下版本和其它浏览器的低版本是不支持video标记的。

    对不支持video标记的浏览器,需要兼容低版本浏览器,需要加embedobject元素

    <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> &brvbar; <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> &brvbar; <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> &brvbar; <span>评论</span> <a href="#">查看全文>></a>
                </footer>
            </article>
        </main>

    l HTML结构清晰

    代码可性好

    无障碍阅读

    搜索引擎可根据标签的语确定上下文和权重问题

    移动设备能更完美的展示页面

    便于团队维护开发

     

    1. div

    在网页中创建一个常规结构区域。

    <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。

    DIV标签应用于 Style Sheet(样式表)方面会更显威力

    例:<div></div>

    1. article

    表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,也就是说,它能够独立地被发布或重新使用。

    例:

    一篇博客

    一个论坛帖子

    一篇新闻报道

    一个用户评论

    article标记还可用来同时显示文章和用户评论,则需要嵌套使用:

    <article>

    <!—文章内容-->

    <article>

    <!—用户评论-->

    </article>

    <article>

    <!—用户评论-->

    </article>

    </article>

    1. header

    一般被放置在页面的顶部,或者页面中某个区块元素的顶部,包括整个页或某个区块的标题、简介等信息。

    header标记的使用:

    一个文档中可以包含多于一个的header标记。

    header标记不一定非要显示在页面的上方,它的内容决定这里需要使用header标记,位置并不重要。

    可以bodyarticlesectionaside增加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)

    divsection的区别:

    div应用更广泛,只要你想为一个区域定义一个样式,就可以使用div标签。

    section包含的内容是一个明确的主题,通常有标题区域。

    7.main标记

    显示页面的主体内容

    每个页面只能有一个main标记。

    main标记中不包含网站标题、logo、主导航、版权声明等信息。

    8.figurefigcaption

    图像和图像标题或视频及视频标题

    例:

    <figure>

    <img src="img/m01.jpg" alt="咪宝的娃">

    <figcaption>咪宝的娃第六天</figcaption>

    </figure>

     

    figure标记可以给img图片标记使用,带有标记的图片,及用于video标记,表示带有标题的视频。

    9timespan{ibemstrong}

    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 &copy; 2005-2020 Tencent.All RightsReserved.</div>
        <div>腾讯公司版权所J</div>
    </footer>
    </body>
    

     

     

     

posted @   孤烟冷  阅读(497)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示