第二周学习

HTML

嵌套列表

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

编写尝试

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>

注意应用方式

表格

表格标签

1. <table>：表格的最外层容器
2. <tr>：定义表格行
3. <th>：定义表头
4. <td>：定义表格单元
5. <caption>：定义表格标题

有嵌套关系，要符合嵌套规范

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

<tbody>可以出现多次，另两个仅一次
三个标签不发挥作用，但会使书写更规范

编写尝试

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

表格效果：
　　　　　　　　　　表格标题

第一行表头1	第一行表头2	第一行表头3
第二行表头1内容	第二行表头2内容	第二行表头3内容
第三行表头1内容	第三行表头2内容	第三行表头3内容

表格属性

1. boder：表格边框（默认没有边框）

<table boder:"1">表示1像素宽的边框

2. cellpadding：单元格内空间

<table cellpadding="1">空间加上1个像素

3. cellspacing：单元格之间的空间

<table cellspacing="1">单元格之间加上1个像素

4. rowspan：合并行

<th rowspan="2">合并两行
如在第二行内容1左加，删去第三行内容1后两格合并

5. colspan：合并列

<th colspan="2">合并两列
如在第一行表头1左加上则第二第三行的内容12都归类到表头1中

6. align：左右对齐方式（left　center　right）

<tr align="对齐方式">

7. valign：上下对齐方式（top　middle　bottom）

<tr valign="对齐方式">

在上方编写尝试中找到对应元素修改

表单

表单标签（1）

1. <form>：表单的最外层容器
2. <input type="样式">：标签用于搜集用户信息，根据不同的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=“提示内容”

表单标签（2）

1. <textarea>：多行文本框
2. <select>,<option>：下拉菜单
3. <label>：辅助表单

编写尝试

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

若书写为<option select>则表示该项初始被选中
加入disabled可以使该项不能被选中
multiple表示多选属性，可以与上传文件标签等套用实现选中多个项目

表格表单的组合

编写尝试

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

呈现效果

<div>&<span>

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

div和span都是没有默认样式的，需要配合CSS。

编写尝试

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

div补充结构，span补充样式

CSS

CSS基础语法

格式：
　　选择器{属性1：值1；属性2：值2}
长度单位：
　　px(像素)、%(百分比)
基本样式：
　　width（宽）、height（高）、backgroound-color（背景颜色）
注释：
　　/* */
　　快捷键：Shift + alt+A

%百分比相当于映射外容器大小的比例
如外容器是600px 当前容器 50%就为300px
不能超过100%

编写尝试

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

外部样式

<link>标签：当前页面与外部资源的引入关系
　　　属性：rel（引入资源类型，指定资源和页面的关系）
　　　　　　值：
　　　　　　　alternate (文档的替代版本，如打印页、翻译、镜像)
　　　　　　　stylesheet (文档的外部样式表)
　　　　　　　start　　　　(集合中的第一个文档)
　　　　　　　next　　　　(集合中的下一个文档)
　　　　　　　prev　　　　(集合中的上一个文档)
　　　　　　　contents　　 (文档的目录)
　　　　　　　index　　　　(文档的索引)
　　　　　　　glossary 　　(在文档中使用的词汇的术语表)
　　　　　　　copyright 　　(包含版权信息的文档)
　　　　　　　chapter 　　　(文档的章)
　　　　　　　section　 　　(文档的节)
　　　　　　　subsection 　(文档的小节)
　　　　　　　appendix　　 (文档的附录)
　　　　　　　help 　　　　(帮助文档)
　　　　　　　bookmark 　(相关文档)
　　　　　　href（资源地址）

外部样式是通过引入一个单独的CSS文件，name.css实现的

 div{ width: 100px; height: 100px; background-color: red;}

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- link标签主要书写在本行 -->
    <title>Document</title>

@import用法

 <style>
      @import url(文件路径);
 </style>

有很多问题，不建议使用

颜色表示

1. 单词表示法
   div{ background-color:颜色}
2. 十六进制表示法（形如#000000）
   div{ background-color:#000000;}
3. rgb三原色表示法(颜色的混合，0~255）
   div{ background-color：rgb(255,255,

fehelper插件可以用于提取颜色（16进制表达）

背景样式

1. background-color：背景颜色
2. background-image：背景图片

background-image：url（图片路径）

3. background-repeat：背景图片的平铺方式

repeat-x（x平铺）
repeat-y（y平铺）
repeat（x，y都平铺，默认）
no-repeat（都不平铺）

4. background-position：背景图片的位置

background-position:x y
x：left，center，right，数字+px，%（百分比）
y：top，center，bottom，数字+px，%（百分比）
数字为正向右下，为负向左下

5. background-attachment：背景图随滚动条的移动方式

scroll（跟随移动）(背景位置按当前元素偏移的)
fixed（固定）(根据浏览器偏移)

<style>
      body{height:像素数}
 </style>

可规定页面长宽（直观感觉是多了滚动条）

背景视觉差的实现

编写尝试

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

使用id属性可分别编辑块的样式

边框样式

1. border-style：样式
   solid：实线
   dashed：虚线
   dotted：点线
2. border-width：大小
3. border-color：颜色

div{ border-style:样式;bordrt-color;颜色；border-weight:边框宽度)

也可以使用border-边的位置-style此类的（边的位置有：top bottom right left）单独给一个边添加样式

编写尝试

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

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

即可在块中生成一个向左的黑色等腰直角三角形
原理是令其他三边不显示从而实现一个三角形的显示效果

文字样式

font-family ：字体类型（默认微软雅黑）
　　　　　　英文、中文（可自行上网寻找）
div{ font-family:字体类型}
衬线体与非衬线体

衬线体棱角分明，非衬线体较圆滑

设置字体备选方案
div{ font-family: SimSum,微软雅黑; }

计算机可以识别已经安装的字体

引号的使用

字体名称中出现空格需要添加单引号

font-size： 字体大小（默认16px）
　 写法：
　 　　　单词（xx-small，x-small，small，medium，
　 　　　large，x-large，xx-large）
　 　　　数字（一般为偶数）
div{ font-size:字体大小}

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

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

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}
实现了背景变为红色和引入图片居中，可以节省很多代码

复合写法有些不需要顺序
font取药顺序，必须要两个值（size family，必须按顺序且需要写在最后）
如font:10px 宋体
size/line-height family

注尽量不要混写，如果要混写，先复合再单一

选择器

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>

注：ID是唯一值，多次出现不符合规范
命名规范：字母_-数字（命名的第一位不能是数字）
命名方式：驼峰式（aBc，AbCd）、下划线式、短线式

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>

class可以复用
可以添加多个class样式
多个样式时，优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法