• <!DOCTYPE html>　　声明

    • <!DOCTYPE html> 是 html5 标准网页声明，全称为 Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持 html5 标准的主流浏览器都认识这个声明，表示网页采用 html5，<!DOCTYPE>  声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
  • doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html> 

<!DOCTYPE HTML>
  • <meta charset="utf-8">　　中文编码

    • 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
    • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
    • HTML 标签是由尖括号包围的关键词，比如 <html>
    • HTML 标签通常是成对出现的，比如 <b> 和 </b>
    • 标签对中的第一个标签是开始标签，第二个标签是结束标签
    • 开始和结束标签也被称为开放标签和闭合标签
    • 不要忘记结束标签，虽然没有结束标签页面也能正常显示
  • <h> 标题标签

    • HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的
    • <h1> 定义最大的标题， <h6> 定义最小的标题。
    • <h1>这是一个标题</h1>
    • 注意：
      • 请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
      • 搜索引擎使用标题为您的网页的结构和内容编制索引。
      • 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
      • 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。　
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>My HTML</title>

    </head>

    <body>

        <h1>This is h1 heading</h1>

        <h2>This is h2 heading</h2>

        <h3>This is h3 heading</h3>

        <h4>This is h4 heading</h4>

        <h5>This is h5 heading</h5>

        <h6>This is h6 heading</h6>

    </body>

</html>
  • <p> 段落标签

    • HTML 段落是通过标签 <p> 来定义的.
    • &nbsp 表示一个空格
    <body>

        <p >这是一个段落&nbsp;这是一个段落</p>

    </body>
  • <em> 标签（斜体）

    • <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
    <body>

        <em>这是一个段落&nbsp;这是一个段落</em>

    </body>
  • <i> 标签（斜体）

    • <i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字显示。
    <body>

        <i>这是一个段落&nbsp;这是一个段落</i>

    </body>
  • <strong> 标签（加粗）

    • <strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。　　
    • 如果常识告诉我们应该较少使用 <em> 标签的话，那么 <strong> 标签出现的次数应该更少。
    <body>

        <em>这是一个段落&nbsp;这是一个段落</em>

        <strong>这是一个段落&nbsp;这是一个段落</strong>

    </body>
  • <b> （粗体）
    <body>

        <b>这是一个段落&nbsp;这是一个段落</b>

        <strong>这是一个段落&nbsp;这是一个段落</strong>

    </body> 
  • <font> 标签

    • <font> 规定文本的字体、字体尺寸、字体颜色。　
    • size 属性（可能的值：从 1 到 7 的数字。浏览器默认值是 3。）　
    • color 属性，色值
    <body>

        <h1><font size="10" color="red">这是一个段落&nbsp;这是一个段落<font></h1>

        <p><font size="10" color="blueviolet">这是一个段落&nbsp;这是一个段落<font></p>

        <i><font size="10" color="#0000FF">这是一个段落&nbsp;这是一个段落<font></i>

    </body>
  • <br> 换行标签

    • <br> 来输入空行
    • <br> 标签没有结束标签　　　　
    <body>

        <b>这是一个段落&nbsp;这是一个段落</b><br><br>

        <strong>这是一个段落&nbsp;这是一个段落</strong>

    </body>
  • <hr> 水平线标签

    • 创建水平线　　
    • <hr> 标签没有结束标签　　
    <body>

        <b>这是一个段落&nbsp;这是一个段落</b><hr>

        <strong>这是一个段落&nbsp;这是一个段落</strong>

    </body>
  •  <img> 图片标签

    • src 属性：规定显示图像的 URL。　　　　
    • alt 属性：如果无法显示图像，浏览器将显示替代文本
    • title 属性：定义鼠标移动到元素上显示的文本　
    • width 属性：设置图像的宽度
    • height 属性：定义图像的高度　
    • align 属性：规定如何根据周围的文本来排列图像
      • center    居中
      • left    左对齐
      • right    右对齐
    • border 属性：定义图像周围的边框　　
    <body>

        <img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" border="2px"/>

    </body>
    • hspace 属性：定义图像左侧和右侧的空白　　
    • vspace 属性：定义图像顶部和底部的空　　
    <body>

        <img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" hspace="200px"/>

        <img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" vspace="20px"/>

    </body>
  •  <a> 链接标签

    • target 属性：新窗口打开链接　　
    <body>

        <a href="https://www.baidu.com/">百度</a>

        <a href="https://www.jd.com" target="_blank">京东</a><br>

        <!-- 死链接 -->

        <a href="#" target="_blank">天猫</a><br>

        <!-- 带图片 -->

        <a href="https://www.taobao.com"><img src="../project01/images/activity/img4.jpg"><br>淘宝</a>

    </body>
  • <ol> 有序列表标签

    • 列表项目使用数字进行标记。 　　
    • 有序列表始于 <ol> 标签，结束于</ol> ；每个列表项始于 <li> 标签，结束于</li>标签　　
    • type 属性：规定在列表中使用的标记类型，默认值 = 1
    • start 属性：规定有序列表的起始值
    • reversed 属性：规定列表的顺序为降序，默认为正序排列
    <body>

        <ol type="I">

            <li>水果</li>

            <ol type="A">

                <li>苹果</li>

                <li>橘子</li>

                <li>香蕉</li>

            </ol>

            <li>蔬菜</li>

            <ol type="a" start="3" reversed="reversed">

                <li>大白菜</li>

                <li>空心菜</li>

                <li>包心菜</li>

            </ol>

        </ol>

    </body>
  •  <ul> 无序列表标签

    • 此列项目使用粗体圆点（典型的小黑圆圈）进行标记。　　
    • 有序列表始于 <ul> 标签，结束于</ul> ；每个列表项始于 <li> 标签，结束于</li>标签。　　
    • type 属性：规定在列表中使用的标记类型
      • disc    实心圆（默认）　　
      • square    实心方正
      • circle    空心圆
      • none    取消前缀
    <body>

        <ul type="circle">

            <li>水果</li>

            <ul type="square">

                <li>苹果</li>

                <li>橘子</li>

                <li>香蕉</li>

            </ul>

            <li>蔬菜</li>

            <ul type="disc">

                <li>大白菜</li>

                <li>空心菜</li>

                <li>包心菜</li>

            </ul>

        </ul>

    </body>
  • <dl> 自定义列表标签

    • 自定义列表不仅仅是一列项目，而是项目及其注释的组合。　　
    • 自定义列表以 <dl> 标签开始，以</dl>结尾 ；每个自定义列表项以 <dt> 开始，以 </dt>结尾；每个自定义列表项的定义以 <dd> 开始，以 </dd> 结尾。　　
    • 提示：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。　　
    <body>

        <dl>

            <dt>水果</dt>

                <dd>苹果</dd>

                <dd>橘子</dd>

                <dd>香蕉</dd>

            <dt>蔬菜</dt>

                <dd>大白菜</dd>

                <dd>空心菜</dd>

                <dd>包心菜</dd>

        </dl>

    </body>

HTML（标题/图片/链接/列表标签）的更多相关文章

  1. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  2. [19/05/14-星期二] HTML_body标签(列表标签和图片标签)

    一.列表标签 <!-- 快捷键 1.<meta charset="UTF-8"/> 用m6可直接写出 2.复制当前1行到下一行 ctrl+shift+R --&g ...

  3. 复制图片链接和标题生成Markdown文本

    写Markdown的时候常常会需要复制图片链接和标题以插入图片,不借助其他工具的话,一般需要先在Markdown文件中输入插入图片的格式,然后在浏览器中复制图片链接和标题将其依次粘贴到Markdown ...

  4. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  6. python 之 前端开发（HTTP协议、head标签、img标签、a标签、列表标签）

    第十一章前端开发 11.1 HTTP 1.1引入了许多关键性能优化:keepalive连接,请求流水线,chunked编码传输,字节范围请求等 1.keepalive连接: 1.长连接允许HTTP设备 ...

  7. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  9. 帝国cms7.0设置标题图片（缺失状态下）

    有时候因为我们没有设置标题图片,程序就会是使用自己的标题图片,这就是问题所在,现在有2个办法解决这个问题, [1]直接替换调程序的标签图片,但是这样的方法虽然简单,但是图片大小固定,要是每个模版的图片 ...

随机推荐

  1. 《民国奇探》的弹幕有点逗比，用 Python 爬下来看看

    电视剧<民国奇探>是一部充斥着逗比风的探案剧,剧中主要角色:三土.四爷.白小姐,三土这个角色类似于<名侦探柯南>中的柯南但带有搞笑属性,四爷则类似于毛利小五郎但有大哥范且武功高 ...

  2. Python常见数据结构-List列表

    Python list基本特点 列表是一种有序集合,可以随时添加和删除元素. 序列中的每个元素都分配一个数字 - 它的位置. 列表的数据项不需要具有相同的类型. 创建一个列表,只要把逗号分隔的不同的数 ...

  3. xargs与exec区别

    平时使用find命令查找出文件的时候有时候后面有时候用-exec有时候用管道加xargs,这2个到底有什么不同?下面就这2个的不同做简单介绍. 零.实验环境 [root@osker /]# find ...

  4. Starlims Client Request Portal 客户申请门户

    用户可以直接在starlims对外的"客户申请门户"上发起检验申请,并追踪检验进度等. 工作流程图示如下:

  5. kworkerds 挖矿木马简单分析及清理

    公司之前的开发和测试环境是在腾讯云上,部分服务器中过一次挖矿木马 kworkerds,本文为我当时分析和清理木马的记录,希望能对大家有所帮助. 现象 top 命令查看,显示 CPU 占用 100%,进 ...

  6. Sprint 5 summary: UI 界面更新，Azure端部署和用户反馈分析 12/28/2015

    本次sprint主要完成的任务有对手机APP的UI界面的更新,同时对Azure客户端的部署进行了相应的学习和有关的程序设计.同时对于ALPHA release的用户反馈做出相应的分析以确定接下来工作的 ...

  7. stand up meeting 12/8/2015

    part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云  --------------    --  -----------  -- PDF Reader 朱玉影         ...

  8. stand up meeting 11/20/2015

    3组员 今日工作 工作耗时/h 明日计划 计划耗时/h 冯晓云 将输出string里的翻译合理取分为动名词等各种词性,按约定格式返回,按热度排列,但每一个词性下的解释仍然是由“$$”分词:对于查询词为 ...

  9. stand up meeting 11/16/2015

    第一周,熟悉任务中~ 大致写下一天的工作: 冯晓云:熟悉bing接口,本意是调在线的必应词典API,参阅了大量C#调用API开发.net的工作,[约莫是因为有个窗口互动性更强,所以这样的工作更有趣,也 ...

  10. JavaScript数据类型 —— 基础语法（2）

    JavaScript基础语法(2) 数据类型 js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Undefined,Null),和一种复杂数据类型(Object) ...