前端学习第二周

已于 2022-12-30 14:36:54 修改
阅读量1.6k 收藏 1
点赞数
文章标签： 前端 学习
于 2022-10-27 22:16:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72343101/article/details/127470982
版权

目录

二十一.表格

通过代码的编写可以在浏览器上实现表格

21.1表格标签

都是双标签，有嵌套关系，要严格符合嵌套规范。

1. <table>:表格的最外层容器

2. <tr>：定义表格行

3. <th>：定义表头

4. <td>：定义表格单元

5. <caption>：定义表格标题

例：

<table>
        <tr>
            <caption>原神角色</caption>
            <th>胡桃</th>
            <th>行秋</th>
            <th>草神</th>
        </tr>
        <tr>
            <td>火</td>
            <td>水</td>
            <td>草</td>
        </tr>
    </table>

显示为

 原神角色
胡桃行秋草神
火水草

语义化标签

<tHead>：表示头部，即<th>部分。
用法：<thead>
        <tr>
            <caption>原神角色</caption>
            <th>胡桃</th>
            <th>行秋</th>
            <th>草神</th>
        </tr>
        </thead>
<tBody>：表示身体，即<td>部分。
用法：  <tbody>
        <tr>
            <td>3.2或更后面</td>
            <td>无所谓</td>
            <td>3.2上半</td>
        </tr>
        </tbody>
<tFood>：表示尾部，用法同上。

无实际意义，相当于一种标准，优化浏览器此这程序的运行，尽量使用。

注：在一个table中tbody可以出现多次，但thead、tfood只能出现一次。

21.2表格属性

  • 用于<table>的属性
    border:表格边框
    cellpadding:单元格内的空间
    cellspacing:单元格之间的空间
    例：<table border="1" cellpadding="20" cellspacing="20">
  • 用于<td>的属性
    rowspan:合并行
    例：<td rowspan="2">额</td>
  • 用于<th>的属性
    colspan:合并列
    例： <th colspan="2">胡桃</th>
  • 用于<tr>的属性
    align:左右对齐方式
    valign:上下对齐方式
    align：left（左）、center（中）、right（右）
    valign：top（上）、middle（中）、bottom（下）
    例
    <tr valign="top"> <tr align="right">

二十二.表单

就是一些输入框，文本框等

22.1表单标签

下面是一些常见的表单标签

1.<form>表单的最外层容器
2.<input>(单标签)用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
3.<textarea>多行文本框
4.<select>、<option>下拉菜单
5.<label>辅助表单

表格标签的通用属性：checked、disabled、name、for…

22.1.1<input>标签的常用属性

请添加图片描述

  • text属性：文本输入框

placeholder属性是一个提示语，<input type="text" placeholder="请输入账号">显示为在这里插入图片描述

 <h2>账号</h2>
 <input type="text">

显示出一个账号框

  • password属性：密码输入框
 <h2>密码</h2>
 <input type="password">

显示出一个密码框

  • checkbox属性：复选框（checked）

checked属性会让后面的元素默认被选中，disabled属性会让后面的元素无法被选中。

 <input type="checkbox" checked>a
 <input type="checkbox" disabled>b
 <input type="checkbox">c

会出来三个选项，可进行选择

  • radio属性：单选框

name属性让他们成为一组，让浏览器识别，从而可以单选。

<input type="radio" name="1">men
<input type="radio" name="1">women

进行单选

  • file属性：上传文件
<h2></h2>
<input type="file">

  • submit属性:提交（把用户输入的信息提交给form的action属性中的网址，以便后续操作）

  • reset属性：重置（重置输入信息）

 <form action="https://www.baidu.com/"> 
 <h2></h2>
        <input type="submit">
        <input type="reset">
 </form>
  • multiple属性：多选
<input type="file" multiple>

可以进行文件的多选

//去掉input点击后边框颜色

input { outline:none; }

//改变input触发后边框颜色

input{ outline-color:red; }

22.1.2多行文本框

<textarea>标签
作用：在网页上显示一个多行文本框，可以进行文字的输入。

<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>

cols属性表示列数，rows属性表示行数

22.1.3菜单

<select>、<option>标签
作用：在网页上显示一个菜单，可以进行选择。

<form>
<h2>下拉菜单</h2>
<select size="3">
    <option selected disabled>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
</select>
<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
</form>

<select>是外层标签，<option>是内层标签。

  • selected属性：这个项被选中
  • disabled属性：这个项无法被选中
  • size属性：显示多个项
  • multiple属性：可以选中多个项

22.1.4辅助表格的功能

<label>标签
作用：辅助表格的功能

<input type="radio" name="1" id="2"><label for="2">man</label>
<input type="radio" name="1" id="3"><label for="3">women</label>
  • for属性
    与id属性对应，使label标签中的文字也能作为选项使用，从而提升用户的体验
  • id属性
    与for属性对应

22.2表格和表单的综合使用

因为表格要符合嵌套规范，所以把表格放外层，而表单不需要嵌套规范，所以用在里面。

二十三.<div>和<span>

23.1<div>（块）标签

div全称为division，“分割、分区”的意思， div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即html中的大多数标签都可以嵌套在div标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

23.2span（内联）标签

用来修饰文字的，div和span都是没有任何默认样式的，需要配合css才行。

23.3实例

 <div>
        <h2><a href="ys.mihoyo.com/" target="blank">《原神》官方网站-全新3.1版本「赤土之王与三朝圣者」上线!</a></h2>
        <p><span>《原神》<span>3.1版本「赤土之王与三朝圣者」现已推出!《原神》是由米哈游自研的一款开放世界冒险RPG。你将在游戏中探索一个被称作「提瓦特」的幻想世界。在这广阔的世界中,你可以踏遍七国,邂逅性格各...</p>      <imgsrc="https://gimg3.baidu.com/search/" alt="一张图片">
        <a href="ys.mihoyo.com/" target="_blank">1</a>
    </div>

html到这里暂时告一段落，下面开始学习css。

一.CSS基础语法

<style>（双标签）标签属于html，作用就是给页面添加样式，写在<head>标签内。

1.1格式

选择器{属性一:值一;属性二:值二}
这里的选择器就是<div> 这种标签，可以用<style>来选中，进行属性的添加。
例：

<head>
...
<style>
    div{width: 100%;height: 100px;background-color: red;}
    span{width:100%;hegit:100px }
</style>
</head>
<body>
    <div>这是一个块</div>
    <div>这又是一个块</div>
    <span>这是一个内联</span>
</body>

1.2基本样式

1.width：宽
2.height：高
3.background-color：背景颜色

1.3长度单位

1.px：像素
2.%：百分比（百分比的填充选择器的外层容器）

1.4CSS注释

1.语法
/*注释的内容*/
快捷键与html相同

二.内联样式与内部样式

行为、样式、结构尽量分离，形成良好的习惯。

2.1内联（行内、行间）样式

在html标签上通过添加style属性来实现的
例

<head>
...(没有style)
</head>
<body>
    <div style="width: 100%;height: 100px;background-color: red;">这是一个块</div>
</body>

2.2内部样式

注：内部样式的优点，可以复用代码

在<style>标签内添加的样式
例

<head>
...
<style>
    div{width: 100%;height: 100px;background-color: red;}
    span{width:100%;hegit:100px }
</style>
</head>
<body>
    <div>这是一个块</div>
    <div>这又是一个块</div>
    <span>这是一个内联</span>
</body>

2.3内部样式与内联样式的区别

内部样式的代码可以复用、且符合W3C的规范标准，让结构和样式分开处理

三.外部样式及两种写法

通过引入一个单独的css文件（例：name.css)来实现样式。有两种引的方法，一种是通过<link>标签，一种是通过@import引入（注：这种引入存在很多问题，不推荐使用）

3.1<link>标签

是当前页面与外部资源的一个映射关系，<link> 标签定义文档与外部资源的关系。

<link>标签通常写在初始代码的<meta>和<title>标签之间

3.1.1rel属性

表示引入外部资源的类型，资源与页面的关系。

主要还是引入文档的外部样式表（文档的外部样式表的值为：stylesheet）

例

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./库.css">
    <title>Document</title>	
</head>
<body>
<div>这是一个块</div>
</body>

上述代码中的./库.css就是创建的单独的css文件

3.1.2<href>属性

与html的href属性性质一样

四.CSS颜色表示法

css的颜色表示法分为三类，单词表示法、十六进制表示法、rgb三原色表示法。

4.1单词表示法

直接用单词来表示
例

div{ background-color: red;}

下面是一些颜色单词
black 黑色
gray 灰色，dimgray 暗灰色，darkslategray 深岩灰色
silver 银色，
white 白色 ，whitesmoke 烟白色，
red 红色，maroon 褐红色，
purple 紫色，fuchsia 紫红色，
green 绿色，olive 橄榄色，lime 绿黄色，aqua 浅绿色，darkolivegreen 深橄榄绿，palegreen 白绿色 ，seagreen 海绿色，darkgreen 深绿色
yellow 黄色，
blue 蓝色，navy 深蓝色，teal 绿中带蓝，violet 紫罗兰，midnightblue 深夜兰，lightskyblue 浅天蓝色，deepskyblue 深天蓝色，royalblue 宝蓝色，cornflowerblue 矢车菊色
gold 金色，orange 橙色，tomato 番茄色，firebrick 耐火砖色，lightyellow 浅黄色，yellowgreen 黄绿色，wheat 麦色，
cyan 青色，lightcyan 浅青色，turquoise 青绿色，lightgrey 浅灰色，
转载自：https://my.oschina.net/nickwill/blog/196410

4.2十六进制表示法

十六进制：0123456789abcdef
用法：#000000为css中十六进制的最小值，#ffffff为最大值
例

div{background-color:#000000;}

4.3rgb三原色表示法

用法：rgb(0,0,0);
取值范围是0~255
例

div{background-color: rgb(0,0,0);}

4.4获取网页当中的颜色

1.fehelper
可以快速获得网页中颜色的十六进制的代码
2.ps软件

五.CSS背景样式

背景样式有五个属性，分别为：
1.background-color：背景颜色
2.background-image：背景图片
3.background-repeat：背景图片的平铺方式
4.background-position：背景图片的位置
5.background-attachment：背景图随滚动条的移动方式
6.background-size：背景图片的大小

5.1背景颜色

属性为：background-color
作用：可以给背景加上颜色
用法：

div{background-color: rgb(0,0,0);}
或
<div style="background-color:red;">这是一个块</div>

5.2背景图片

属性为：background-image
作用：可以给背景加上图片
用法

<div style="background-image:url(图片地址);">这是一个块</div>
或
div{background-image:url(文件地址);}

其中的url的作用是引入图片的地址，默认会铺满整个背景。

5.3背景图片的平铺方式

属性为：background-repeat
作用：可以改变图片的平铺方式
用法：

<div style="background-repeat:repeat-x;">这是一个块</div>
或
div{background-repeat:repeat-x;}

repeat-x:只在x轴上平铺
repeat-y:只在y轴上平铺
repeat(x,y):x，y都进行平铺
no-repeat:都不平铺（并不是没有图片，只是图片为原始大小）

5.4背景图片的位置

属性为：background-position
作用：可以改变背景图的位置
用法：

<div style="background-position:100px 100px;">这是一个块</div>
或
div{background-position:100px 100px;}

上述xy的值不仅仅是像素，也可以用百分比

语法大体上是background-position:x y;
当xy大于0时，图片向右下偏移
当xy小于0时，图片向左上偏移
此外，xy还可以替换成单词
x有：left、center、right
y有：top、center、bottom

5.5背景图随滚动条的移动方式

属性为：background-attachment
作用：
用法：

<div style="background-attachment:scroll;">这是一个块</div>
或
div{background-attachment:scroll;}

可选值一般有
scroll：随着滚动条滚动（默认值，且背景位置是按照当前元素（块）进行偏移的）
fixed：固定，不随着滚动条滚动（背景位置是按照浏览器进行偏移的）

5.6背景图片的大小

注：第一个值代表宽，第二个值代表高
属性为：background-size
有三种值：

  • 直接的像素值（…px …px）
    例如：
div{background-size: 100px 100px;}
  • 百分比（…% …%）
    例如：
div{background-size: 10% 10%;}

根据父容器的百分比

  • cover（覆盖）
    会等比扩大或缩小图片，不会使图片的比例变得奇怪，然后再覆盖整个容器
    在这里插入图片描述
    例如：
div{background-size: cover;}
  • contain
    在这里插入图片描述

六.背景实现视觉差效果

6.1原理（区分相同标签的方法）

内部样式中区分<div>的方法就是：在div前面加上#后面加上id值

<!DOCTYPE html>
<html lang="en">
<head>
 ...
   <style>
    #div1{}
    #div2{}
    #div3{}
   </style> 
    <title>Document</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

6.2练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
    #div1{width:2560px;height:1660px;background-image: url(../图片/1.jpg);background-attachment: fixed;}
    #div2{width:2560px;height:1660px;background-image: url(../图片/2.jpg);background-attachment: fixed;}
    #div3{width:2560px;height:1660px;background-image: url(../图片/3.jpg);background-attachment: fixed;}
   </style> 
    <title>Document</title>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

一个简单的滚动视觉差页面

七.CSS边框样式

有三条基本属性
1.border-style：边框的样式
2.border-width:边框的大小
3.border-color：边框的颜色

注：可以针对单一条边进行设置，但默认是全都设置，且这三个属性尽量一起使用。

7.1边框的大小

属性为：border-width
与上述width的值相同，也是px（像素）、%等

7.2边框的颜色

属性为：border-color
与上述color的值相同，分为单词、十六进制、rgb三原色等

7.3边框的样式

属性为：border-style
有三个值
solid：实线
dashed：虚线
dotted：点线

7.4代码案例

<head>
...
    <style>
        div{width: 150px;height: 150px;border-width: 10px;border-color: aquamarine;border-style: solid;}
    </style>
</head>
<body>
    <div>111</div>
</body>

若想只改动一条边，可以用border-方向单词-style（color、width）
例：border-left-style:solid;表示把左边的框变成实线
方向单词：top、right、left、bottom（下）

八.边框实现三角形

8.1原理

设置边框样式时，相邻的边框相接时是斜线，由此来实现三角形

8.2练习

要用到透明颜色单词：transparent

例

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<style>
    body{background-color: aqua;}
    div
    {width: 0px;height: 0px;
        border-left-color: blue;
        border-left-width: 30px;
        border-left-style: solid;
        border-right-color: transparent;
        border-right-width: 30px;
        border-right-style: solid;
        border-bottom-color: transparent;
        border-bottom-width: 30px;
        border-bottom-style: solid;
        border-top-color: transparent;
        border-top-width: 30px;
        border-top-style: solid;
    }
</style>
<body>
    <div></div>
</body>
</html>

九.CSS文字样式

9.1字体类型

属性为：font-family
下面是一些值
英文字体：Arial、‘Times New Roman’…
中文字体：微软雅黑、宋体(中英文都能识别)…
中文字体的英文名称：
微软雅黑：‘Microsoft YaHei’
宋体:SimSun
例：

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font-family: 宋体;}
</style>
<body>
    <div>这是一段文字</div>
</body>
</html>

9.2衬线体与非衬线体

衬线体与非衬线体的区别
请添加图片描述
例如：宋体为衬线体，微软雅黑为非衬线体

9.3注意事项

9.3.1设置多字体的方式

添加多字体的目的：适应更多的计算机
div{font-family: 字体一，字体二，字体三… ;}
计算机会先识别字体一，若没有字体一，则会识别字体二，以此类推，假如这些字体都没有，页面会自动显示默认字体，即微软雅黑。

9.3.2引号的问题

若字体名称中出现空格，则需要用引号引起来，否则会出问题
例：'Times New Roman’有空格，需要引号
Arial没有空格，不需要引号

9.4字体大小粗细样式

注：字体大小一般为偶数，尽量把字体设置成偶数

9.4.1字体大小

属性为：font-size
默认为16px
两种用法

  • 1.通过px（像素）直接设置
    在属性后边的值中直接加上像素
    例
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font-size:30px;}
</style>
<body>
    <div>这是一段文字</div>
</body>
</html>
  • 2.通过单词进行设置（了解，不推荐使用）
    常见的单词值
    请添加图片描述

在属性后边的值中直接加上单词
例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font-size:x-small;}
</style>
<body>
    <div>这是一段文字</div>
</body>
</html>

9.4.2字体粗细

属性为：font-weight
两种用法

  1. 在属性后边的值中直接加上数

这里的值只能是100、200、300…900之间的数，只有九个值。
虽然有九个值，但只有两种效果，即正常和加粗

例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font-weight:100;}
</style>
<body>
    <div>这是一段文字</div>
</body>
</html>
  1. 在属性后边的值中直接加上单词
    只有两个单词
    1.normal（正常）2.bold（加粗）
    例
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font-weight:bold ;}
</style>
<body>
    <div>这是一段文字</div>
</body>
</html>

9.4.3字体样式

属性为：font-style
两种模式
1.normal（正常）2.inherit（斜体）

oblique也是斜体，但平常用inherit
oblique与inherit的区别
inherit：带有倾斜属性的字体才可以进行倾斜操作
oblique：不带有倾斜属性的字体也可以进行倾斜操作

例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font-style:normal ;}
</style>
<body>
    <div>这是一段文字</div>
</body>
</html>

9.4.4字体颜色

属性为：color
用法与上述的ground-color一样
例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font-style:normal;color:red;}
</style>
<body>
    <div>这是一段文字</div>
</body>
</html>

十.CSS段落样式

10.1文本修饰与文本大小写

10.1.1文本修饰

属性为：text-decoration
有几种效果

  1. 下划线：underline
  2. 上划线：overline
  3. 删除线：line-through
  4. 不添加任何装饰：none

注：可以添加多个效果

例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{text-decoration:underline，overline，line-through;}
</style>
<body>
    <p>游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相</p>
</body>
</html>

10.1.2：文本大小写（只针对英文）

属性为： text-transform
只有大写和小写两种值
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{text-transform:lowercase;}
</style>
<body>
    <p>aaaaaaaaaaaabbbbbbbcccccccccccccccddddddddddddd</p>
</body>
</html>

10.2文本缩进与文本对齐

10.2.1文本缩进

属性为：text-indent
作用：首行缩进
用法：

  1. 在属性后边的值中直接加上像素
    例
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{text-indent:32px;}
</style>
<body>
    <p>游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相</p>
</body>
</html>
  1. 用em单位，1em单位永远和字体大小相同
    例
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{text-indent:2em;}
</style>
<body>
    <p>游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相</p>
</body>
</html>

10.2.2文本对齐方式

属性为：text-align
取值为：left（左）、right（右）、center（居中对齐）、justify（两端点对齐）
例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{text-align:center;}
</style>
<body>
    <p>游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相</p>
</body>
</html>

10.3文本的行高

10.3.1定义行高

行高：一行文字的高度
行高由三部分组成：
上边距、字体大小、下边距
请添加图片描述
行高的默认值不是一个固定值，而是随着当前字体的大小在变化
属性为：line-height
用法：

  1. 在属性后边的值中直接加上像素
    例
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{text-height:40px;}
</style>
<body>
    <p>游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相</p>
</body>
</html>
  1. 在属性后边的值中直接加上数字表示比例
    例如：p{text-height:1;}表示行高为一个字的像素，p{text-height:2;}表示行高为两个字的像素

10.4文本间距和英文折行

10.4.1定义字间距

  1. 定义字之间的间距
    属性为：letter-spacing
    用法： 在属性后边的值中直接加上像素
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{letter-spacing:5px;}
</style>
<body>
    <p>游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相</p>
</body>
</html>
  1. 定义词之间的间距
    属性为：word-spacing
    只针对英文，对中文无作用
    用法： 在属性后边的值中直接加上像素
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{word-spacing:5px;}
</style>
<body>
    <p>you are a good boy</p>
</body>
</html>

10.4.2强制折行（只针对英文）

在英语单词或是阿拉伯数字非常长时，段落不会自动折行

  1. 非常强烈的折行
    属性为：word-break:break-all;
    用法：直接在选择器中加上属性
    例
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{word-spacing:5px;word-break:break-all;}
</style>
<body>
    <p>you are a good boy</p>
</body>
</html>
  1. 不是那么强烈的折行

可能会产生一些空白区域
属性为：word-wrap:braek-word;
用法：直接在选择器中加上属性
例

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    p{word-spacing:5px;word-wrap:break-word;}
</style>
<body>
    <p>you are a good boy</p>
</body>
</html>

10.5文本与段落实现个人简介

10.5.1练习

css部分

<style>
        div{width: 900px;}
        h1{text-align: center;color: crimson;}
        h2{text-align: center;color: blanchedalmond;}
        #p1{font-style: italic;font-weight: bold;text-indent: 2em;}
        #p2{color:black ;line-height: 30px;text-indent: 2em;}
        #p3{text-decoration:underline;line-height: 30px;text-indent: 2em}
        #p4{text-indent: 2em;line-height: 30px;font-weight: bold;letter-spacing:5px;}
    </style>

html部分

<body>
  <div>
      <h1>...</h1>
      <h2>...</h2>
      <p id="p1">...</p>
      <h2>...</h2>
      <p id="p2">...</p>
      <h2>...</h2>
      <p id="p3">...</p>
      <h2>...</h2>
      <p id="p4">...</p>
  </div>
</body>

10.6CSS复合样式

注：复合样式和单一样式尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。
原因：复合包含单一，若先写单一，复合会把单一覆盖掉

常见的复合样式的属性有
background（背景）
border（边框）
font（文字）

10.6.1定义

一个css属性只控制一种样式，叫做单一样式
一个css属性控制多种样式，叫做复合样式

10.6.2复合的写法

复合写法有的是不需要关心值的顺序的，像background、border等
而有的需要关心顺序，像font等

复合的写法是通过空格的方式来实现的
例

  1. background:red url() repeat;
<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{background:red no-repet center center;}
</styl>
<body>
    <div>you are a good boy</div>
</body>
</html>

这里的第一个center是x轴，第二个是y轴，且这两个是一个整体，不能分开

  1. font:30px 宋体;

最少要有两个值，即size和family，且要先写size再写family，weight和style则不用按照顺序来
像：font:weight style size family
font:weight style size/line-height family
font的复合写法中不能写color属性

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<style>
    div{font:30px 宋体;}
</styl>
<body>
    <div>这是一段帅气的文字</div>
</body>
</html>

十一.CSS选择器

11.1ID选择器及注意事项

11.1.1id选择器

写法
css：#id值{}
html：id=“值”
例

<!DOCTYPE html>
<html lang="en">
<head>
...
  <style> #div1{} #div2{} #div3{}</style> 
   <title>Document</title>
</head>
<body>
   <div id="div1"></div>
   <div id="div2"></div>
   <div id="div3"></div>
</body>
</html>

11.1.2注意事项

  1. 在一个页面中，id值是唯一的，不能重复出现。
  2. 命名规范：id值必须是字母、下划线（_）、中划线（-）和数字组成的，且命名的第一位不能是数字。
  3. 命名方式：驼峰式、下划线式、短线式。
    • 驼峰式：searchButton（小驼峰）SearchButton（大驼峰，不建议使用）
    • 下划线：search_small_button
    • 中划线：search-small-button

创建带有id值的标签快捷方法
标签字母+#+id值+回车
例：div#c2（回车）就可以快速创建<div id="c2"></div>

11.2CLASS选择器及注意事项

11.2.1class选择器

写法
css：.id值{}
html：class=“id值”
例

<!DOCTYPE html>
<html lang="en">
<head>
...
  <style> .box{}</style> 
   <title>Document</title>
</head>
<body>
   <div class="box">这是一个块儿</div>
</body>
</html>

11.2.2注意事项

  1. class选择器是可以复用的，可以出现多个class值。
  2. 可以添加多个class样式。
    例
<!DOCTYPE html>
<html lang="en">
<head>
...
 <style> 
 .box{}
 .home{}
 </style> 
  <title>Document</title>
</head>
<body>
  <div class="box home">这是一个块儿</div>
</body>
</html>
  1. 添加多个样式时，样式的优先级根据css决定，而不是class中的顺序。
    例
<!DOCTYPE html>
<html lang="en">
<head>
...
 <style> 
 .box{background:red}
 .home{background:blue}
 </style> 
  <title>Document</title>
</head>
<body>
  <div class="home box">这是一个块儿</div>
</body>
</html>

上述代码显示为蓝色。

<div class="home box">这是一个块儿</div>虽然这里box在home后边，但在css中home覆盖掉了box，所以显示蓝色

  1. 标签+类的写法
    意义：标签+class的样式
    像：p.box、div.home
    例
<!DOCTYPE html>
<html lang="en">
<head>
...
 <style> 
 p.box{background:red}
 p.home{background:blue}
 </style> 
  <title>Document</title>
</head>
<body>
  <div class="home box">这是一个块儿</div>
  <p class="home box">这是一个块儿</p>
</body>
</html>

此时，上述代码中box和home的样式只会在<p>中生效，而不会在<div>中生效。

三池丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5大前端学习过程第二周（Day10）
01-08
2020年2月21日 四级出成绩了，考了4次终于过了，哈哈。今天没学什么新知识，主要是练习昨天学习的定位。 一. 本节课学习目标。 掌握定位的应用。 重点 二. 定位练习1-小米官网1。 小米官网 ...
前端：table、thead、th、tr、td
weixin_30439067的博客
07-19 972
table:表格；thead:表头；tr：行；td：单元格；th：一行的首个单元格 tbody包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就"从头到脚"显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。...
html表格
LIJIWEI0611的博客
08-22 224
表格 table 表格作用： 较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。 因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。 1. 创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。 创建表格的基本语法： <table> &l...
【Vue表单】绑定<textarea>
weixin_39415598的博客
05-12 910
微信订阅号：Rabbit_svip 在Vue中，想要绑定 <textarea> ，同样是使用 v-model。 核心代码 <textarea cols="30" rows="10" v-model="msg"></textarea> 本例全部代码 <template> <div id=...
前端HTML<table>标签的属性和使用
热门推荐
冯小东
10-05 4万+
1.什么是表格&表格的作用 什么是表格：由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的 表格的作用：以一定的结构来显示信息的。  2.如何使用表格 定义表格： 创建表行： 创建列(单元格):  注意：默认情况下，每行中的列数是统一的。 table : display:table; 特点： 1、独占一行 2、宽度自适应(
HTML表格（table、tr、td、th、thead、tbody、tfoot标签）
拾Miss~博客
03-12 3万+
目录 HTML表格 table表格属性 ***HTML表格** <!DOCTYPE html> <html> <head> <title>表格</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </hea...
大四学生前端实习的第二周周记
07-26
大四学生前端实习的第二周周记
Web前端开发第三季：CSS特效
06-14
◆ 实现二维空间中图像的移动、旋转、缩放倾斜等 ◆ 实现三维空间中的图像的移动、旋转、缩放等 ◆ 在页面中灵活使用过度的特效 ◆ 在页面中使用动画的特效 ◆ 使用下拉菜单等内容。 在本季课程的讲解中结合了...
编译原理课程第一周总结及后续安排(2)(1)1
08-08
具体学习内容如下：第1讲（对应教学大纲“第一章引论”）什么是编译程序。掌握什么是编译程序，掌握翻译程序、编译程序、解释程序的主要概念，通过学习能够给出编译程序、
c#学习方法
03-08
第二模块：Unity 入门与基础 学习安排：4周3个项目实战 学习形式：录播视频+在线作业考核+助教一对一辅导答疑 课程内容：游戏与Unity发展历史概述、 3D 模型基础、 地形编辑器、光源、音频、Unity脚本程序基础、GUI...
前端<tr>分页实现
贾世鑫的博客
08-04 3215
本代码为前台数据分页效果，不需要执行后台代码 原理是对目标表格中的标签进行分页，后台只需要把数据传过来遍历即可。 只需要设置格式为如下即可 你要遍历的内容 jsp部分  例子
学习笔记(18):Web前端与HTML5移动开发系列一：HTML篇-20，tr的常见属性
Luoluo327的博客
02-09 295
掌握HTML4.01常见基本标签; 熟练HTML结构和语法规范; 使用列表系列标签完成常见网页中的列表结构; 熟练掌握表格，表单都系列标签，在项目中熟练使用; 了解哪些标签在项目中经常使用，哪些标签已被废除; 迈出HTML5开发的第一步,为后续课程打下基础;...
html的tr和td标签
Mr. David 专栏
12-01 1万+
 tr 标签——代表HTML表格中的一行 <br />1） tr 标签是成对出现的,以<tr>开始,</tr>结束 <br />2）属性 <br /> ——Common -- 一般属性 <br /> 1》align ：代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) <br /> 2》valign ：代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | base
1-4 html 表单（二） textarea、button，autocomplete autofocus属性
hangshao_123的博客
10-08 398
1.textarea 文本框控件 <textareaname=""id=""cols="30"rows="10"></textarea> 【1.1】resize: none textarea { resize: none; } 给文本域添加如图属性，文本框不能拖拽。没有添加时，鼠标移至右下角是可以拖拽的 【1.2】cols和rows cols 控制行数 rows控制列数 【1.3】readonly属...
文件夹内的文本行数_多行文本框的认识以及代码详解
weixin_39662228的博客
11-28 280
本文创建于2020年9月，以下为正文：多行文本框< textarea>< /textarea>是什么呢？单行文本框只能输入一行信息，而多行文本框可以输入多行信息。比如说在百度搜索栏写再多的内容都不会换行，例如是个人信息，兴趣爱好等内容多的就会用到这个文本框。属性：cols：这文字区块的宽度rows：这文字区块的行数，即其高度< textarea name="" id...
HTML中属性ID和属性NAME有何区别？
Anglebeat的专栏
03-18 1万+
今天出美工面试题的时候，David让我加上一道题：HTML中id和name的区别。一听对呀，HTML中id和name有什么区别，只是平时在用，倒没怎么想过，只是那么用了罢了，呵呵，其实在做网页的时候有很东西都只是那么的用了，而没有考虑为什么那么用了...     有同道中人说“ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。”
table中tr的name属性无法通过getElementsByName获取tr元素
XDSXHDYY的博客
02-12 2956
问题描述：要将页面的table设为不可编辑 方案1 document.getElementById("tableid").disabled = "true"; 通过这种方式设置，只是把整个table标签变为了灰色，但是还是可以修改每一格的内容。 方案2 要是通过id设置table中每一格的数据为不可编辑，行是行的通，就是代码太繁琐了， 然后就想通过给每个tr标签设置name属性(name=“hi...
[前端]IE不支持table中tr的name属性，使得document.getElementsByName不能获取到对应的tr元素...
weixin_33720452的博客
12-12 239
问题描述：希望实现toggle效果(也称数据钻取)，点击一下链接列表链接，展开此链接下的其他链接列表，再点击一下链接列表隐藏。实现办法有多种：一种是用jquery效果更丰富一些。另一种是直接CSS+Js。我用的是后一种方法。<html><head><script type="text/javascript"> function getElements()...
web前端2周搞定微信小程序安心食疗项目
最新发布
06-24
在2周的时间内，一个有志的前端工程师完全可以通过学习相关文献和教程，以及实践和挑战来掌握微信小程序开发的技能。 在开发微信小程序过程中，前端工程师需要注意的是，小程序的体验和性能方面要优秀，遵守微信小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值