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基础知识(常见元素、列表、链接元素、图片元素)相关推荐
- HTML基础知识(一):行内元素,块级元素,行内块元素
文章目录 一.html元素分类 二.块元素 三.行内元素 四.行内块元素 五.替换元素和非替换元素 六.元素转换 七.总结 一.html元素分类 html元素:行内元素.块元素.行内块元素 二.块元素 ...
- Python基础知识4——操作列表
本章内容来自书籍,记录下来仅方便复习,如有侵权,请联系作者删除. 一.遍历整个列表 遍历列表中的所有元素,并对每个元素执行相同的操作.可用Python中的for循环. names = ['tom',' ...
- scala 获取数组中元素_从Scala中的元素列表中获取随机元素
scala 获取数组中元素 We can access a random element from a list in Scala using the random variable. To use ...
- python中的数据类型有哪些是可阅读_Python list data type(list)[学习Python的必要基础知识][阅读本文],列表,数据类型,必备,看此,一篇,就够,了...
您的"关注"和"点赞",是信任,是认可,是支持,是动力- 如意见相佐,可留言. 本人必将竭尽全力试图做到准确和全面,终其一生进行修改补充更新. 1 Python ...
- 前端基础知识 (五)JS删除数组元素的方法
一.length属性 JS 中Array的length长度非常有特点,他不是只读的,因此可以设置. var colors = ["red","blue",&qu ...
- 【基础知识】如何在浏览器中查找元素属性节点
首先,什么是属性节点?属性节点是在编写html代码时,在html标签中添加的属性. 本文重点:如果您用的ie,我恳请您不要在用了,你们的每次使用都是打在前端工程师身上的一发子弹 代码实例: <! ...
- 后端程序员必备的 Linux 基础知识+常见命令(近万字总结)
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 今天这篇文章中简单介绍一下一个 Java 程序员必知的 Linux 的一些概念以及常见命令. 如果文章有任何需要 ...
- python列表存储字符串_Python 基础知识全篇-字符串列表
现在我们已经对列表有了一定的了解.回头看一下字符串,会发现它不过是字符的集合,即包含一系列字符的列表.它们背后的工作原理是如此的相似,接下来让我们一探究竟吧. 作为字符列表的字符串 就像列表一样,我们 ...
- 基础知识——常见文件格式
常见操作系统 UNIX.Linux.Chrome OS.Mac OS(苹果) 移动设备:iOS(苹果).Android.WP(Windows Phone) 常见文件格式 视频类 AVI.WMV.MPE ...
- 不愧是阿里P8!后端程序员必备的Linux基础知识+常见命令
前言 要相信,你现在所有的努力和付出都会在将来的某一天回报给你! 首先阿里巴巴作为国内互联网行业的领头羊,培养了一代又一代的IT技术人才,很多想进阿里这些互联网大厂的程序员看中的不仅仅是高薪+丰厚的福 ...
最新文章
- 通过示例学习JavaScript闭包
- WebBrowser
- WINCE平台下C#应用程序中使用看门狗
- mysql sql优化_浅谈mysql中sql优化
- oracle数据库中对varchar类型求max的解决方法
- python字符串逆序输出代码_一行代码实现字符串逆序输出
- SAP Fiori Elements edit按钮的实现细节
- JAVA UDP网络编程学习笔记
- OpenShift 4 - 通过 secret 访问受保护的镜像
- 有关android工程的构建脚本(build.xml)的学习
- 让割草类游戏更有趣的攻击动作设计技巧
- Thinkphp5结合layer导入excel
- 打开用友总账时提示“该产品没有安装,无法使用”
- 从零开始搭建自己的网站二十一:网站IP/PV统计功能设计
- 【排错必看】Windows系统安装mysql时常见问题及解决方法
- 什么是整数、自然数、质数、合数
- ubuntunbsp;16.04安装smba服务
- Rust之和mut、mut
- python3个引号啥意思_Python中单引号,双引号,3个单引号及3个双引号的区别
- 现在最流行的Java开发技术是什么?