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. win10 系统输入法与 idea的 ctr+shift+f 快捷键冲突，解决办法

    我认为首先是输入法简繁热键的冲突,(当然也有人认为是qq的热键冲突,) 解决办法: 1.首先打开搜狗输入法的设置(当然有的可能不是搜狗输入法,其他的输入法设置步骤都是大同小异) 看到了吗,就是这个热键 ...

  2. spring boot整合redis

    1.项目目录结构 2.配置文件 application.yml testName: applicationName: testRedis spring: redis: host: 192.168.20 ...

  3. jQuery架构（源码）分析

    ( function( global, factory ) { "use strict"; if ( typeof module === "object" &a ...

  4. C#中MessageBox用法大全（附效果图）

    1.最简单的,只显示提示信息 2. 可以给消息框加上标题. 3. "确定"和"取消" 4. 给MessageBox加上一个Icon,.net提供常见的Icon共 ...

  5. android中的五大布局(控件的容器，可以放button等控件)

    一.android中五大布局相当于是容器,这些容器里可以放控件也可以放另一个容器,子控件和布局都需要制定属性. 1.相对布局:RelativeLayout @1控件默认堆叠排列,需要制定控件的相对位置 ...

  6. 视觉SLAM中相机详解

    视觉SLAM中,通常是指使用相机来解决定位和建图问题. SLAM中使用的相机往往更加简单,不携带昂贵的镜头,以一定的速率拍摄周围的环境,形成一个连续的视频流. 相机分类: 单目相机:只是用一个摄像头进 ...

  7. .net 连接SqlServer数据库及基本增删改查

    一.写在前面 因为这学期选修的 .net 课程就要上机考试了,所以总结下.net 操作 SqlServer 数据的方法.(因为本人方向是 Java,所以对.net 的了解不多,但以下所写代码均是经过测 ...

  8. zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...

  9. sudo 做不到的事

    本文是经验帖,以后遇到类似的情况会持续更新到这篇文章 普通用户使用sudo会遇到以下情况 1.字符流无法写入到 /var/log/messages /var/log/secure (实际上这些文件一旦 ...

  10. python 嵌套字典比较值，取值

    #取值import types allGuests = {'Alice': {'apples': 5, 'pretzels': {'12':{'beijing':456}}}, 'Bob': {'ha ...