蓝旭工作室2023春季培训预习博客（二）

最新推荐文章于 2024-05-22 14:25:31 发布

D1gnity_

最新推荐文章于 2024-05-22 14:25:31 发布

阅读量1.2k

点赞数 23

文章标签： html css 前端

本文链接：https://blog.csdn.net/D1gnity_/article/details/129841681

版权

前言

第二周有两个需了解的内容，如下

1. HTML常用标签

2. CSS基础

一. HTML常用标签

1. HTML概述

HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术。

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

2. HTML常用基础标签

HTML的文件骨架

1. Head标签：其中可以对网页进行整体设置

2. Body标签：是HTML的正文标签,我们在网页上能看到的内容都写在该标签中

标签的分类

1. 带有标签体的标签，这种标签成对出现;有开始标签也有单独的结束标签,:<html></html>,<head></head>,<body></body>

2. 没有标签体的标签（空标签，自结束标签）,开始在结束在同一个标签中<br />,<hr />

常用基本标签

1. 标题标签

<hn>...</hn>

n值为1至6.

2. 字体标签

<font size="XX" color="XXX" face="XXX">
    XXXXXX
</font>

3. 段落标签

<p>...</p>

4. 换行标签

<br>...</br>

5. 水平线标签

<hr />

6. 图片标签

<img src="XXXXXX.XXX" alt="XXXX" title="XXX" height="XX" width="XX" border="XXX">

其中img标签中常用属性如下：

src：图片名及url地址
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细

绝对路径和相对路径：

绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)
- 例如：
  C:\xyz\test.txt 代表了test.txt文件的绝对路径。
  http://www.sun.com/index.htm也代表了一个URL绝对路径。
相对路路径：相对与某个基准目录的路路径。包含Web的相对路径（HTML中的相对目录），
- 例如：
  在Web开发中，"/"代表Web应用的根目录。
  物理路径的相对表示，
  “./” 代表当前目录,
  "…/"代表上级目录。这种类似的表示，也是属于相对路径。

7. 背景音乐

<audio src="XXXXX.XXX" autoplay="XXXXXXXX" loop="XXXX">

其中audio标签中常用属性如下：

src：音频文件路径
autoplay：设置音频是否自动播放（默认有此属性为自动播放已经加载的的媒体文件），或查询是否已设置为autoplay
autobuffer：设置是否在页面加载时自动缓冲音频，如果设置了autoplay，则忽略此特性
loop：设置音频是否要循环播放。，或查询是否已设置为loop
currentTime：以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls：显示或者隐藏用户控制界面（属性供添加播放、暂停和音量控件。）
volume：在0.0到1.0间设置音量值，或查询当前音量值
muted：设置是否静音

8. 超链接标签

<a href="https://XXXXXXXXXXXXX" target="XXXXX">...</a>

其中a标签中属性如下：

href: 必须，指的是链接跳转地址
target: 表示链接的打开方式：

9. 列表标签

表格	描述	常用属性
`<table>...</table>`	定义表头	border, width, cellspacing, cellpadding
`<caption>...</caption>`	定义表格标题	align排列方式
`<th>...</th>`	定义表格的表头	align, valign, bgcolor, rowspan, colspan, width, height
`<tr>...</tr>`	定义表格的行	align, valign, bgcolor
`<td>...</td>`	定义表格单元格	align, valign, bgcolor, rowspan, colspan, width, height
`<thead>`	定义表格的页眉	align, valign
`<tbody>`	定义表格的主体	align, valign
`<tfoot>`	定义表格的页脚	align, valign

10. 列表标签

有序列表

<ol>
    <li>XXX</li>
    <li>XXX</li>
<ol>

无序列表

<ul>
    <li>XXX</li>
    <li>XXX</li>
<ul>

自定义列表

dl：外围标签

dt：列表的标题标签

dd：设置列表的具体列表项

<dl>
    <dt>XXX</dt>
    <dd>XXX</dd>
    <dd>XXX</dd>
</dl>

11. 表单标签

1. <form>...</form> 表单标签
form标签常用属性：

action属性:提交的目标地址(URL)
method属性:提交方式:get(默认)和post
get方式是URL地址栏可见，长度受限制(IE2k 火狐8k),相对不安全
post方式是URL地址不可见，长度不受限制,相对安全.
enctype:提交类型
target: 在何处打开木标 URL
name:属性为表单起个名字.在HTML5中使用 id 代替。

2. <input>
表单项标签input定义输入字段，⽤户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。具体在下面有详解：
<input type="text" name="username">

type属性:表示表单项的类型
text:单行文本框
password:密码输入框
checkbox:多选框注意要提供value值
radio:单选框注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要用户修改
email 用于应该包含 e-mail 地址的输入域
url 用于应该包含 URL 地址的输入域
number 用于应该包含数值的输入域。
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
range 用于应该包含⼀定范围内数字值的输入域，显示为滑动条
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
日期选择器 Date pickers
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
search 用于搜索域，比如站点搜索或 Google 搜索
color 颜色选择
name属性: 表单项名,用于存储内容值的
value属性: 输入的值(默认指定值)
placeholder: 预期值的简短的提示信息
size属性: 输入框的宽度值
maxlength属性: 输入框的输入内容的最大长度
readonly属性: 对输入框只读属性
disabled属性: 禁用属性
checked属性: 对选择框指定默认选项
accesskey属性: 指定快捷键(不常用) (IE:alt+键火狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序（不常用）

src和alt是为图片按钮设置的

注意：
reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空。
image图片按钮，默认具有提交表单功能。

3. <select>...</select>
创建下拉列表。

name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不⽀持
disabled 当该属性为 true 时，会禁用该菜单
multiple 多选
<option>... </option>下拉选择项标签,用于嵌⼊到<select>标签中使⽤的;
value属性:下拉项的值
selected属性:默认下拉指定项

4. <textarea>...</textarea>
多行的文本输入区域，有以下常用指令

name :定义名称,用于存储文本区域中的值。
cols ：规定文本区内可见的列数。
rows ：规定文本区内可见的行数。
disabled：是否禁用
readonly：只读
默认值是在两个标签之间

5. <button>...</button>
标签定义按钮。
您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

6. <fieldset>
fifieldset 元素可将表单内的相关元素分组。

7. <legend></legend>标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。

8. <optgroup>
html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项。

9 <datalist>
html5标签-- <datalist> 标签定义可选数据的列表。与input元素配合使⽤，就可以制作出输入值的下拉列表。

二. CSS基础

一. CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二. CSS基本用法

1. 语法

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

2. 应用方式

1. 行内样式表

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
      <p style = color:red;”>
      天使投资指早期投资，尤其指个人早期投资。
     </p>
</body>
</html>

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

2. 内嵌样式表

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
      p{
           color:red; /*设置字体颜色*/
        }
    </style>
</head>
<body>
    <p >
      天使投资指早期投资，尤其指个人早期投资。
     </p>
</body>
</html>

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

注意：

• 即使有公共CSS代码，也是每个页面都要定义的

• 适合文件很少，CSS代码也不多的情况

•如果一个网站有很多页面，每个文件都会变大，后期维护难度也大

3. 外部样式表

外部样式表文件： style.css
p{
color:red;/*设置文字颜色*/
  }

网页文件: 1.htm
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>

使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入

页面结构HTML代码与样式CSS代码的完全分离
维护方便
如果需要改变网站风格，只需要修改公共CSS文件
可以在同一个 HTML 文档内部引用多个外部样式表

4. 优先级

多重样式可以层叠，可以覆盖
样式的优先级按照“就近原则”：行内样式> 内嵌样式> 链接样式>浏览器默认样式

3. 选择器

1. 标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称

以标签名作为样式应用的依据

<style type="text/css">
    body{background-color: #ccc;
        text-align:center;
        font-size:12px;}
    h1{font:“黑体";font-size:20px;}
    p{color:red; font-size:16px;}
    hr{width:200px;}
</style>
<body>
<h1>标题</h1>
<hr>
<p>正文的段落</p>
版权所有
</body>

2. 类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

调用时不能添加 .号
同时调用多个类选择器时，以空格分隔
类选择器名称不能以数字开头

<style type="text/css">
    p { font-size:12px; }
    .one{ font-size:18px; }
    .two{font-size:24px; }
</style>
<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>普通段落中的文字</p>
</body>

3. ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

<style type="text/css">
     #one{font-size:12px;}
     #two{font-size:24px;}
</style>

<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>

4. 集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

<style type="text/css">
    h1,p {text-align:center;
         }
</style>

<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
</body>

5. 嵌套声明

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

<style type="text/css">
  p  span{
    color:red;
   }
</style>

<body>
   <p> <span>天使投资</span> 是投资方式的一种</p>
</body>

6. 全局声明

<style type="text/css">
    * {
    text-align:center;
    }
</style>

<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
<h2>欢迎访问论坛</h2>
</body>

7. 混合

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

4. CSS单位

px 像素
cm 厘米
in 英尺
% 百分比
em 1em等于“当前元素”字体大小

5. CSS颜色

颜色	描述
red,blue,green	颜色名 http://www.w3school.com.cn/
rgb(x,x,x)	RGB值每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色：rgb(66,66,66)
rgb(x%, x%, x%)	RGB 百分比值 0%-100% 红色：rgb(100%,0%,0%)
rgba(x,x,x,x)	RGB 值，透明度 a值：0.0（完全透明）与 1.0（完全不透明）红色半透明：rgba(255,0,0,0.5)
#rrggbb	十六进制数红色： #ff0000 红色： #f00 去掉重复位

6. 文本属性

属性	描述	取值
color	文本颜色	red #f00 rgb(255,0,0)
letter-spacing	字符间距	2px -3px
line-height	行高	14px 1.5em 120%
text_align	对齐	center left right justify
text-decoration	装饰线	None overline underline line-through
text-indent	首行缩进	2em

7. 字体属性

属性	描述	取值
font	文本颜色	font: bold 18px '幼圆'
Font-family	字体系列	网页安全字体（首选、其次、备用。以逗号隔开） font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
Font-size	字号	14px 120%
Font-style	斜体	italic（斜体）
Font-weight	粗体	bold（粗体）

8. 背景属性

属性	描述	取值
background	背景：颜色图片 repeat	url(“images/bg1.gif”) repeat-x;
background-color	背景颜色	red #f00 rgb(255,0,0) transparent（透明）
background-image	背景图片	url（"logo.jpg"）
background-repeat	重复方式	Repeat repeat-x repeat-y no-repeat
background-position	背景图片的显示位置	top、bottom、left、right、center
background-attachment	背景图片是否跟随滚动	scroll、fixed

9. CSS超链接

链接的四种状态：

A:link 超链接的正常状态（没有任何动作前）
A:visited 访问过的超链接状态
A:hover 光标移动到超链接上的状态
A:active选中超链接时的状态

a:link{
    font-size: 12px;
    color:black;
    text-decoration: none;
}/*未访问*/
a:visited{
    font-size: 15px;
    color:;
}/*已访问*/
a:hover{
    font-size: 20px;
    color:blue;
}/*鼠标悬停*/
a:active{
    font-size: 40px;
    color:green;
}/*按下鼠标*/

10. 列表属性

1. list-style-type

2. list-style-position

设置标记的位置

<style type="text/css">
.inside {
    list-style-position: inside；
    }
.outside {
    list-style-position: outside；
    }

11. 表格属性

表格大小表格边框

width, height

属性：宽、高

table{
   width: 500px;
   height: 200px;
 }

border 属性

table, td, th {
border: 1px solid #eee;
}

border-collapse 取值：separated（默认） collapse

table {
border-collapse:collapse;
}

奇偶选择器：nth-child(odd|even) [奇 / 偶]

tr:nth-child(odd){
    background-color:#EAF2D3;
}

12. 盒模型

页面中的所有元素都可以看成一个盒子，占据着一定的页面空间

盒模型组成：

content
height 高度
width 宽度
border 边框
padding 内边框
margin 外边框

一个盒子的实际宽度、高度:content+padding+border+margin

1. border

表示盒子的边框

分为四个方向：

上top、右right、下bottom、左left
border-top、border-right、border-bottom、border-left

每个边框包含三种样式：

border-top-color、border-top-width、border-top-style
border-right-color、border-right-width、border-right-style
border-bottom-color、border-bottom-width、border-bottom-style
border-left-color、border-left-width、border-left-style

样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

简写，三种方式：

按方向简写：

border-top、border-right、border-bottom、border-left

书写顺序：

border-顺序：width style color
按样式简写：

border-color、border-width、border-style

书写顺序：

border-样式：top right bottom left

必须按顺时针方向书写，同时可以缩写：
- border-width:2px;--------->四个边框的宽度均为2px
- border-width:1px 2px;
- border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样
终级简写：

如果四个边框样式完全相同，border:width style color;

属性	描述	取值
border-width	边框宽度	px、thin、medium、 thick
border-style	边框样式	dashed、dotted、solid、double
border-color	边框颜色	颜色值
border	宽度、样式、颜色	width style color

2. padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准

3. margin

表示盒子的外边距，即盒子与盒子之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

4. overflow属性

当内容溢出盒子框时，通过overflow属性进行如下设置

Hidden 超出部分不可见
Scroll 显示滚动条
Auto 如果有超出部分，显示滚动条

13. 定位机制

CSS中的三种定位机制

文档流 flow
浮动 float
层 layer

一. 文档流定位

元素分类

block：独占一行，元素的height、width、margin、padding都可设置。<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form>

Inline：不单独占用一行，width，height不可设置。<span><a>

inline-block:同时具备inline元素、block元素的特点,不单独占用一行

,元素的height、width、margin、padding都可设置。<img>

元素类型转换

显示为inline元素 display:block

显示为inline元素 display:inline

显示为inline-block元素 display: inline-block

元素不会被显示 display: none

二. 浮动定位

Float属性：定义元素在哪个方向浮动，常用于div实现横向多列布局

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示

取值：left, right, none

div{
   width:200px;
   height:200px;
   border:1px solid red;
   float:left;
}

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决

Clear属性：规定元素的哪一侧不允许其他浮动元素。

取值：

left左侧不允许出现浮动元素
right右侧不允许出现浮动元素
both两侧不允许出现浮动元素
none允许两侧出现浮动元素，默值

结论：

对于非浮动元素，两边都可以设置清除（常用）
对于浮动元素，向哪边浮动，就只能设置哪边的清除

三. 层定位

Position属性：

fixed 固定定位相对于标签原来的位置进行的定位 top, bottom, left, right ， z-index 有效
relative 相对定位相对于第一个非static定位的父标签的定位 top, bottom, left, right ， z-index 有效
absolute 绝对地位相对于浏览器窗品进行定位 top, bottom, left, right ， z-index 有效
static 默认值 top, bottom, left, right ， z-index无效

设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right

相对定位：

相对定位position:relative，定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。

relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式。

#box1 {
    width:170px;
    height:190px;
    position:relative;
    top:20px;
    left:20px；
}

绝对定位：

绝对定位 position:absolute，定位为absolute的层脱离正常文本流，但与relative的区别:其在正常流中的原位置不再存在。

对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。

对于absolute定位的层,如果其父层中都未定义absolute或relative，则其将相对body进行定位。

#box1 {
    position:absolute;
    top:20px;
}

固定定位：

固定定位position:fix，不会随浏览器窗口的滚动条滚动而变化，总在视线里的元素

先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

#fix-box {
    width:200px;
    height:200px;
    border:1px solid red;
    position:fixed;
    left:100px;
    top:50px;
}

Z-index：

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

注意：只能给非static定位的元素设置z-index属性

D1gnity_

关注

23
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
蓝旭工作室2023春季培训预习博客（二）

第二周有两个需了解的内容，如下1. HTML常用标签2. CSS基础HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术。HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本HTML。
复制链接

扫一扫