基本结构

  • 以下为自动生成的最基本结构。所以无需改动
  • 我们平常写的代码都写在中。
    • body中的文本会直接输出，无需标签
    • 也可以将文本写在标签中再放在body里
  • 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。元数据有网页的描述，关键词，字符集，文件的最后修改时间，作者及其他元数据。常用于做SEO(搜索引擎优化)
    • <meta name="keywords" content="狂神说Java,西部开源">这样便定义了一个关键词和描述
  • title标签为网页标题，即浏览器标签中的信息

image.png

  1. <!DOCTYPE html>     <!--声明规范：告诉浏览器，我们使用的html版本，写html即默认为html5
  2. <html lang="en">    <!-- html标签为总标签，这里面的才会显示 -->
  3. <head>    网页头部
  4.     <meta charset="UTF-8">    meta标签为描述网站的一些信息，如这个表示网站采用utf-8编码。
  5.     <title>Title</title>    
  6. </head>
  7. <body>    网页主体
  9. </body>
  10. </html>

注释

<!-- ... -->

标签

  • 标签分为成对标签和可不成对标签

  • 可不成对标签可以直接</…> 或者<…/> 也可以直接<...>,/都可以省略

    • 但是为了规范还是要写/

      行内元素与块元素

  • 块元素：无论内容多少，该元素独占一行。如

    标签内容为空，也会输出一行空白

  • 行内元素：靠内容来撑开宽度，如果内容为空就什么也不会输出

  • 有的元素既是行内又是块

    • 块元素可以写在块元素里，不能写在行内元素里
    • 行内元素可以写块中，也可以写行内中 如<h1><a href...></a></h1>

      网页基本标签

      标题标签

      <h?></h?> ?为>=1的数字，数字越小，标题字体越大,越粗

      段落标签

  • 直接写在body中的文本会输出为一行，而写在段落标签中的文本结束后会自动换行

  • 而且段落标签不会省略空格，其他标签中多个空格会省略为一个空格

    换行标签
    单

  • 类似段落标签，相当于是一个换行符，输出一个换行

  • 换行的行间距会比段落标签更加紧凑

image.png

水平线标签
单

image.png

锚链接

  1. 首先在需要跳转到的位置设置一个标记<a name="top">顶部</a>
  2. <a herf="#top">回到顶部</a> 即路径为#标记
    1. 还可以不同页面间跳转<a herf="index.html#top">回到index页面的顶部</a>

      功能性链接

  • 即可以实现些特殊调用功能的链接。如发送邮件。调用qq与某个人联系

    邮件链接

  • 即路径为mailto:邮箱地址的链接。点击邮件链接会尝试打开邮箱应用

<a href="mailto:24736743@qq. com">联系我</a>

QQ链接

  • 在qq推广里生成了推广链接，如下

    • 点击图片后，会尝试调用qq与12345678的用户聊天
      <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=768854737&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:12345678:41" 
  alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

      列表

      有序列表

      image.pngimage.png

      无序列表

      image.pngimage.png

      自定义列表

  • dl是总标签 dt是列表名称(可以用于分类) dd是列表项

image.pngimage.png

表格是行标签
是列标签
  • td写在tr里，用于划分一行有多少列
  • 表格是一个长方形。
  • table标签可以设置一个宽度border属性，这样每个单元格之间都会有分隔。如<table border="1px">
    • px为单位像素。可以省略不写，但是为了规范要写
  		• 标签可以设置一个单元格占用多行或者多列
    • colspan=x 占用x列
    • rowspan=x 占用x行

    image.pngimage.pngimage.png

    image.pngimage.png

    媒体元素

    视频

    <video src="path" controls autoplay height="" width=""></video>

    • controls和autoplay是可选的

      • 但是没有controls就无法控制视频播放暂停等，如果既没有controls又没有autoplay，就完全看不到视频了。 即控制条和自动播放至少得有一个
      • autoplay：自动播放 视频默认是不播放的

        音频

    • 用法完全等同于

      也是控条和自动播放至少得有一个

      页面结构

      一个页面通常有很多区域，如左上角一般是头部，一个大logo。左上是导航栏。底部是版权信息，友情链接等等

    • 有如下等标签，可以将网页拆分为多个区域

      • 头部，脚部，导航(如导航栏)是用的最多的部分
      • section视情况可用可不用，如只有一块大区域时可以不用，一个区域还要拆分时就用

    image.png

    内联框架