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. NanUI文档 - 使用网页来设计整个窗口

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  2. Django实战，小网站实现增删改查

    直接上代码 视图: from django.shortcuts import render,render_to_response, redirect from submit import models ...

  3. 伪列：Oracle显示查询结果前几条记录用rownum<=。去掉重复记录，保留最早录入记录：取出最小ROWID

    显示6-10行记录: 去掉重复记录,保留最早录入记录:取出最小ROWID SELECT deptno,dname,loc,min(ROWID) FROM dept GROUP BY deptno,dn ...

  4. C++11 新知识点

    翻了下新版的C++ Primer,新的C++ 11真是变化很大,新增了很多语法特性.虽然已经很久没在写C++了,但一直对这门经典语言很感兴趣的,大致看了看前几章基础部分,总结下新特性备个忘吧.估计也很 ...

  5. 测试xss

    <script>window.onload=function(){ alert('加载完毕');}</script>

  6. crm踩坑记(三)

    React 如何同步更新state 由于setState方法是异步的,而通常很多时候在一个生命周期里更新state后需要在另一个生命周期里使用这个state. 下面介绍几个方法 // 1 this.s ...

  7. Git详解之八：Git与其他系统

    Git 与其他系统 世界不是完美的.大多数时候,将所有接触到的项目全部转向 Git 是不可能的.有时我们不得不为某个项目使用其他的版本控制系统(VCS, Version Control System ...

  8. vim置于后台,vim 编辑多文件

    这里介绍一个很实用的方法:1.将vim置于后台,直接按 ctrl + z可以将当前的vim置于后台 2.然后可以去别的目录再打开一个 当你需要打开之前的vim的时候3.打jobs命令看当前有哪些vim ...

  9. NestedScrollingParent, NestedScrollingChild 详解

    之前听同事提起过 NestedScrollingView,但是一直没有时间去了解,最近一段时间比较空,才开始去了解.先点开,看 NestedScrollingView 源码: public class ...

  10. Java---hashCode()和equals()

    1.hashCode()和equals() API hashCode()和equals()都来自上帝类Object, 所有的类都会拥有这两个方法,特定时,复写它们. 它们是用来在同一类中做比较用的,尤 ...