HTML基础知识(常见元素、列表、链接元素、图片元素)
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基础知识(常见元素、列表、链接元素、图片元素)的更多相关文章
- python基础知识回顾之列表
在python 中,主要的常用数据类型有列表,元组,字典,集合,字符串.对于这些基础知识,应该要能够足够熟练掌握. 如何创建列表: # 创建一个空列表:定义一个变量,然后在等号右边放一个中括号,就创建 ...
- 1.10 Python基础知识 - 序列:列表
在Python中有很多的组合数据类型,其中包括列表,元组,字符串等数据类型,这些数据类型统称为序列类型,用他们可以处理复杂的数据. 列表,是一组有序元素组合的数据结构.列表是可变的数据类型. 列表采用 ...
- Python3基础 list(enumerate()) 将一个列表的每一个元素转换成 带索引值的元组
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- Python3基础 list pop 取出列表的最后一个元素
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 后端程序员必备的 Linux 基础知识+常见命令(近万字总结)
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 今天这篇文章中简单介绍一下一个 Java 程序员必知的 Linux 的一些概念以及常见命令. 如果文章有任何需要 ...
- python基础知识-集合,列表,元组间的相互装换
在python中列表,元祖,集合间可以进行相互转化, def main(): set1={'hello','good','banana','zoo','Python','hello'} print(l ...
- python入门基础知识三(列表和元组)
列表(list)的操作 1. 形式 var = ['char1','char2','char3',...] var = [value1,value2,value3,...] 2. 列表的增删改查 查: ...
- Struts2入门1 Struts2基础知识
Struts2入门1 Struts2基础知识 20131130 代码下载: 链接: http://pan.baidu.com/s/11mYG1 密码: aua5 前言: 之前学习了Spring和Hib ...
- Matplotlib基础知识
Matplotlib基础知识 Matplotlib中的基本图表包括的元素 x轴和y轴 axis水平和垂直的轴线 x轴和y轴刻度 tick刻度标示坐标轴的分隔,包括最小刻度和最大刻度 x轴和y轴刻度标签 ...
- Python基础:序列(列表、元组)
一.概述 列表(list)是由一个个 Python对象 组成的序列.其中,Python对象 可以是任何类型的对象,包括 Python标准类型(数值.字符串.列表.元组和字典)以及 用户自定义类型(类) ...
随机推荐
- 项目实战12.1—企业级监控工具应用实战-zabbix安装与基础操作
无监控,不运维.好了,废话不多说,下面都是干货. 警告:流量党勿入,图片太多!!! 项目实战系列,总架构图 http://www.cnblogs.com/along21/p/8000812.html ...
- Requests模块 HTTP for Humans
安装方式 $ pip install requests 基本GET请求(headers参数 和 parmas参数) 1.最基本的GET请求可以直接用get方法 response = requests. ...
- Java Restful Web Service 学习指南
Restful是一种架构style,目前常说的有restful web service, resultful http.现在热搜榜的微服务,大多数会采用Restful方式. JAX-RS 作为一个Re ...
- .Net Ajax跨域请求实现
下一阵子要做一个网站Web储备一下知识,AJAX 实现跨域请求,估计会用到,以前在学 WebServer 时候老师整理的一个文档,现在便于查阅和使用现在放到我的博客中. 一般平时我写web页面的时 ...
- Android Studio 提示android.support.v4不存在的解决方法
最近想学习仿QQ列表的侧滑删除功能,看完资料之后,发现有一堆错误,看了一下,说是不存在android.support.v4包不存在,浪费了一个多小时,终于是找到了解决方法,便是记录下来 打开file- ...
- 【java】文件操作java.io.File
package 文件操作; import java.io.File; import java.io.IOException; public class TestFile { public static ...
- (转载)Eclipse将引用了第三方jar包的Java项目打包成可执行jar的两种方法
转载自:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 "MA ...
- Effective Java 第三版——11. 重写equals方法时同时也要重写hashcode方法
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
- [LeetCode] 链表反转相关题目
暂时接触到LeetCode上与链表反转相关的题目一共有3道,在这篇博文里面总结一下.首先要讲一下我一开始思考的误区:链表的反转,不是改变节点的位置,而是改变每一个节点next指针的指向. 下面直接看看 ...
- JMeter参数化实现
参数化:指对每次发起的请求,参数名称相同,参数值进行替换,如登录三次系统,每次用不同的用户名和密码. 1.1.1. 从csv文件读取(CSV Data Set Config) 步骤: 1)新建一个文 ...