1、HTML有关概念

全称: Hyper Text Markup Language（超文本标记语言） 其文件扩展名为“.html”或“.htm”

* 超文本 - 在普通的文本基础上，添加超链接、图片、音频或视频等

* 标记 - 标记就是HTML中的标签(元素)，特点:<a>

* 语言 - 目前目标所能识别的

版本: HTML 4.01 <4.01与4.0不是一个版本>； HTML 5； XHTML：严格版本的HTML

  • Ø 基本结构：

附：<!doctype html>: 申明版本，则浏览器可以预先知道文档类型，从而正确显示网页内容

<meta charset="UTF-8"> : 设置编码格式

meta标签提供了元数据（不显示在页面上，但会被浏览器解析）。

meta元素常用于指定网页的描述、关键词、文件的最后修改时间、作者、和其他元数据。元数据可使用浏览器(如何显示内容或重新加载页面），搜索引擎(关键词)，或其他Web服务。

eg:为搜索引擎定义关键词、为网页定义内容、为网页定义作者….

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<meta name="description" content="Free Web tutorials on HTML and CSS">

<meta name="author" content="King">

  • Ø 元素

空元素 - 只有开始标签，没有结束标签;

起始元素 - 具有开始标签和结束标签 -----成对出现

注: 元素名（大小写均可）- W3C预定义，建议使用小写

  • Ø 属性

作用：定义当前元素的信息            格式：属性名="属性值"

（a.属性必须定义在开始标签中   b.同一个元素具有多个属性）

i   通用属性 - 几乎所有的HTML元素都具有的属性

id: 表示当前元素的标识(唯一的)        name: 表示当前元素的名称

style: 表示定义CSS样式              class: 表示定义CSS样式

i 私有属性 - 某个元素独有的属性

  • Ø 注释

作用：解释当前的元素的作用          特点：不会显示在浏览器的页面中

格式：<!-- 注释内容 -->               快捷键：CTRL + ?

2、HTML常见元素

ü  标题 <h1> ~ <h6> （常用的<h1> ~ <h3>，尤其是<h1>）

<h1>：用于搜索引擎抓取HTML页面

搜索引擎抓取HTML内容时，优先级:

<title>元素中的内容 大于 <meta name="keywords" content="">大于<h1>元素

ü  段落 <p></p>

特点：自动换行，行间距比较大

eg:  <p> </p>  <p></p>

或  <p> </p>

<p> </p>

eg: <p> <br> </p>

ü  <hr> - 水平线

ü  <br> - 换行      [快捷键 - 标签名 + TAB]

3、列表

(1)有序列表      (2)无序列表        (3)定义列表

<ol>             <ul>              <dl>         - 表示定义列表

<li></li>         <li></li>          <dt></dt>   - 表示列表项(列表的标题)

</ol>             </ul>               <dd></dd>  - 表示列表项的描述(列表项)

</dl>

有序列表 type属性：规定列表类型1、A、a、l、i； start属性：规定起始数字

快捷键：标签:*数量 + TAB；   alt+鼠标左键

4、链接元素

格式：<a href=" "></a>

属性：<a href="当前要跳转到的地址"></a>     <a name="当前元素的名称"></a>

a链接会自带下划线，若去除下划线，则  a{ text-decoration: none;}

href：去往的路径即跳转的页面(必写属性)

title：提示文本，也就是鼠标放到链接上显示的文字

target = ’_self ’    默认值，在自身页面打开（关闭自身页面，打开链接页面）

target = ’_blank ’  打开新页面 （自身页面不关闭，打开一个新的链接页面）

作用: 实现页面跳转(默认)； 实现回到顶部[锚点(#name)]即指向某固定位置；实现发送邮件

eg: <a name="top">这是顶端</a>

<a href="mailto:82328769@qq.com" >邮箱地址</a>

<a href="#top" >回到顶部</a>      <a href="#middle" >回到中间</a>

² 相对路径

即相对于文件自身出发，就是相对路径。

文件和图片（html文档）在同一个目录(文件夹) ，直接写文件名。

图片（html文档）在文件在下一级目录里。文件夹名称/图片（html）名称

图片（html）在文件的上一级目录里，.. /图片（html）名称

图片在文件的上一级的其他目录里，../文件夹名称/图片名称

²  绝对路径

5、图片元素

<img src="当前引入图片的路径"  alt=" text文本"  width="图片宽度"  height="图片高度" >

图片元素的加载原理

HTML基础知识（常见元素、列表、链接元素、图片元素）的更多相关文章

  1. python基础知识回顾之列表

    在python 中,主要的常用数据类型有列表,元组,字典,集合,字符串.对于这些基础知识,应该要能够足够熟练掌握. 如何创建列表: # 创建一个空列表:定义一个变量,然后在等号右边放一个中括号,就创建 ...

  2. 1.10 Python基础知识 - 序列：列表

    在Python中有很多的组合数据类型,其中包括列表,元组,字符串等数据类型,这些数据类型统称为序列类型,用他们可以处理复杂的数据. 列表,是一组有序元素组合的数据结构.列表是可变的数据类型. 列表采用 ...

  3. Python3基础 list(enumerate()) 将一个列表的每一个元素转换成 带索引值的元组

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  4. Python3基础 list pop 取出列表的最后一个元素

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. 后端程序员必备的 Linux 基础知识+常见命令（近万字总结）

    大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 今天这篇文章中简单介绍一下一个 Java 程序员必知的 Linux 的一些概念以及常见命令. 如果文章有任何需要 ...

  6. python基础知识-集合，列表，元组间的相互装换

    在python中列表,元祖,集合间可以进行相互转化, def main(): set1={'hello','good','banana','zoo','Python','hello'} print(l ...

  7. python入门基础知识三（列表和元组）

    列表(list)的操作 1. 形式 var = ['char1','char2','char3',...] var = [value1,value2,value3,...] 2. 列表的增删改查 查: ...

  8. Struts2入门1 Struts2基础知识

    Struts2入门1 Struts2基础知识 20131130 代码下载: 链接: http://pan.baidu.com/s/11mYG1 密码: aua5 前言: 之前学习了Spring和Hib ...

  9. Matplotlib基础知识

    Matplotlib基础知识 Matplotlib中的基本图表包括的元素 x轴和y轴 axis水平和垂直的轴线 x轴和y轴刻度 tick刻度标示坐标轴的分隔,包括最小刻度和最大刻度 x轴和y轴刻度标签 ...

  10. Python基础：序列（列表、元组）

    一.概述 列表(list)是由一个个 Python对象 组成的序列.其中,Python对象 可以是任何类型的对象,包括 Python标准类型(数值.字符串.列表.元组和字典)以及 用户自定义类型(类) ...

随机推荐

  1. springboot+jpa+thymeleaf增删改查的示例（转）

    这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...

  2. Mybatis中的模糊查询

    今天下午做的一个功能,要用到模糊查询,字段是description,刚开始我的写法用的是sql中的模糊查询语句, 但是这个有问题,只有将字段的全部值传入其中,才能查询,所以不是迷糊查询. 后来经过搜索 ...

  3. [转载]ArchLinux 添加 archlinuxcn 源 密钥错误

    http://www.jianshu.com/p/8ed688b0a096 杜龙少 正在检查密钥环里的密钥 [######################] 100% 正在下载所需的密钥...... ...

  4. 将Maven的Web项目部署到windows的Tomcat里

    这里我用的是win7和tomcat8,且tomcat8下载的是压缩包而非安装文件. 第一步:先将tomcat8安装服务,cmd里更改目录为tomcat8(即压缩包解压后的那个文件夹)的bin文件夹, ...

  5. python方法的延迟加载

    数据挖掘的过程中,数据进行处理是一重要的环节,我们往往会将其封装成一个方法,而有的时候这一个方法可能会被反复调用,每一次都对数据进行处理这将是一个很耗时耗资源的操纵,那么有没有办法将计算后的结果缓存起 ...

  6. Structural Inference of Hierarchies in Networks(网络层次结构推断)

    Structural Inference of Hierarchies in Networks(网络层次结构推断) 1. 问题 层次结构是一种重要的复杂网络性质.这篇文章给出了层次结构的精确定义,给出 ...

  7. bzoj 4719: [Noip2016]天天爱跑步

    Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.?天天爱跑步?是一个养成类游戏,需要 玩家每天按时上线,完成打卡任务.这个游戏的地图可以看作一一 ...

  8. <tangmuchw>之新手vue项目小记--新建.vue文件，运行项目，出现error：This dependency was not found...

    错误码: This dependency was not found: * !!vue-style-loader!css-loader?{"minimize":false,&quo ...

  9. 模板引擎（smarty）知识点总结

    首先我们必须知道使用smarty的流程   1.引入   2.实例化   3.配置 模板目录  编译目录  3.0版本 支持不存在的目录则新建   4.赋值   5.编译显示 某个模板文件(暗示需要哪 ...

  10. 5 秒创建 k8s 集群 - 每天5分钟玩转 Docker 容器技术（115）

    据说 Google 的数据中心里运行着超过 20 亿个容器,而且 Google 十年前就开始使用容器技术. 最初,Google 开发了一个叫 Borg 的系统(现在命令为 Omega)来调度如此庞大数 ...