前端 HTML 与 CSS

最新推荐文章于 2024-02-21 18:02:20 发布

Sean.xs

最新推荐文章于 2024-02-21 18:02:20 发布

阅读量244

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/Sdreamery/article/details/82634385

版权

Java Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

6.1 position（绝对定位与相对定位）

6.2 flooat（浮动）

一、HTML

1. html 概念

HTML（HyperText Markup Language）就是超文本标记语言。”超文本”就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。

2. 分类

基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。

3. 基本语法

3.1 html 标签

(1) <标签名>
单标签,不设置属性值。

<br/>、<hr/>

(2) <标签名称属性=”属性值”>
单标签(也叫空元素)，设置属性值。

<hr width=”800”/>

(3) <标签名称>…</标记名称>
双标签，不设置属性值。

<title>…</title>

(4) <标签名称属性=”属性值”>…</标记名称>
双标签，设置属性值

<body bgcolor=”red”>…</body>
<font size=”7”>…</font>

（5）标签的分类

HTML 中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素特点：元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

他们的属性不是固定不变的，后期也可以通过 CSS 进行修改。

3.2 html 整体结构

（1）概念

HTML 的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间有需要正确嵌套。

<html>
<head></head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 文档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
</body>
</html>

（2）<html>…</html>

<html>标志用于 HTML 文档的最前边，用来标识 HTML 文档的开始。而</html>标志放在HTML 文档的最后边，用来标识 HTML 文档的结束，两个标志必须一块使用。

（3）<head>…</head>

<head>和</head>构成 HTML 文档的开头部分。<head>和</head>标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。
在此标志对之间可以使用<title></title>、<script></script>、<meta>、<link>等标签。
<meta>：用来提供关于文档的信息，起始属性为：charset="utf8"。表示告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是 utf8，而浏览器也设置utf8 即可正确显示中文。
<link>：用来引入 css 文件
<script>：用来引入 js 文件或编写 js 代码。

（4）<title>…</title>

<title>定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。

（5）<base>

<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的URL。

（6）<body> …</body>

一般情况下浏览器上显示的内容的都放在 body 中，不排除其他标签可以不用 body，比如frameset 框架集标签。
<body>和</body>是 HTML 文档的主体部分，在此标志对之间可包含<p>…</p>、<h1>…</h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。

（7）常用属性

属性	值	描述
bgcolor	rgb(x,x,x)：red、green、blue，x:0-255 #xxxxxx：十六进制的数字，00-ff Colorname：Red、Green...	规定文档的背景颜色，以后可以用样式取代它
text	rgb(x,x,x) #xxxxxx colorname	规定文档中所有文本的颜色，以后可以用样式取代它

3.3 html 解析标准

由于使用的场景或者版本的更替间，HTML 使用的标准不同，所以需要浏览器按照不同的标准来解析 HTML 文本内容，这就需要告知浏览器我当前的 HTML 页面是按照那种方式进行编写的，需在html文件的最顶端写上<!DOCTYPE>

4. 常用标签

HTML 页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即可。大致可分为如下几类：头标签、标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div 和 span、格式化文字的。

4.1 标题和水平线

<h1> - <h6> 标签可定义标题，标题依次递减，由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。请不要利用标题标签来改变同一行中的字体大小。
相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
<h999>这样的标签不产生错误，但是不具有标题的效果。
h1 标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是一个页面最好只有一个 h1 标签，否则可能进入搜索引擎的黑名单。

<h1></h1>

<hr /> 标签在 HTML 页面中创建一条水平线（horizontal rule）可以在视觉上将文档分隔成各个部分。在 HTML 中，<hr> 标签没有结束标签。

<hr />

常用属性

4.2 段落和换行

<p>标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

各个段落之间会有大的空隙。

<p></p>

br 标签为换行符号，<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。

注意：<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。请使用 <br> 来输入空行，而不是分割段落。

<br />

4.3 图片

img 元素向网页中嵌入一幅图像。
注意：从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

行内：

<img src=”” alt=””>

必须属性

常用属性

4.4 a 标签

<a>标签定义超链接，用于从一张页面链接到另一张页面。
<a>元素最重要的属性是 href 属性，它指示要链接的目标位置，同时没有 href 属性 a 标签内的内容与普通文本没有区别，也就失去了超链接的功能。
若是想要跳转到当前页面，那么 href 的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

<a href=”http://www.baidu.com”>百度</a>

利用 a 标签的 name 属性：<a name="top"></a>
一般标签的 id 属性：div id=""、a id=""等：
<div id="top"></div>、<a id="top"></a>

<a href="#top">返回首部</a>

常用属性

4.5 div 和 span

<div>是一个块级元素，通常与 css 配合使用，用于布局。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

<div>content</div>

常用属性

<span>标签被用来组合文档中的行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化

<span>content</span>

4.6 表格

<table></table> 标签定义 HTML 表格。
<tr></tr>标签定义表格的行。tr 元素包含一个或多个 th 或 td 元素
<td></td>标签定义 HTML 表格中的标准单元格。
<th></th>定义表格内的表头单元格。th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

理解：table 相当于一个表格的外框，tr 为行，td 为一个一个单元格，th 为有标题作用的单元格，th 中的内容同时有加粗的效果。

table 常用属性

tr 常用属性

<td>的 colspan 和 rowspan 分别规定单元格横跨的列数和行数

4.7 列表

（1）有序列表

由<ol></ol>和<li></li>标签组成。

<ol>
<li></li>
<li></li>
......
</ol>

常用属性

（2）无序列表

由<ul></ul>和<li></li>标签组成。

<ul>
<li></li>
<li></li>
......
</ul>

4.8 fom表单

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea、fieldset、legend 和 label 等元素。
<form> 标签用于为用户输入创建 HTML 表单。
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。

（1）常用属性

（2）提交方式

method：表单提交方式：get、post
get：默认，主动的获取方式，数据放在 url 上，数据的容量有限，安全性差，有缓存
post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

（3）<input>

<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

常用属性

若上传文件，请求方式为 post，且表单添加一个属性：enctype="multipart/form-data"

注意：

没有 name 属性的属性是无法提交到后台的！！！！
Radio 单选按钮以 name 相同为一组。
Checkbox 复选按钮以 name 相同为一组。

<label></label>

<label> 标签为 input 元素定义标注（标记）。
label 元素不会呈现任何的特殊效果。label 标签的 for 属性应当与相关元素的 id 属性相同。

<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>

<button></button>

<button> 按钮 </button>

常用属性

<select></select>

<select>用于定义下拉列表。

<select name="cars" >
<option value="audi">Audi</option>
<option value="qq">QQ</option>
<option value="bmw">BMW</option>
</select>

select 常用属性

option 常用属性

<textarea></textarea>

该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols 规定文本区内的可见宽度。rows 规定文本区内的可见行数。

<textarea>content</textarea>

4.9 格式化文字的标签

<font>

规定文本的字体、字体尺寸、字体颜色。

<b>（粗文本）、<i>（斜体文本）、<u>（下划线文本）、 < del >（中划线文本）、<sub>（下标文本）、<sup>（上标文本）

5. HTML 常用字符实体

在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（characterentities）。

实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格	&nbsp；	&#160；
<	小于号	&lt；	&#60；
>	大于号	&gt；	&#38；
©	版权	&copy	&#169；

<body>
    &nbsp;
    &lt;
    &gt;
    &copy;
</body>

二、CSS介绍

CSS（Cascade Style Sheets）层叠样式表, 是一种用来表现 HTML或 XML等文件样式的计算机语言。CSS是用来写样式的，必须依附HTML来展示其功能。

2. 基础语法

2.1 基本格式

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

选择器名{
属性 : 属性值;
......
}

div{
background-color : red;
}

注意：

css 声明要以分号 ; 结束，声明以{}括起来
建议一行书写一个属性
若值为若干单词，则要给值加引号，如 font-family: "agency fb";

2.2 CSS注释

css的注释只有一种，同Java的多行注释相同。

/*
这里的内容是css注释
*/

3. CSS的使用方式

3.1 行内样式

使用style属性引入CSS样式。

（1）示例：

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">Leaping Above The Water</h1>
     <p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

（2）适用场景

行内式式将样式定义在具体 html 元素的 style 属性中。以行内式写的 CSS 耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。

3.2 内联样式（嵌入式）

在style标签中书写CSS代码。style标签写在head标签中。

（1）示例：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是一个div</div>
</body>
</html>

（2）适用场景：

如果需要添加的样式比较多，行内样式的耦合性太高，使用内联样式可以利用合理的选择器给一些html添加相同的样式，减少了代码的重复性，并且可以时html界面变得简洁。

3.3 外联样式（外部引入）

CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表。

（1）示例

<link type="text/css" rel="styleSheet" href="CSS文件路径" />

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

（2）有点与使用场景

很多时候，大量的 HTML 页面使用了同一个 CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过<link>元素去引入它。使用外联样式使html代码与css代码分离开来，使结构与样式相分离，增强了代码的可读性，方便了后期的优化与修改。

4. 选择器

4.1 基础选择器

（1）通用选择器

使用通配符 * 来表示，表示所有的属性都可以使用，一般使用在css文件的头部，来进行页面结构的初始化。

*{
    margin：0；
    padding：0；
    list-style:none;
}

（2）ID选择器

使用符号 # 加 id名来表示，同一个元素只能有一个id值，id不可重复。

#only{
    background-color:red;
}

（3）类选择器

使用 .class 就可以找到具有clss选择器的元素了，一个class可以对应多个元素。

<div class="demo">123</div>
<div class="demo">abc</div>

.demo{
    backround-color:green;
}

（4）标签选择器

使用标签名加大括号表示，可以选中此标签下的所有元素。

<span>123</span>
<div>
<span>abc</span>
</div>

span{
    corlor:red;
    font-size:5px;
}

（5）属性选择器

使用 [属性名]{ } 来表示，选取带有指定属性的元素。

[id]{
color: red;
font-size: 20px;
}

4.2 复杂选择器

（1）分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，可以消除代码的耦合性，简化代码。

可以写成一行，建议换行竖着写。

div,
#id,
.class
{
    background-color:pink;
    font-weight:bold;
}

（2）派生选择器

用于选择指定标签元素下的后辈元素，以空格分隔。所有后辈都可选中。

div .class #id{
    border: 1px solid red;
}

（3）子元素选择器

用于选择指定标签元素的所有第一代子元素，以大于号 > 分隔。与派生选择器不同的是只能选中第一级子元素。

div>.class{
    border: 1px solid red;
}

（4）并列选择器（兄弟选择器）

1）相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

#d + div {
border: 1px solid red;
}

2）普通兄弟选择器

选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

li ~ li {
background-color : yellow;
}

（5）伪类选择器（伪元素选择器）

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

4.3 选择器的权重

选择器的权重不同，css的展示优先级也不同。权重越高，优先级越高。

5. 常用属性的设定

5.1 css背景

（1）背景颜色

使用 background-color 来设定。

body {
    background-color:black;
}

（2）背景图片

使用 background-img 来设定。

body {
    background-image:url(“图片路径地址”);
}

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
使用 background-repeat 可以用来设置是否以及如何重复背景图片。
repeat：默认。图片将同时在水平和垂直方向上重复。
repeat-x repeat-y ：可以分开设置在水平和垂直方向上的重复情况。
no-repeat：背景图片仅显示一次。

body {
background-image: url(图片地址);
background-repeat: no-repeat;/*表示不允许重复*/
}

5.2 文本

（1）文本颜色

直接使用 color 来设置文本的颜色。

div {
    color:blue;
}
.class {
    color:#fff;
}
#id {
    color:rgb(255,255,255);
}

（2）文本对齐方式

text-align 用来设置文本对齐方式，center（居中），left（左对齐），right（右对齐）

（3）文本修饰

text-decoration 用来规定添加到文本的修饰，属性值：none、underline、overline、line-through

（4）文本缩进

text-indent 用来设置首行缩进

.ident {text-indent: 2em;}
/*
这里的 em 也是一个相对单位，2em 表示缩进2个字符。
*/

5.3 字体

5.4 列表（list-style）

list-style 简写属性在一个声明中设置所有的列表属性。

可以按顺序设置如下属性：

list-style-type	设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position	设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image	使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
inherit	规定应该从父元素继承 list-style 属性的值。

常用的列表样式值（list-style-type）。

最常用的是：list-style = none 用于进行css样式的初始化。

5.5 盒子模型

（1）盒子的组成

盒子模型是虚拟的，由四部分组成。

A 盒子壁 border
B 盒子内边距 padding
C 盒子内容 content=width+height
D 盒子外边距 margin

（2）模型图

（3）常用属性

（4）注意事项

使用 padding 并不会缩小元素，而是向外扩大盒子，但是盒子会产生变形。
使用 margin 会使盒子外边距增大，增大的只是盒子与其他元素之间的距离，并不会改变盒子的尺寸。

6. 定位与浮动

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

6.1 position（绝对定位与相对定位）

static：元素框正常生成。作为文档流的一部分（默认值）
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

6.2 flooat（浮动）

当元素应用了 float 属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。

会将元素的 display 属性变更为 inline-block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用 float）。

注意：只有横向浮动，并没有纵向浮动。

Sean.xs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 HTML 与 CSS

目录一、HTML1. html 概念2. 分类3. 基本语法3.1 html 标签3.2 html 整体结构3.3 html 解析标准4. 常用标签4.1 标题和水平线4.2 段落和换行4.3 图片4.4 a 标签4.5 div 和 span4.6 表格4.7 列表4.8 fom表单4.9 格式化文字的标签5. HTML 常...
复制链接

扫一扫