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="图片高度" >

                           图片元素的加载原理

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369483.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Google Guava的订购API

我们一直在使用Google的Guava库做更多的事情-多么出色的库&#xff01; 我们用于它的最新内容是为我们的域对象整理比较器。 就是这样。 使用Apache Isis的JDO Objectstore &#xff0c;使您的类实现java.lang.Comparable &#xff0c;并对集合使用SortedSet是一个好习惯。 您可…

权限和ACL练习题

1、在/testdir/dir里创建的新文件自动属于g1组&#xff0c;组 g2的成员如&#xff1a;alice能对这些新文件有读写权限&#xff0c;组g3 的成员如&#xff1a;tom只能对新文件有读权限&#xff0c;其它用户&#xff08;不 属于g1,g2,g3&#xff09;不能访问这个文件夹。 前期准备…

33、求按从小到大的顺序的第N个丑数

一、题目 把只包含因子2、3和5的数称作丑数&#xff08;Ugly Number&#xff09;。例如6、8都是丑数&#xff0c;但14不是&#xff0c;因为它包含因子7。 习惯上我们把1当做是第一个丑数。求按从小到大的顺序的第N个丑数。 二、解法 1 public class Solution {2 public int …

CSS3的过渡和转换

CSS3的过渡和转换 1.过渡 什么是过渡呢&#xff1f;过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。 过渡的属性&#xff1a; 属性 描述csstransition简写属性&#xff0c;用于在一个属性中设置4个过渡属性3transition-property规定应用过渡的css属性的名称…

zookeeper选举

什么时候开始进行选举 1.服务器初始化启动的时候2.服务器运行期间连接不上leader的时候 初始化选举过程 进行leader选举至少需要两台服务器&#xff0c;我们这里举例为5台服务器&#xff08;1,2,3,4,5&#xff09;1.启动服务器1&#xff0c;第一次投票都先投给自己[1,0]。投票内…

Java,如果这是一个更好的世界

只是梦想着有一个更好的世界&#xff0c;在该世界中&#xff0c;Java平台中的一些旧错误已得到纠正&#xff0c;而某些令人敬畏的缺失功能也已实现。 不要误会我的意思。 我认为Java很棒。 但是它仍然存在一些问题&#xff0c;就像其他平台一样。 我希望没有这些特定的命令&…

参数到不进oracle,Oracle对于启动参数检查不严格

偶然发现Oracle对于pfile启动参数的检查并不严格。比如修改参数文件如下&#xff1a;[oracleyans1 ~]$ vi initprimary.oraprimary.__db_cache_size1644167168primary.__java_pool_size16777216primary.__large_pool_size16777216...*.sga_target2147483648*.standby_file_mana…

使用PLSQL-Developer导出Oracle表及数据pdf版

《使用PLSQL-Developer导出Oracle表及数据pdf版》下载地址&#xff1a; 网盘下载 转载于:https://www.cnblogs.com/long12365/p/9731340.html

C 语言实例 - 使用结构体(struct)

C 语言实例 - 使用结构体&#xff08;struct&#xff09;C 语言实例 C 语言实例 使用结构体&#xff08;struct&#xff09;存储学生信息。 实例 #include <stdio.h> struct student {char name[50];int roll;float marks; } s;int main() {printf("输入信息:\n&quo…

oracle10g的rat模拟,Oracle 10g Logminer 研究及测试

LogMiner提供了一个处理重做日志文件并将其内容翻译成代表对数据库的逻辑操作的SQL语句的过程。LogMiner运行在Oracle版本8.1或者更高版本中。一&#xff0c;如何使用Logminer:先要安装logminer的两个包&#xff1b;以SYS用户运行下面两个脚本,其中第一个脚本dbmslm.sql用来创建…

JavaEE概念简介

这篇文章旨在澄清J2EE范例中使用的首字母缩写词和概念。 J2EE代表Java to Platform&#xff0c;Entreprise Edition。 它使创建模块化Java应用程序成为可能&#xff0c;并将其部署在应用程序服务器上。 它依赖于Java SE&#xff0c;Java SE是一组Java库的核心&#xff0c;所有J…

编程新手的疑惑:代码循环如何画出一个简单的三角形

对一个编程新手来说&#xff0c;最先知道了解的莫过于代码执行的三种结构&#xff0c;顺序结构、循环结构和选择结构。 其中个人认为相对难以理解的是循环结构&#xff0c;而针对循环结构的练习题最多的就是循环画出一种简单图形&#xff0c;比如三角形。 当初我在学习写三角形…

解析PHP跳出循环的方法以及continue、break、exit的区别介绍

PHP中的循环结构大致有for循环&#xff0c;while循环&#xff0c;do{} while 循环以及foreach循环几种&#xff0c;不管哪种循环中&#xff0c;在PHP中跳出循环大致有这么几种方式&#xff1a; 代码&#xff1a; <?php$i 1;while (true) { // 这里看上去这个循环会一直执行…

js php 数据类型判断,【js基础】变量类型判断

类型判断方法比较&#xff1a;如果需要想详细了解&#xff0c;请看下文:注&#xff1a;原封不动复制备份&#xff0c;防止删帖在JavaScript中&#xff0c;有5种基本数据类型和1种复杂数据类型&#xff0c;基本数据类型有&#xff1a;Undefined, Null, Boolean, Number和String&…

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西&#xff0c;突有兴致&#xff0c;想在里面嵌套一个微信网页版。 好了&#xff0c;想法一出来&#xff0c;就行动吧&#xff0c;最终效果…

使用Spring Data Redis进行缓存

在下面的示例中&#xff0c;我将向您展示如何使用Spring Data – Redis项目作为Spring 3.1中引入的Spring Cache Abstraction的缓存提供程序。 我对如何使用Spring的基于Java的配置有很多疑问&#xff0c;因此我将同时提供基于XML和Java的配置供您查看。 依存关系 在此示例中使…

标准模板库(STL)学习指南之set集合

set是关联容器。其键值就是实值&#xff0c;实值就是键值&#xff0c;不可以有重复&#xff0c;所以我们不能通过set的迭代器来改变set的元素的值&#xff0c;set拥有和list相同的特性&#xff1a;当对他进行插入和删除操作的时候&#xff0c;操作之前的迭代器依然有效。当然删…

搜狗语料库数据整编

1 #!/bin/bash2 if [ -z "$1" ] ; then3 echo "请指定输入目录"4 exit 15 elif [ ! -d $1 ] ; then6 echo "[$1]不是一个合法的输入路径"7 exit 18 fi9 if [ -z "$2" ] ; then 10 echo "请指定输出目录" 11 exi…

linux oracle swd.oui,centos7安装oracle11g报错,请问怎么解?

centos7安装oracle11g报错&#xff0c;请问怎么解&#xff1f;在centos7下安装oracle11g到85%时报错提示Error in invoking target install of makefile ins_ctxm.mk查了log提示如下INFO: Start output from spawned process:INFO: ----------------------------------INFO:INF…

CSS布局技巧之——各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时&#xff0c;有时一个属性就能搞定&#xff0c;有时则需要一定的技巧才能兼容到所有浏览器&#xff0c;本文就居中的一些常用方法做个简单的介绍。 注&#xff1a;本文所讲方法除了特别说明外&#xff0c;都是兼容…