HTML&CSS学习总结

最新推荐文章于 2022-07-08 23:36:37 发布

Dear小破

最新推荐文章于 2022-07-08 23:36:37 发布

阅读量611

点赞数

分类专栏： HTML/CSS/JavaSprite 文章标签： HTML CSS 编程语言文档 java

本文链接：https://blog.csdn.net/zhangruiwan/article/details/9530437

版权

HTML/CSS/JavaSprite 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

超文本标语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。是网页的源码，用浏览器“解释和执行”。需要注意的是，html不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。HTML 标签对大小写不敏感，但推荐使用小写标签。

HTML 标签：

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML文档结构：

<html>

<head>

<title>Title of the document</title>

</head>



<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

其中：

<html> 与 </html> 之间的文本描述网页

<title>与</title>之间的内容是文档的标题，即网页的标题

<body> 与 </body> 之间的文本是可见的页面内容

<h1> 与 </h1> 之间的文本被显示为标题

<p> 与 </p> 之间的文本被显示为段落

HTML标签分类：

1.块级标签：显示为块状，前后各隔一行

2.行级标签：按行逐一显示

分类好处：方便后续的布局设计

常用的布局标签：

(1)有序列表标签：

<ol>

<li>列表项</li>

...

</ol>

(2)无序列表标签：

<ul>

<li>列表项</li>

...

</ul>

(3)定义描述标签：

<dl>

<dt>标题</dt>

<dd>描述</dd>

<dd>描述</dd>

</dl>

(4)表格

<table>

  <tr>

    <td>...</td>

    <td>...</td>

  </tr>

  <tr>

    <td>...</td>

    <td>...</td>

  </tr>

</table>

<tr></tr>表示行，<td></td>表示列。

(5)表单(一般和table一起使用)

<form>

<table>

  <tr>

    <td> </td>

    <td> </td>

  </tr>

</table>

</form>

(6)分区标签(div)

<div>此处显示新 Div 标签的内容</div>

div标签是开发常用的标签，一般当做结构化块使用，作为逻辑分区（分块），即容器类使用。

实际开发常用的4中块级结构：

1.div-ul(ol)-li 用于导航或菜单

2.div-dl-dt-dd 图文混编

3.table-tr-td 图文布局或显示数据

4.form-table-tr-td 布局表单

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

提示：请使用花括号来包围声明。

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {

  color: green;

  }

CSS框模型：

(Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

CSS三种样式表：

1.内部样式表影响内部所有超链接

2.外部样式表

3.行内样式表重写了被内部样式表影响的链接

Dear小破

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS学习总结

超文本标语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。是网页的源码，用浏览器“解释和执行”。需要注意的是，html不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。HTML 标签对大小写不敏感，但推荐使用小写标签。HTML 标签：
复制链接

扫一扫