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. spring mvc获取绝对路径的几种方法

    1.首先如果是在一个controller方法中,则很简单,直接用下面语句. @RequestMapping("categoryHome") public ModelAndView ...

  2. VirtualBox 安装 Ubuntu 14.04 无法调节分辨率问题

    基础环境 宿主系统:Windows 10 虚拟机系统:Ubuntu 14.04-32bit.Ubuntu 14.04-64bit VirtualBox:5.2.0 r118431 (Qt5.6.2) ...

  3. activeMq 使用方法

    一:activeMq介绍 ActiveMQ是一种开源的,实现了JMS1.1规范的,面向消息(MOM)的中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信,下载地址是:http://a ...

  4. ideal中如何添加几个不同的项目在同一个idea的显示页面

    今天,我遇到了一个问题,就是同事给了我一些项目,我下载了之后,项目有点多,然后想把这些项目都放到一个里面,所以我就采取了添加module的方式进行添加,首先先看一下我们的四个项目, 我们就想实现在一个 ...

  5. sqlserver 存储过程 查询

    --查询 CREATE PROCEDURE [dbo].[SelelctMessage] @strTable varchar(), --要查询的表 @strColum varchar(), --要查询 ...

  6. HTTP之URL分解

    HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接.URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息 URL,全称是U ...

  7. 小白的Python之路 day4 生成器

    一.列表生成式  看下面例子: 列表生成式的作用:主要是让代码更简洁(还有装X的效果) 二.生成器 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包 ...

  8. hibernate核心API使用

    1.Configuration 加载核心配置文件,核心配置文件名称和位置固定,否则会找不到 2.SessionFactory对象一个项目只创建一个,大家公用 根据配置文件和映射关系创建表 由于要创建表 ...

  9. tesserat训练中文备忘录

    最近用OCR识别身份证,用的tesseract引擎.但是google自带的中文库是在太慢了,尤其是对于性别.民族这样结果可以穷举的特征信息而言,完全可以自己训练字库.自己训练字库不仅可以提高识别速度, ...

  10. bzoj 4196: [Noi2015]软件包管理器

    Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...