您的位置：首页 > Web前端 > CSS

教你几分钟认识前端——HTML和css基础知识

2019-04-11 17:09 686 查看

Html是超文本标记语言（英语全称：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

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

一.基础内容：

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

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

有些标记有属性，具体格式，以a标记为例，xxxx其中make为标记的属性。

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

二.常用标记的使用与意义：

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

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

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

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

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

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

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

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

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

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

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

插入一个换行符

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

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

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

<ul>
标签定义无序列表

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

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

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

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

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

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

一些字符实体

<显示为<

显示为>

©right显示为©

三.一个简单的html框架

> <!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 href="(链接目标文件的路径或url)"

title=“文本描述”>（链接文本）

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

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

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

<a href="index.html#标识符">xxxxx</a>

并同步页面中的标题,链接所使用的标识符要与标题的标识符设置一致

<h2 id="标识符">xxxxx</h2>

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

<a target="_blank" href=“xxxxxxxx”

title=“xxxxxxxxx”>xxxxxxxxx

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

五.在页面中插入图像

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

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

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

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

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航