第一周学习总结-CSDN博客

本文链接：https://blog.csdn.net/2201_76025275/article/details/129092818

html标签

常用的文本标签：

链接标签

html标签

常用的文本标签：

<h1-h6> 标题标签：从大到小

<p>段落标签

<hr/>水平标签作用：分割内容

<br/> 换行标签

<marquee> 滚动标签 behavior="滚动方式":slide:滚到某一边停止、scroll:穿梭滚动、 altermate:来回滚动

scallammount="滚动速度（设置正整数值）"

direction="滚动方向"

<font> 字体标签 color="字体颜色" size="字体大小（1-7的值）"

<sup>上标标签 <sub>x下标标签

特殊的转义字符： © ----> © 版权所有
® ----> ® 注册商标
  ---->代表一个空格
&ensp;----->代表两个空格

<pre> 原样输出标签

列表标签：

无序列表：ul和li

ul标签里面默认的列表项的标记type属性:默认值disc：（小黑圆圈）、circle：空心圆点、

square：小正方形

有序列表：ol和li

ol的默认属性 type="1" ="A/a/I/i"

定义列表：<dl>表示定义列表 <dt>列表项的分类 <dd>具体的列表项

<a>链接标签

默认属性：href="跳转到的链接地址url" url：统一资源定位符（本地地址/服务器地址）

<target>打开方式 _self当前窗口打开（默认值）

_blank 新窗口打开

锚链接

在同一页面下 a）打锚点，创建跳转标记

b）创建跳转链接

<a href="#锚点名称">跳转链接名称</a>

在不同页面中 a）在另一个页面的某个位置，打锚点

b）在当前页面中创建跳转链接

<a href="链接到另一个html地址#锚点名称">跳转链接的名称</a>

<img>图像标签

常用属性：src="链接到图片的url地址"

width宽度 height高度（px/%）

title="鼠标悬浮在图片上文字提示标题内容"

alt="替代文本属性" （图片地址失效才起作用）

其他属性：align：图像在浏览器对其方式

left：左对齐（默认值）、center：居中、right:右对齐

图像链接：<a href="地址url">

</a>

背景图片：在body里面指定一个属性 background="图片地址"

<table>表格标签

<caption>标签定义指定表格的标题 <tr>行标签、<th>行中的、<td>行中的单元格

属性：border="指定边框大小像素px"

aligin="表格在浏览器中对齐的位置"

width/height="指定宽和高" （px、%）

cellspacing="设置表格边框线和单元格td中间的缝隙"

dgcolor="设置表格背景颜色"

<form>表单标签

action="提交的服务器地址 url"

method="提交方式" 属性：get（默认值）post

表单提交get和post的有什么区别

1）是否提交到地址栏上

get方式将数据提交到地址栏上

post方式不会将数据提交到地址栏上

2）是否适合私密数据提交

get提交方式，相对post来说不安全，地址栏是可以直接看到明文的敏感数据

post提交方式相对gey来说安全，隐私数据可以看到

3）提交数据大小是否有限制

get提交方式，在地址栏上提交数据，提交数据大小有限制!

post提交方式，没有大小限制

列表标签常见表单项：

<input type="text"/>文本输入框

<input type="password"/>密码输入框

<input type="submit"/>表单提交按钮

<input type="button" value="按钮名称"/>按钮

<input type="file"/>上传组件

<input type="hidden"/>隐藏域

<input type="date"/>日期组件

<input type="radio"/> 单选按钮（指定同一个name属性）

<input type="checkbok"/> 复选框

<select> 定义下列菜单

</select>

文本域:textarea row="文本域中能够书写多少行内容"

cols="一行指定的字符数"

表单form去镶嵌表格

<div>块标签一个div就是一个地级元素特点：占一个空间

style属性：给单个标签添加样式

css入门

html：页面设计结构，通过css给页面添加属性

css使用方式：

1）行内样式，每一个html标签有style属性

style="样式名称1：值1；样式名称2:值2;..."

弊端：一次只能为某一个标签添加样式

2）内联样式（内部样式）

在head标签体中书写style标签

<style>

选择器{

样式名称1：值1；

样式名称2：值2；

...

}

</style>

弊端：css代码和HTML标签混合在一个html页面中，不利于后期维护！

3）外联样式（外部样式）

需要在项目下 css文件夹

xx.css文件

                        选择器{

          样式名称1:值1;
          样式名称2:值2;
          ...;
}

在当前html页面中导入css样式

<style>

@import url("css/xx.css文件")

</style>

css基本选择器：

标签名称选择器

标签名称{

样式名称：值

}

class(类)选择器 ——在html页面中class属性可以同名

.class属性值{

样式名称：值；

...

}

id选择器 ——在同一个html页面中id属性值必须"一致"

#id属性值{

样式名称：值；

...

}

其他选择器：

        子元素选择器
selector1 selector2..{ //选择器2选中的标签是选择器1选中的标签的子元素
样式名称:值;
...

}

并集选择器
       selector1,selector2...{

样式名称:值;
...
       }

css伪类选择器：

描述任意标签的一种状态：

link：鼠标没有访问过这个标签的状态

hover：鼠标经过这个元素的状态

active：鼠标激活状态（点击并没有松开的状态）

visited：鼠标已经访问过这个元素的状态

在样式书写格式：

选择器名称（标签名称/class/id）：状态名称{样式名称：值；...}

注意名称：状态名称不区分大小

a：hover必须在css定义中的a：link和a：visited之后，才能生效

a：active必须在css定义中的a：hover之后生效

注意：伪类名称对大小写不敏感

hover状态使用最多！

css背景样式

css背景属性：

backgroubd-color：背景颜色

background-image：url（图片地址）

background-repeat：设置背景图是否重复，如何重复

默认值：repeat都重复 repeat-x:x轴重复

repeat-有：y轴重复 no-repeat：不重复

background-attchment：背景附着

background-position：设置背景图片的起始位置

默认值：top left

center center

bottom right

css文本样式：

text-color：文本颜色属性 text-align：文本对齐方式

text-decoration：文本装饰 line-height:行高

text-align 属性用于文本对齐方式 left（默认值）/center/right

texy-decoration 属性用于设置或删除文本装饰

none 删除链接的下划线（超链接标签本身就有下划线）

underline：设置下划线 overline：设置上划线 line-through：中划线

word-spacing：单词间距

浏览器解析这个样式：必须认为两个字组成一个单词

text-transform 属性用于指定文本中的大写和小写字母

uppercase：转换成大写字母

lowercase：转换成小写字母

text-ident 属性用于指定文本第一行的缩进

css字体样式：

font-family：指定文件中的字体样式

font-style：设置字体类型（默认值）normal：正常字体显示 italic：字体显示"斜体"

oblique"倾斜"

font-weight：属性指字体的粗细 bold：等于700这个值

font-size：字体大小指定像素或单词名称

css边框样式：

border-color：边框颜色简写属性

border-width：边框宽度简写属性

border-style：边框样式简写属性

统一特点：1）默认方式：上右下左

2）某一边没设置颜色/宽度/样式,默认补齐对边颜色/宽度/样式

边框的样式：solid：单实线 double：双实线

dashed：虚线 dotted：点

显示边框的最终写法：border的简写属性

border：border-width border-style（必须） border-color

css列表样式

list-style-type：设置列表项的标记类型

list-style-image：url（图片地址）：将指定图像作为列表项的标记

list-style-type：属性指定列表项标记的类型

none：去掉列表项前面的标记 square：小黑正方形

circle:空心圆点 disc：（默认）小黑圆点

list-style-image：属性将图片指定为列表项标记

给列表设置水平导航栏： display：inline（设置到同一行）

css表格标签：

border-collapse：属性设置是否将表格边框折叠为单一边框线

collapse：合并

table，th，td：同时给table，表头，普通单元格都设置边框线

css盒子模型

css盒子模型的使用

css盒子模型：将任何标签都看成盒子，整个页面布局大体方向先使用div将图片内容包裹起来，形成"层级"，一个页面分成了很多块

给div加入id/class等选择器，通过css样式属性精确控制！

盒子经常使用到的属性：border边框：盒子的厚度

width/height：盒子的容量

padding：盒子的内边距：边框和内容之间的距离(上右下左)

margin：盒子的外边距：盒子和盒子之间的距离：通过外边距让整个盒子移动！

表单中给文本加入lable元素和input输入元素是一个表单组

lable里面for必须和input标签里的id一致

将整个form标面外面加入div（块标签）

div标签和span标签的区别：

div属于块级元素

占一行空间，多个div自动换行

span属于行级元素

仅仅你自己标签元素本身，不会换行

span标签应用场景

什么是框架标签，什么是框架集

框架标签:frame,一个frame包含一个html页面
           <frame src="链接到的html页面地址" name="当前框架名称" />
如果整个页面结构并非一个html组成,而是两个或者两个以上的html页面组成,需要使用框架集frameset
           <frameset rows="xx%,xx%"></frameset>
               rows:横向划分(从上而下划分的几个部分所占整个部分的权重百分比)
           <frameset cols="xx%,xx%"></frameset>
   cols:竖向划分 (从左到右,每一个部分所占用的权重百分比!)

导入css样式的方式：

在head标签体中：

另一种导入方式

<style>

@import url("css/xx.css文件")

</style>