blog_2_梁景祯-CSDN博客

本文链接：https://blog.csdn.net/csdn_nevermore/article/details/128336454

这篇博客介绍了HTML的基本元素，包括定义列表、嵌套列表和表格的创建，详细讲解了表格的属性、表单元素如input、textarea等，并探讨了div和span在页面布局中的作用。此外，还深入讨论了CSS的样式应用，如颜色、背景、边框和文字样式，以及如何通过内联、内部和外部样式表来管理样式。

摘要由CSDN通过智能技术生成

学习内容20-45

列表
- 1.定义列表dl
- 2.嵌套列表ul (列表之间可以互相嵌套形成多层级列表)
表格标签之间具有嵌套关系
表格属性
表单标签 form
表格表单组合
div 与 span
- 1.div
- 2.span
CSS
内联样式与内部样式
外部样式（引入一个单独的css文件，xxx.css）
CSS中的颜色表示法
CSS背景样式
- 背景实现视觉差效果
CSS边框样式
- 三角形边框
CSS文字样式
- 1文字字体类型
- 2衬线体与非衬线体
- 3font-size ：字体大小
- 4font-weight ：字体粗细
- 5fond-style ：字体样式
- 6color : 字体颜色
段落样式
- 1text-decoration :文本装饰
- 2text-transform ：文本大小写（针对英文段落）
- 3text-indent ：文本缩进
- 4text-align ：文本对齐方式
CSS段落样式
- 1line-height ：定义行高
- 2定义间距
文本与段落实现个人简介
CSS符合样式
CSS选择器
- 1ID选择器
- 2Class选择器

列表

1.定义列表dl

dt：定义专业术语或名词
dd: 对名词进行解释和描述

<dl>
        <dt>
            HTML
        </dt>
        <Dd>超文本编辑</Dd>
    </dl>
    <dt>
        CSS
    </dt>
    <dd>层叠样式</dd>

在这里插入图片描述

2.嵌套列表ul (列表之间可以互相嵌套形成多层级列表)

在这里插入图片描述

表格标签之间具有嵌套关系

在这里插入图片描述

>    
    <table>
        <caption>天气预报</caption>
        <thead>
            <tr>
                <th>日期</th>
                 <th>天气</th>
              </tr>
        </thead>  
        
        <tBody>
             <tr>
               <td>2022年12月16日</td>
              <td>天气晴朗</td>
              
            </tr>
            <tr>
                <td>2022.12.16</td>
                <td>sunshine</td>
            </tr>
        </tBody>
        <tFood>
                <tr>
                    <td></td>
                </tr>
        </tFood>
    </table>

在这里插入图片描述

表格属性

在这里插入图片描述

<table border="1" cellpadding = "10" cellspacing = "10">

在这里插入图片描述

合并：
<th colspan="2">日期</th>
<th rowspan="2">日期</th>
对齐：
<tr align ="left"</th>
<tr  valign = "leftf"</th>

表单标签 form

在这里插入图片描述

<form action="https://xxxxx（提交的地址）">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password"placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>葡萄       
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>

在这里插入图片描述

<form>
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>苹果</option>
            <option>香蕉</option>       
            <option>葡萄</option>
        </select>
        <select  multiple size = 3>
            <option selected disabled>请选择</option>
            <option>苹果</option>
            <option>香蕉</option>       
            <option>葡萄</option>
        </select>
        <input type="file" multiple>
   </form>

在这里插入图片描述

<input type="radio" name="gender" id="man"><labcl for="man">男</labcl>
<input type="radio" name="gender" id="woman"><labcl for="woman">女</labcl>
（用于关联 按钮之间的文字）

表格表单组合

表格表单之间可以相互组合形成数据展示效果

<form action="">
        <table border="1" cellpadding="30">
            <tbody>
                <tr align="center"> 
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">  
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp; 
                        <input type="reset">
                    </td> 
                </tr>
            </tbody>
        </table>
    </form>

在这里插入图片描述

div 与 span

1.div

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

2.span

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


    <div>
        <h2><a href="#"><span style="color:red">吾爱破解</span> - LCG - LSG|安卓破解|病毒分析|www.52pojie.cn</a></h2> 
        <a href="#"><img src="https://t7.baidu.com/it/u=3546386972,3834653662&fm=85&app=131&size=f242,150&n=0&f=PNG?s=03D1CB20DBC3B882669AD510030050DB&sec=1671296400&t=96e2664114f3dc0c31150bb7db3db71e" alt=""></a>  
        <p>【重申】关于百度《吾爱破解吧》非吾爱官方管理以及商业交易被骗说明(2017-4-25) 梁景祯,警察在找你!Ban:huitailang【多次注册马甲发布软件捆绑木马】(2016-11-17) 【公告】禁止微商、手机轰炸机...</p>  
    </div>

在这里插入图片描述

CSS

格式：
选择器{属性1：值1；属性2：值2}
单位：
px -> 像素（pixzel）、% -> 百分比（外容器 -> 600px 当前容器 50% -> 300px ）
基本样式：
width（宽）、height（高）、background-color（背景颜色）

<style>
    div{ width: 10% ; height: 50px ; background-color : red }   
    </style>

在这里插入图片描述

内联样式与内部样式

内联(行内、行间)样式
在html标签上添加style属性来实现的

内部样式
在style标签内添加的样式
（内部样式的优点，可以复用代码）

  <style>
    div{ width: 10% ; height: 50px ; background-color : red }  /*  内部样式 */
    </style>
</head>
<body>
    <div style="width: 10% ; height: 50px ; background-color : red ">这是一个块</div>   <!-- 内联样式 -->
    <div>这是另一个块</div>

效果同上图
内部样式优势：可以复用代码

外部样式（引入一个单独的css文件，xxx.css）

法1
通过<link>标签（rel ，herf）

<link rel="stylesheet" href="文件名地址">

法2
@import法

<style>
    @import url('文件名地址');
    </style>

link和@import法的区别

CSS中的颜色表示法

1、单词表示法：
red、blue、green、yellow、…

2、十六进制表示法：
0 1 2 3 4 5 6 7 8 9 a b c d e f
#000000（最小值） #ffffff（最大值）

3、RDB三原色表示法：
rgb(255,255,255)（最大值）
CSS颜色代码对照表
获取网页颜色：
1.FeHelper
2.PhotoShop

CSS背景样式

1、background-color :背景颜色
2、background-image:背景图片
（url(背景地址)）
3、background-repeat :背景图片的平铺方式
（repeat-x x轴平铺
repeat-y y轴平铺
repeat（ x , y 都进行平铺，默认值）
no-repeat 都不平铺）
4、background-position :背景图片的位置
（x y：number(px、%) | 单词）
（x：left、center、right）
（y：top、center、bottom）
5、background-attachment:背景图随滚动条的移动方式
scroll:默认值 (背景位置是按照当前元素进行偏移的)
fixed (背景位置是按照浏览器进行偏移的)

 <style>
    div{ width:100%;height:100%;background-color:red;background-image:url(./xxx);background-repeat : repeat-x；background-position:100% 100%;background-attachment:scroll;}  
    </style>

背景实现视觉差效果

<style>
        #div1{ width:1400px;height: 800px; background-image:url(图片地址); background-attachment: fixed;}
        #div2{ width:1400px; height: 800px; background-image:url(图片地址); background-attachment: fixed;}
        #div3{ width:1408px; height: 800px; background-image:url(图片地址); background-attachment: fixed;}
    </style>

CSS边框样式

在这里插入图片描述

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

针对某一条边单独设置：

 <style>
    div{ width:30opx; height:300px; border-right-style: dotted; border-right-width: 10px;border-right-color: green; }
 </style>

（border-left-style：solid；border-bottom-style：dashed）

三角形边框

正常边框：
在这里插入图片描述

三角形边框：（障眼法，通过把中间区域变为0 并且将其余三个三角形改为背景色）

div{ width: 0px; height :0px; 
        border-top-color: white;
        border-top-style:solid;
        border-top-width : 30px;;
        border-right-color: red;
        border-right-style: solid;
        border-right-width : 30px;;
        border-bottom-color: white;
        border-bottom-style: solid;
        border-bottom-width: 30px;;
        border-left-color: white;
        border-left-style: solid;
        border-left-width : 30px;
        }

在这里插入图片描述
防止和背景色不一致（通用方式）：利用透明颜色：transparent
eg：

 border-top-color: transparent;

CSS文字样式

1文字字体类型

在这里插入图片描述

<style>
    div{ font-family: Arial;}
</style>

style>
    div{ font-family: "Times New Roman" , simsun ,微软雅黑;}
    </style>

设置多种字体用于备用，从前往后的形式来识别的

2衬线体与非衬线体

在这里插入图片描述

3font-size ：字体大小

默认大小：16px
写法 : number(px) | 单词（small large … 不推荐使用）

div{ font-size: 16px}

字体大小一般设置成偶数(方便文字对齐）
在这里插入图片描述

4font-weight ：字体粗细

两种模式 :
正常（normal）加粗（bold）
写法 :
单词（normal、bold） | number（100 200 …）

5fond-style ：字体样式

两种模式：
正常（normal）斜体（italic）或 (oblique（用得少）)
（区别：1.italic带有倾斜属性的字体的才可以设置倾斜操作。2.oblique没有倾斜属性的字体也可以设置倾斜操作。）
写法：（normal、italic）

6color : 字体颜色

段落样式

1text-decoration :文本装饰

下划线：underline
删除线：overline
上划线：line-through
无装饰：none
（添加多个文本修饰：line-through underline overline）（单词之间加空格）

 <style>
    p{width:300px;text-decoration: underline;}
    </style>

在这里插入图片描述

 <style>
    p{width:300px;text-decoration: underline overline  linethrough}
    </style>

在这里插入图片描述

2text-transform ：文本大小写（针对英文段落）

小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

p{width:300px;text-transform:uppercase;}

3text-indent ：文本缩进

首行缩进
em单位：相对单位，1em永远跟字体大小相同（字缩进字符与字大小不同行与行之间无法对齐，所以需要em单位）
在这里插入图片描述
如上图。2em=36px

4text-align ：文本对齐方式

对齐方式：right、left、center、justify(两段点对齐)

CSS段落样式

1line-height ：定义行高

在这里插入图片描述
默认行高：不为固定值，根据当前字体的改变而改变
取值：1.number(px) | scale(比例值，跟文字大小)
比例值：

<style>
    p{ line-height: 1 }
 </style>

2定义间距

letter-spacing：定义字间距
word-spacing：定义词间距（对英文）
强行折行：（对英文和数字，因为太长二被视为一个整体而无法折行的问题）
1.word-break ：break-all；（非常强烈的折行，不会产生空区域）
2.word-wrap ：break-word；（不那么强烈的折行，会产生空白区域）

文本与段落实现个人简介

<!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">
    <title>Document</title>
    <style>
        div{width:800px;height: 800px;}
        h1{ text-align:center; color:greenyellow;}
        h2{color:darkgreen}
        #p1{font-style: italic;font-weight:bolder;color:chartreuse;text-indent: 2em}
        h3{color:darkgreen}
        #p2{line-height: 30px;color:springgreen;text-indent: 2em;font-style:italic;text-decoration: underline }
    </style>
</head>
<body>
    <div>
        <h1>张翰个人简介</h1>
        <h2>基本信息</h2>
        <p id="p1">中国内地男演员、歌手、制作人
            张翰，原名张汉，1984年10月6日出生于黑龙江省齐齐哈尔市龙沙区，中国内地男演员、歌手、制作人，
        </p>
        <h3>早年经历</h3>
        <p id="p2">
            毕业于中央戏剧学院表演系2007届本科班。2009年，张翰凭借青春校园偶像剧《一起来看流星雨》中的慕容云海一角正式进入演艺圈。2011年，主演电视剧《一不小心爱上你》，首次尝试扮演“商务轻熟男”形象。2012年，主演偶像剧《胜女的代价》，并凭借该剧获得2012年亚洲偶像盛典最具号召力演员奖。2013年月，主演古装历史剧《隋唐演义》 [7]  ，凭借该剧获得第19届上海电视节白玉兰奖最具人气男演员奖 [8]  。2014年4月，参与湖南卫视真人秀《花儿与少年》第一季的录制 [9]  ；6月，张翰成立个人演艺公司“张翰工作室” [10]  ；同年，凭借主演的偶像剧《杉杉来了》获得第10届首尔电视剧大赏亚洲之星奖 [11]  。
        </p>




    </div>
</body>
</html>

在这里插入图片描述

CSS符合样式

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

复合样式
（复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border;有的是需要关心顺序，例如font）
1. background : red url() no-repeat 0 0;
2.border：1px red solid;
3.font：（至少要有两个值 size family）

weight style size family   √
style weight size family    √
weight style size/line-height family    √
(size和family放最后）

（注:尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式）

CSS选择器

1ID选择器

在这里插入图片描述
驼峰式：searchButton（小驼峰）SearchButton（大驼峰）
下划线式：search_small_buttom
短线式：search-small-buttom

在这里插入图片描述

2Class选择器

在这里插入图片描述
标签+类例子：
p.box
只对p标签带有box生效

blog_2

学习内容20-45

列表

1.定义列表dl

2.嵌套列表ul (列表之间可以互相嵌套形成多层级列表)

表格标签 之间具有嵌套关系

表格属性

表单标签 form

表格表单组合

div 与 span

1.div

2.span

CSS

内联样式与内部样式

外部样式（引入一个单独的css文件 ，xxx.css）

CSS中的颜色表示法

CSS背景样式

背景实现视觉差效果

CSS边框样式

三角形边框

CSS文字样式

1文字字体类型

2衬线体与非衬线体

3font-size ：字体大小

4font-weight ：字体粗细

5fond-style ：字体样式

6color : 字体颜色

段落样式

1text-decoration :文本装饰

2text-transform ：文本大小写（针对英文段落）

3text-indent ：文本缩进

4text-align ：文本对齐方式

CSS段落样式

1line-height ：定义行高

2定义间距

文本与段落实现个人简介

CSS符合样式

CSS选择器

1ID选择器

2Class选择器

表格标签之间具有嵌套关系

外部样式（引入一个单独的css文件，xxx.css）