HTML&CSS学习总结

HTML:

一.HTML元素


HTML 是一种标签语言,使用标签来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标签包含一些规定的"元素"如 <head>,<title>,<body>,<header>,<footer>,<article>,<section>,<p>,<div>,<span>,<img>等。
开始标签:元素的名称被左、右角括号所包围。表示元素作用范围的开始。
结束标签:元素名之前多一个斜杠,表示着元素作用结尾。
内容:元素的内容,本例中就是所输入的文本本身。
元素:开始标签、结束标签与内容相结合,便是一个完整的元素。(标签一般都是开始标签与结束标签为一组,有开始标签就必须有结束标签,二者缺一不可。但有些标签除外,如<br>为单标签,表示换行。)

二.HTML 文档


1. HTML 文档:


<!DOCTYPE html>: 声明文档类型。可有可无。
<html></html>: <html>元素。这个元素包裹了整个完整的页面,是一个根元素,其它元素都嵌套到其中。
<head></head>: <head>元素。 这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题,对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标,出现在浏览器标签上。
<title></title>: 设置页面标题,出现在浏览器标签上。
<body></body>: <body>元素。 包含你能在页面看到的所有内容,包括文本,图片,音频,游戏等等。


2.注释
如同大部分的编程语言一样,在 HTML 中有一种可用的机制来在代码中书写注释 。

注释标签为<!--  -->,在这个标签中空格位置的所有内容将会被注释掉,对用户不可见。

<p>这是一个普通标签,可以显示!</p>
<!-- <p>因为p标签在注释标签中,所以不可以显示出来</p> -->
小提示: 在 code 软件中,输入Ctrl + /即可快捷的进行注释!

注意: HTML 不区分标签的大小写,但建议全部使用小写!

3.空元素
一般来说,元素都拥有开始标签,内容,结束标签。但有一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素,如下:

<!-- 换行 -->
<p>我可以<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
提示: 在上面代码中你看到<br>元素放到<p>元素之中——这被称作嵌套!

4.元素的属性
元素是可以有相关属性的。属性包含元素的额外信息,这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试!</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
一个属性必须包含如下内容:

一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
属性名称,后面跟着一个 = 号。
一个属性值,由一对引号 "" 引起来。
HTML 提供了从大到小6级标题,分别是:<h1> ~ <h6>.


三.标题


<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
在页面中,标题

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值