第二周学习记录

最新推荐文章于 2024-07-26 20:22:06 发布

小杰子咔咔咔

最新推荐文章于 2024-07-26 20:22:06 发布

阅读量895

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/m0_63696408/article/details/127578243

版权

第二周学习记录

嵌套列表

1.列表之间可以相互嵌套实现多级列表

编写

1.无序有序列表

<ul>
    <li>
        一级内容1
        <ul>
            <li>
                二级内容1
                <ul>
                    <li>三级内容</li>
                </ul>
            </li>
            <li>二级内容2</li>
        </ul>
    </li>
    <li>
        一级内容2
        <ul>
            <li>二级内容3</li>
            <li>二级内容4</li>
        </ul>
    </li>

</ul>

样式会随着层级的改变而改变

2.定义列表

<dl>
    <dt>一级内容</dt>
    <dd>
        <dl>
            <dt>二级内容1</dt>
            <dd>三级内容1</dd>
            <dd>三级内容2</dd>
        </dl>
        <dl>
            <dt>二级内容2</dt>
            <dd>
                <dl>
                    <dt>三级内容1</dt>
                    <dd>四级内容</dd>
                </dl>
            <dd>三级内容2</dd>
            <dd>三级内容3</dd>
        </dl>
    </dd>
</dl>

表格

表格标签

$< t ab l e >$ ：表格的最外层容器
$< t r >$ ：定义表格行
$< t h >$ ：定义表头
$< t d >$ ：定义表格单元
$< c a pt i o n >$ ：定义表格标题

有嵌套关系规范

 三个语义化标签：<thead> <tbody> <tfoot>

$< t b o d y >$ 可以出现多次，其余两个只能出现一次
三个标签不发挥作用，但是会使得书写规范。

编写

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>第一行表头1</th>
            <th>第一行表头2</th>
            <th>第一行表头3</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>第二行表头1内容</td>
        <td>第二行表头2内容</td>
        <td>第二行表头3内容</td>
    </tr>
        <tr>
            <td>第三行表头1内容</td>
            <td>第三行表头2内容</td>
            <td>第三行表头3内容</td>
        </tr>
    </tbody>
    <!-- <tfoot>表尾</tfoot>在这里写 -->
</table>

表格属性

boder：表格边框<默认没有边框>

$< t ab l e b o d er : "1" >$ 表示1像素的边框

cellpadding:单元格内空间

$< t ab l ece llp a dd in g = "1" >$ 空间+1个像素

cellspacing:单元格之间的空间

$< t ab l ece ll s p a c in g = "1" >$ 单元格之间+1个像素

colspan:合并列

$< t h co l s p a ce = "2" >$ 合并两列

rowspan:合并行

$< t h ro w s p an = "2" >$ 合并两行

align:左右对齐方式

$< t r a l i g n = " 对齐方式 " >$

表单

表单标签

1. $< f or m >$ :表单的最外层容器
2.> $< in p u tt y p e = “ 样式 ” >$ ：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。
type属性：text（普通文本输入框），password（密码输入框），checkbox（复选框），radio（单选框），file（上传文件），submit（提交按钮），reset（重置按钮）

编写

<form action="提交文件的地址">
    <h2>输入框</h2>
    <input type="text">
    <h2>密码框</h2>
    <input type="password">
    <h2>复选框</h2>
    <input type="checkbox">选项1
    <input type="checkbox">选项2
    <input type="checkbox">选项3
    <h2>单选框</h2>
    <input type="radio" name="自定义内容">选项1
    <input type="radio" name="自定义内容">选项2
    <!-- 自定义内容相同时将两个选项归为一类，选择时只能选择一个 -->
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交和重置</h2>
    <input type="submit">
    <input type="reset">
    <h2>框名</h2>
    <input type="样式">
</form>

收集提交的文件和信息还未学习　待拓展
checkbox指选择框，若想默认选中只需在checkbox后加checked
添加disabled属性即可禁用
想在输入框内添加文字提示则需添加placeholder=“提示内容”

表单标签

$< t e x t a re a >$ ：多行文本框
$< se l ec t >$ , $< o pt i o n >$ ：下拉菜单
$< l ab e l >$ ：辅助表单

编写

<form action="">
    <h2>可输入文本框</h2>
    <textarea cols="列数" rows="行数"></textarea>
    <h2>下拉菜单</h2>
    <select size="显示的项的数目" multiple>
        <!-- multiple表示多选 -->
        <option selected disabled>请选择</option>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <h2>单选框</h2>
        <input type="radio" name="自定义内容1"><label for="自定义内容2">选项1</label>
        <input type="radio" name="自定义内容1"><label for="自定义内容2">选项2</label>
        <!-- label标签使表单可选择范围变大，从而提升用户体验 -->
    </select>
</form>

表格表单的组合

编写

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

$< d i v >$ & $< s p an >$

$< d i v >$ ：、用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。故大部分标签可以嵌套在
标签中，
标签本身也可以嵌套多层
，用来将网页分割成独立的不同的部分，实现网页的规划和布局。
$< s p an >$ ：用于修饰文字，内联（看不出独立）

编写

<div>
    内容分块
    <span>内联文字，文本修饰</span>
</div>
<!-- 如下 -->
<div>
    <h2>12<span>3</span>45</h2>
</div>
<!-- 在span标签中添加样式即可单独修饰3 -->

CSS

CSS的基础语法

格式：

选择器{属性1：值1；属性2：值2}

长度单位：

px(像素)、%(百分比)

基本样式：

width（宽）、height（高）、backgroound-color（背景颜色）

注释：

/* */
　　快捷键：Shift + alt+A

编写

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

以上编写存在于head标签内
会自动查找body标签内的div标签

内联样式与内部样式

内联(行内、行间)样式

在html标签上添加style属性实现

内部样式

在style标签内添加的样式

编写

内联样式：

 <div style="width: 100px; height: 100px;background-color: red">内容</div>

内部样式：

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

颜色表示

1.单词表示法

div{ background-color:颜色}

2.十六进制表示法（形如#000000）

div{ background-color:#000000;}

3.rgb三原色表示法(颜色的混合，0~255）

div{ background-color：rgb(255,255)

背景样式

1.background-color：背景颜色
2.background-image：背景图片
3.background-repeat：背景图片的平铺方式
4.background-position：背景图片的位置
5.background-attachment：背景图随滚动条的移动方式

背景视觉差的实现

编写

<head>
    <style>
        #div1{ 容器1样式,长宽高背景图等;background-attachment: fixed;}
        #div2{ 容器1样式,长宽高背景图等;background-attachment: fixed;}
        #div3{ 容器1样式,长宽高背景图等;background-attachment: fixed;}
         /* table{ 可添加表格样式} */
    </style>
</head>
<body>
    <div id="div1">内容1</div>
    <div id="div2">内容2</div>
    <div id="div3">内容3</div>
</body>

边框样式

1.border-style：样式
2.solid：实线
3.dashed：虚线
4.dotted：点线
5.border-width：大小
6.border-color：颜色
div{ border-style:样式;bordrt-color;颜色；border-weight:边框宽度)

编写

<style>
        div{ width: 0px ;height: 0px;
             border-top-color:transparent ;
             border-top-style: solid;
             border-top-width: 10px;
             border-right-color:black ;
             border-right-style: solid;
             border-right-width: 10px;
             border-left-color:transparent ;
             border-left-style: solid;
             border-left-width: 10px;
             border-bottom-color:transparent ;
             border-bottom-style: solid;
             border-bottom-width: 10px;    
            }
    </style>

文字样式

1.font-family ：字体类型（默认微软雅黑）
　　　　　　英文、中文（可自行上网寻找）
div{ font-family:字体类型}
衬线体与非衬线体
2.设置字体备选方案
div{ font-family: SimSum,微软雅黑; }
3.引号的使用
4.font-size：字体大小（默认16px）
　写法：
　　　　单词（xx-small，x-small，small，medium，
　　　　large，x-large，xx-large）
　　　　数字（一般为偶数）
div{ font-size:字体大小}

5.font-weight：字体粗细
　　normal（正常），hold（加粗），100~900（整百，100-500为正常，600-900为加粗）

6.font-style：字体样式
　　normal（正常），italic、oblique（斜体）

color
颜色使用方法同上

段落样式

text-decoration：文本修饰
　　　　下划线：underline
　　　　删除线：line-through
　　　　上划线：overline
　　　　不添加任何装饰：none
text-transform：文本大小写
　　　　小写：lowercase
　　　　大写：uppercase
　　　　首字母大写：capitalize（只针对首字母）
text-indent：文本缩进
　　　　首行缩进：数字表达（10px）
　　　　　　　　　em单位（1em永远和字体大小相同）
text-align：文本对齐方式
　　　　对齐方式：left、right、center、justify(两端点对齐)
line-height：行高
　　　　定义（上边距+下边距+文字高度）
　　　　默认（默认行高不是固定值，根据当前字体大小变化）
　　　　取值：number（px）
　　　　　　　scale（比例值，和文字大小成比例）
letter-spacing：定义字间距
如letter-spacing:10px
word-spacing：定义词间距（针对英文）
如word-spacing:10px

英文和数字不自动折行

word-break:break-all;（非常强烈的折行）
word-wrap:break-word;（不是那么强烈的折行,会产生空白）

复合样式

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

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

如：background
　　border
　　font
复合的写法是通过空格的方式实现的。
如div{background:red url(图片路径) no-repeat center center}
实现了背景变为红色和引入图片居中，可以节省很多代码
复合样式
一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
如：background
　　border
　　font

选择器

ID选择器

css：#elem{}
　　html：id=“elem”

CLASS选择器

css：#elem{}
　　html：class=“elem”

编写

ID尝试器

<head>
    <style>
        #div1{ background-color: red;}
        #div2{ background-color: red;}
    </style>
</head>
<body>
    <div id="div1">内容1</div>
    <div id="div2">内容2</div> 
</body>

CLASS选择器

<head>
    <style>
        .box{ background-color: red;}
        .box1{ background-color: red;}
        .div{ font-size:30px;}
        p.div{ font-size:30px;}
        /* 该条只针对p标签 */
    </style>
</head>
<body>
    <div class="box">内容1</div>
    <div class="box1 div">内容2</div> 
    <p class="div">内容3</p>
</body>