Web前端

xioalu123

已于 2022-10-30 02:19:02 修改

阅读量1.1k

点赞数

文章标签：前端 html css

于 2022-10-30 02:16:11 首次发布

本文链接：https://blog.csdn.net/xioalu123/article/details/127594820

版权

12 .表格标签

<table>:表格最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
注：它们之间有嵌套关系
语义化标签：<tHead><tBody><tFood>
在一个<table>中：
<tBody>:可以出现多次
<tHead><tFood>:只能出现一次

13.表格属性

border：表格边框
cellpadding:单元格内的空间
cellspacing：单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对其方式
valign:上下对齐方式

align: left、center、right
valign:top、middle、bottom

14.表单intput标签

表单标签：

:表单的最外层容器. :标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等. 具有type属性，决定是什么控件

text 普通的文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮

checked：已选
disabled:无法勾选
placeholder:框中文字
select:下拉菜单置顶
size:调节选项个数
multiple:多选（ctrl+鼠标左键）下拉菜单和上传文件

15.表单相关标签

:多行文本框. 、:下拉菜单. < label>:辅助表单双标签，扩大可选范围 ## 16.div与span

: div(块):全称为division，”分割、分区“的意思，

标签也用来划分一个区域，相当于一块区域标签可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在

标签中，

中还可以嵌套多层

，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。 : span(内联）：用来修饰文字的，div与span都是没有任何默认样式的，需要配合css才行。 div：做一个区域划分的块。 span:对文字进行修饰的内联。 # 四.css细化 ## 1.css基础语法格式：选择器{属性1：值1；属性2：值2}(有映射关系）单位： px—>像素（pixel）、%百分比基本样式： width、height、background—color css注释： /*css注释内容*/ 快捷键：shift+alt+a ctrl+/ ## 2.内联样式与内部样式表内联（行内、行间）样式：在html标签上添加style属性来实现的内部样式：在

这是一个块

另外一个块

```

3. 外部样式

引入一个单独的css文件，name.css
标签：:(引入外部资源）
rel：指定资源和页面的关系.
href: 表示资源的地址.

	 <style>
    @import url('./common.css');
</style>(引入外部资源）

4. CSS颜色表示法

1.单词表示法：
2.十六进制表示法
3.RGB三原色表示法

获取颜色的工具：photoshop

<style>
       /* div{background-color:#a365365b ;}  */
       div{background-color:rgb(rgb(124, 49, 49), green, rgb(33, 33, 117));}
    </style>
``

## 5.css背景样式
background-color:背景颜色.
background-image:背景图片.
url(背景地址）
默认会水平垂直都铺满背景图

background-repeat:背景图片的平铺方式.
repeat-x   x轴平埔
repeat-y   y轴平铺
repeat(x,y都进行平铺，默认值）
no-repeat  都不平铺

background-position:背景图片的位置.
background-position：00px 00px;
  x y:number|单词
  x :left ,center,right
    y:top, center,bottom

background-attachment:背景图片随滚动条的移动方式.
scroll：默认值（背景位置按当前元素进行偏移）
fixed:(背景位置按浏览器进行偏移）
视觉差效果练习：

```html
<style>
        #div1{width:1400px;height:800px;
       background-image: url(./风景夏季.jpg);background-attachment: fixed;}
        #div2{width:1400px;height:800px;
       background-image: url(./风景落叶.jpg);background-attachment: fixed;}
        #div3{width:1400px;height:800px;
       background-image: url(./风景冬季.jpg);background-attachment: fixed;}

    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

6.css边框样式

border-style:边框的样式
    solid:实线
   dashed:虚线
    dotted:点线
border-width:边框的大小
     px....
border-color:边框的颜色
     red #f00
 注：对某一条边单独设置

边框实现三角形：
颜色透明：transparent

<style>
div{width:300px; height:300px;border-right-style: solid;border-right-color: red;border-right-width: 1px;}
</style>

7.family字体类型

font-family:字体类型
英文字体：Arial、‘Times New Roman’
中文字体：微软雅黑、宋体

 font-family:字体类型
       英文、中文

   中文字体的英文名称：
     微软雅黑：‘Microsoft YaHei'
     宋体：SimSun

  衬线体和非衬线体：

字体样式注意事项：
1.设置多字体方式（逐级识别计算机语言）
2.引号问题：当字体中出现空格

8.文字大小粗细

font-size:字体大小
默认16px
xx-small:最小
x-small：较小
small：小
medium：正常（默认值）
large：大
x-large：较大
xx-large：最大

字体大小一般为偶数（更好对齐）

font-weight:字体粗细
两种模式：正常（normal)，加粗(bold)
写法：单词、数值（100-900）为整数值（100-500：正常）（600-900：加粗）
font-style:字体样式
模式:正常（normal)、斜体（italic)
注：oblique：也表示斜体，用的比较少
区别：1.italic所有带有倾斜字体属性的才可以设置倾斜操作
2.oblique没有倾斜属性的字体可以设置倾斜操作

9.文本修饰

text-decoration:文本装饰
下划线：underline
删除线:line-through
上划线:overline
取值
添加多个（通过空格隔开）

    text-transform:文本大小写（针对英文）
   小写：lowercase
   大写：uppercase   
   只针对首字母大写：capitalize

10. 文本缩进与文本对齐

text-indent:表示文本缩进
首行缩进
em单位：相对单位，1em永远更字体大小相同
text-align:文本对齐方式
left：左对齐
center：居中对齐
justify:两端点对齐
取值

         line-height： 文本的行高
            定义：上边距、行高、下边距
            默认：不是固定值，根据当前字体大小不断变化
            取值：1. number(px）   |  scale(比例值，跟文字大小）

11. 文本间距与英文折行

letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）

         英文数字 自动折行：
            word-break：break-all;(非常强烈的折行）
             word-wrap:beak-word;(不是那么强烈的折行，会产生一些空白区域）

12. css复合样式

		 一个css属性只能控制一种样式，叫作单一样式。
		                   一个css 属性控制多种样式，叫作复合样式。
		                    复合样式 ：
                   
复合的写法，是通过空格的方式实现的
  复合写法有的是不需要关心顺序的，例如：background，border.
                 有的需要关心顺序，例如：font
               1.  background ：red url( )repeat 0;
               2. border：1px red soild
               3. font：
                            最少要有两个值，size family
                                              weight style size family  √
                                              style weight size family  √
                                              weight style size/line-height  family  √
                       尽量不要混写，如果非要混写，先复合后单一

13.css选择器

ID选择器及注意事项
css：#elem{}
html：id=“elem"
注：
1.在一个页面中，id值是唯一的，出现多次不符合规范
2.命名规范，字母、_、-、数字（命名的第一位不能是数字）
3.命名方式，驼峰式
searchButton(小驼峰）、SearchButton(大驼峰）
短线线下划线
search-small-button search_small_button

           class：选择器
       class：.elem{}
       html：class="elem"     
    注：1.class选择器是可以复用的.
           2.可以添加多个class样式.
           3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序.
           4.标签+类的写法    p.box