欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Html和Css学习笔记-html基础知识

程序员文章站 2023-02-21 11:47:08
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。 这里所介绍的html和css的版本为html5与css3 Html是超文本 ......

我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错!

此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。

这里所介绍的html和css的版本为html5与css3

html是超文本标记语言(英语全称:hypertext markup language,简称:html)是一种用于创建网页的标准标记语言

css是层叠样式表(英文全称:cascading style sheets)是一种用来html和xml等文件样式的计算机语言,css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

html验证工具的地址:

标记=开始标记+内容+结束标记

标记可以嵌套使用,例如:页面主体标记中含有标题标记,段落标记。

有些标记有属性,具体格式,以a标记为例,<a make="xxxx">xxxx</a>其中make为标记的属性。

设计为没有任何内容的元素称为void元素,需要使用void元素时,只需要使用一个开始标记,这是一种方便的简写,可以减少html中的标记数量

一.常用标记的使用与意义:

<!doctype html>html5的文档类型定义,这一行要写到html文件开头

<html></html>标记html页面的开始和结束

<head></head>标记页面的有关信息

<meta charset="utf-8">标记指定字符编码,这一行要写到<head>元素中所有其他元素上面

<title></title>为页面指定一个标题,标记中的内容出现在浏览器的顶部

<body></body>标记页面的主体内容

<!--xxxxx-->中间xxx的内容为注释的内容

编写html时要把首部和页面主体分开

<h1></h1>为主标题,从<h2>到<h6>依次为副标题,字体由大到小

<p></p>开始一个段落

<blockquote>  </blockquote> 标签定义块引用,之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间

<br>插入一个换行符

<q> 标签定义一个短的引用,浏览器经常会在这种引用的周围插入引号

需要了解的内容(一些老版本弃置的元素与不建议使用的元素,做到看见了要明白其含义

<ol></ol>定义一个有序列表

<ul> 标签定义无序列表

<li> 标签定义列表项目,<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中

<dl> 标签定义一个描述列表,<dl> 标签与 <dt>(定义项目/名字)和 <dd>(描述每一个项目/名字)一起使用

<em></em>标签告诉浏览器把其中的文本表示为强调的内容,对于所有浏览器来说,这意味着要把这段文字用斜体来显示

<body bgcolor="xxx" text="xxxx">,bgcolor属性设置页面颜色,text属性设置文本颜色

<font face="arial">xxxx</font>利用font元素改变字体

<center></center>对其包围的文本进行水平居中处理

一些字符实体

&lt显示为<

&gt显示为>

&copyright显示为©

二.一个简单的html框架

<!--这是仁人用于博客中的演示文本,写于2019年03月04日-->
<!doctype html>
<html>
    <head>
         <meta charset="utf-8">  
        <title>hello wrld!</title>
    </head>
    <body>
        <h1>演示文件,页面显示hello world!</h1>
        <p>
            hello wrld !
        </p>
    </body>
</html>

三.在页面中插入一个链接

<a></a>用于创建指向其它页面的链接,元素中的内容就是链接文本,在浏览器中链接文本会显示有下划线,指示这是可单击的,例如:

 <a href="(链接目标文件的路径或url)"

  title="文本描述">(链接文本)</a>

href属性指向链接文件的路径

rirle属性所需链接页面的文本描述

加入id属性用于具体指向某个链接的某个标题,例如:

<a href="index.html#标识符">xxxxx</a>
并同步页面中的标题,链接所使用的标识符要与标题的标识符设置一致
<h2 id="标识符">xxxxx</h2>

加入target属性,使浏览器打开链接时为单独的窗口,而不是同一窗口,例如:

<a target="_blank" href="xxxxxxxx"
                 title="xxxxxxxxx">xxxxxxxxx</a>

如果不加入target属性,点击链接时浏览器会在同一窗口打开链接,加入此属性,浏览器会在单独窗口打开链接

四.在页面中插入图像

<img src="xxxxx">标记为在页面中显示图像,xxx为图片的路径或url

alt=“xxx”属性为描述这个图像内容的文本,如果图像未能显示,就会使用这个文本来取代它。

width-"xxx"属性告诉浏览器在页面中显示图像的宽度

height="xxx"属性告诉浏览器在页面中显示图像的高度