HTML+CSS自用知识点（第二周）

Whnist

已于 2022-10-30 09:09:35 修改

阅读量1.3k

点赞数 1

文章标签： html css 前端

于 2022-10-28 19:41:51 首次发布

本文链接：https://blog.csdn.net/Meg_Fu/article/details/127573467

版权

HTML+CSS自用知识点

拨云见日篇（续）

拨云见日篇（续）

八、列表

1、无序列表

1.<ul>、<li> ：列表最外层容器、列表项
（ul和li必须是组合出现的，他们之间是不能有其他标签的。）
例（对）：

<body>
    <ul>
       <li>第一项</li>
       <li>第二项</li>
    <ul>
</body>

例（错）：

<body>
    <ul>
       <p>
         <li>第一项</li>
         <li>第二项</li>
       </p> 
    <ul>
</body>

2.type属性：改变前面标记的样式（一般是用CSS去控制）(http://www.w3school.com.cn/tags/att_ul_type.asp)
例：

<ul type="clrcle">

2、有序列表

1.<ol>、<li> ：列表的最外层容器、列表项
（有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。）

2.type属性：改变前面标记的样式（一般是用CSS去控制）(http://www.w3school.com.cn/tags/att_ol_type.asp)

3、定义列表

<dl> ：定义列表
<dt> ：定义专业术语或名词
<dd> ：对名词进行解释和描述
例：

<dl> 
   <dt>HTML</dt>
   <dd>超文本标记语言</dd>
</dt>

4、嵌套列表

（列表之间可以互相嵌套形成多层级列表）
例：

<ul>
   <li>
       江苏省
       <ul>
          <li>扬州</li>
       </ul>
   </li>
   <li>
      <ul>
          <li>...</li>
       </ul>
   </li>
</ul>
```html

或

<dl>
   <dt>中国</dt>
   <dd>
       <dl>
          <dt>江苏省</dt>
          <dd>扬州</dd>
       </dl>
   </dd>
</dl>

5、表格标签

<table> ：表格的最外层容器
<tr> ：定义表格行
<th> ：定义表头
<td> ：定义表格单元
<caption> ：定义表格标题
（之间有嵌套关系，要符合嵌套规范）
例：

<body>
    <table>
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
             <td>2022年10月23日</td>
             <td><img src="图片路径" alt=""></td>
            </tr>
         </tBody>
         <tFood>
            ......
         </tFood>
    </table>
</body>

语义化标签：<tHead>(头)、<tBody>(身)、<tFood>(尾)

(在一个table中<tBody>可多次出现，<tHead>、<tFood>只能出现一次)

5.5、表格属性

border :表格边框
cellpadding ：单元格内的空间
cellspacing ：单元格之间的空间
rowspan ：合并行
colspan ：合并列
align ：左右对齐方式 (left、center、right)
valign :上下对齐方式 (top、middle、bottom)

例：

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

<th colspan="2">日期</th> <!--合并两列，以一列对应两列-->

6、表单标签

<form> ：表单的最外层容器
<input> ：标签用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框、复选框等。

例：

<body>
    <form action="输入一个网址等">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名sir">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox" checked="checkbox">冰
        <input type="checkbox" checked>碎冰冰
        <!-- checkbox为默认选中 -->
        <input type="checkbox" disabled>旺旺碎冰冰
        <!-- disabled禁止选中 -->
        <h2>单选框</h2>
        <input type="radio" name="gender">要
        <input type="radio" name="gender">不要
        <!-- 用name来使选择在同一组 -->
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>

样本图

6.5、表单相关标签

<textarea> ：多行文本框
<select>、<option> ：下拉菜单
<select> : 选项
<label> ：辅助标签

常见属性：
checked、disabled、name、for…

例：

<!-- <body>
    <form action="输入一个网址等">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名sir">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox" checked="checkbox">冰
        <input type="checkbox" checked disabled>碎冰冰
        <input type="checkbox" >旺旺碎冰冰
        <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"> -->
        <h2>多行文本框</h2>
        <textarea cols="114" rows="514"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>唱</option>
            <option>跳</option> 
            <!-- 在option后加selected为默认选项 -->
            <option>rap</option>
            <option>篮球</option>
        </select>
        <select multiple> <!-- 多选 -->
            <option>唱</option>
            <option>跳</option>
            <option>rap</option>
            <option>篮球</option>
        </select>
        <input type="file" multiple>

        <input type="radio" name="gender" id="ikun"><labcl for="ikun">ikun</labcl>
        <input type="radio" name="gender" id="小黑子"><labcl for="小黑子">小黑子</labcl>

    </form>
</body>

样本图

九、表格表单组合（八有表格表单相关内容）

表格表单之间可以相互组合形成数据展示效果。
（表单无嵌套规范）

例：

<body>
    <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>
</body>

在这里插入图片描述

十、`<div>`与`<span>`标签

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

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

例：

<body>
    <div>
        <h2><a href="#"><span>CSDN</span> - 专业开发者社区<span>官方</span></a></h2> <!-- 标题 -->
        <a href="#"><img src="" alt=""></a>  <!-- 图片 -->
        <p>CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.</p>  <!-- 段落或介绍 -->
        <a href="#">CSDN技术社区</a>
    </div>
</body>

样本图

十一、CSS基础语法

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

    <title>Document</title>
    <style>
        div{ width: 50% ; height: 100px ; background-color : red }   
    </style>  /* style里的div对应下面的div并对其进行装饰 */
</head>
<body>
    <div>一个块</div>
    <div>另一个块</div>
</body>
</html>

十二、内联样式与内部样式

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

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

例：
（内联样式）

<title>Document</title>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red">一个块</div>
    <div>一个块</div>
</body>

（内部样式）

  <style>
        div{ width:100px;height:100px;background-color:red }
    </style>
</head>
<body>
   <div>一个块</div>
</body>

区别：
内部样式代码可以复用、复合W3C的规范标准，进行让结构的样式分开处理。

十三、外部样式

<link>标签
（通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。）
rel（link的rel属性）
href

例：
（外部引入）

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="编辑器（或文件夹）下的css文件名">
    <title>Document</title>>
</head>
<body>
    <div>块</div>
</body>

@import
（另一种引入方法）（存在很多问题，不建议使用）

例：

 <title>Document</title>>
    <style>
    @import url('编辑器（或文件夹）下的css文件名');
    </style>
</head>
<body>
    <div>块</div>
</body>

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:背景图片
（ur(背景地址)）
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:100px;height:100px;background-color:red;background-image:ur(图片地址);background-repeat : repeat-x；background-position:100px 50px;background-attachment:scroll;}  
    </style>  <!-- background-position:right bottom --> <!-- background-position: 50% 100% -->

1、背景实现视觉差效果

    <title>Document</title>
    <style>
    #div1{ width:1400px;height: 800px; background-image:url(图片地址1); background-attachment: fixed;}
    #div2{ width:1400px; height: 800px; background-image:url(图片地址2); background-attachment: fixed;}
    #div3{ width:1408px; height: 800px; background-image:url(图片地址3); background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1">
        内容1
    </div>
    <div id="div2">
        内容2
    </div>
    <div id="div3">
        内容3
    </div>
</body>
</html>

十六、CSS边框样式

border-style : 边框的样式
solid : 实线
dashed : 虚线
dotted : 点线
border-width : 边框的大小
px …
border-color : 边框的颜色
red #f00 …

    <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>

（针对某一条边框进行单独设置：norder-left-style ：中间是方向 left、right、top、bottom）

1、利用边框实现三角形

    <style>
    div{ width: 0px; height :0px;  /* 将内部区域大小设为0 */
        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;;
    </style>

(可利用透明颜色：transparent)

十七、CSS文字样式

1.font-family :字体类型

英文字体：Arial，‘Times New Roman’
中文字体︰微软雅黑（‘Microsoft YaHei’），宋体(SimSun)

    <title>Document</title>
    <style>
    div{ font-family: Arial;} /* Arial、'Times New Roman'只针对英文进行变化 */ 
                              /* 微软雅黑，宋体只针对中文 */
    </style>                    
</head>
<body>
    <div>this is a text</div>
</body>
</html>

2.衬线体与非衬线体

（字体间有空格时要用单引号，使其被视为一个整体）

    <title>Document</title>
    <style>
    div{ font-family: "Times New Roman" , simsun ,微软雅黑;}
    </style>        <!-- 设置多种字体用于备用，从前往后的形式来识别的 -->           
</head>
<body>
    <div>这是一段文字</div>
    <div>this is a text</div>
</body>
</html>

3、font-size : 字体大小

默认大小：16px
写法 : number(px) | 单词（small large … 不推荐使用）
（字体大小一般设置成偶数）
在这里插入图片描述

4、font-weight ：字体粗细

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

5、fond-style ：字体样式

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

5、color : 字体颜色

十八、段落样式

1、text-decoration :文本装饰

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

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

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

    <title>Document</title>
    <style>
    p{ width:30epx; text-decoration: line-through underline overline; }
    </style>
</head>
<body>
    <p>文字</p>
</body>
</html>

3、text-indent ：文本缩进

首行缩进
em单位 ：相对单位，1em永远跟字体大小相同 （字缩进字符与字大小不同行与行之间无法对齐，所以需要em单位）

4、text-align ：文本对齐方式

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

十九、CSS段落样式

1、line-height ：定义行高

定义：一行文字的高度,上边距和下边距的等价关系。（一行字分上边距和下边距，两行字之间存在一个下边距和一个上边距）
默认行高 ：不为固定值，根据文字改变而改变
取值：1.number(px) | scale(比例值，跟文字大小)

    <title>Document</title>
    <style>
    p{ line-height: 1; }
    </style>
</head>
<body>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>

2、定义间距

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

3、实战：文本与段落的简介

<!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: 8oopx;}   
    h1{ text-align:center; color:#ff6600;}
    h2{ color:#00a0ff; text-indent: 2em;} 
    #p1{ font-style:italic; font-weight: bold;text-indent:2em;}
    #p2{ color:#66ff00; line-height: 30px; text-indent: 2em;}
    #p5{ color: #cc00cc; line-height: 30px; text-indent: 2em;}
    </style>
</head>
<body>
    <h1>张三简介</h1>
    <h2>基本信息</h2>
    <p id="p1">张三（法外狂徒），出生于罗翔老师案件故事里。</p>
    <p id="p2">多次以反派或者反面教材的身份出现在罗翔的案件故事中，拒不完全统计，张三的罪够他做779856504545364556449014754433614233544335412245203846236年的牢。</p>
    <h2>早年经历</h2>
    <p id="p3">2019年年末2020年年初，一个充满传奇色彩的人物在小破站诞生了，这个人就是张三，他带着新的人设向我们走来了。他放过火、投过毒、制作过海洛因、拐卖过儿童妇女，甚至还背叛过国家，每条法律条文修改的背后都有他的身影，可谓恶贯满盈、无恶不作，人送外号“法外狂徒”</p>
    <h2>张三传说</h2>
    <p id="p4">张三，性别不详，户籍不明，号法外狂徒，涉猎广泛、行事极为社会，平素最好白嫖不给钱，日常和熊猫抢竹子吃。为人有情有义，最善照顾青春靓丽、患有精神病的嫂子。行事睿智无比，可以误把砒霜当白糖给老婆吃，文化水平也极高，却独不会英文，自以为在卖的是国外名著典籍实际是淫秽书刊。张三眼神也不好，能把穿碎花衣服的男子当女子强奸，张三有时又力能扛鼎，运动时膝跳反应一不小心能踢死了人……
        不过也可能会是个女张三，张三可以一不小心就怀孕，一不小心就杀人，然后又流产了，然后一不小心又杀人又怀孕了又流产了，又……</p>
    <p id="p5">张三有时还会自己强奸自己，张三和小芳两人是舍友，两女生有矛盾，于是张三到网上请了位大哥去强奸她的舍友，给大哥寄了她舍友的照片。大哥到达女生宿舍，舍友不在。大哥以为张三是要被强奸的，结果把张三给强暴了……</p>   
</body>    <!-- 详细请见罗翔讲法！！！！！ -->
</html>

二十、CSS复合样式

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

复合样式
（复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border;有的是需要关心顺序，例如font）
1. background : red url() 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 （√）
（注:尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式）

Whnist

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS自用知识点（第二周）

dl>：定义列表：定义专业术语或名词：对名词进行解释和描述例： < dt > HTML < dd > 超文本标记语言 < dt > HTML < dd > 超文本标记语言 < dt > HTML < dd > 超文本标记语言
复制链接

扫一扫