web前段学习第二部分-CSDN博客

本文链接：https://blog.csdn.net/S788977SS/article/details/127467277

web前段学习第二部分

HTML的基本使用

嵌套列表

列表之间可以互相嵌套形成层级列表

 <h2>美味食物</h2>
<ul>
    <li>小吃类</li>
            <ul type="circle">
                <li>炒饭</li>
                <li>面筋</li>
                <li>烤鸭</li>
                <li>蜜饯</li>
            </ul>
    <li>小孩子</li>
            <ul type="circle">
                <li>游乐园</li>
                <li>动物园</li>
                <li>水上乐园</li>
            </ul>
    </li>
</ul>
<em>暑假快和小孩一起来玩吧</em>

<dl>
    <dt>中国</dt>
    <dd>
        <dl>
            <dt>辽宁省</dt>
            <dd>沈阳</dd>
            <dd>大连</dd>
        </dl>
        <dl>
            <dt>四川省</dt>
            <dd>成都</dd>
            <dd>南充</dd>
        </dl>
    </dd>
</dl>

表格标签

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>定义表格单元
<caption>:定义表格标题

注：之前是有嵌套关系的，要符合嵌套规范
语义化标签：tHead,tBody,tFood
注：在一个table中，tBody可出现多次，但其他两个只能出现一次，如果有多个table,tHead可出现多次

如`<table>
    <caption>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>    
        <tHbody>
            <tr>
                <td>2019年1月13日</td>
                <td>天气晴</td>
                <td>适合出行</td>
            </tr>
        </tHbody>
        <tFood>

        </tFood>
</table>

表格属性

border:表格边框
cellpadding：单元格内的空间
cellspacing；单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式

<table border="1" cellpadding="35" cellspacing="35">
    <caption>天气预报</caption>
        <tHead>
            <tr align="rignt">
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>    
        <tHbody>
            <tr valign="bottom">
                <td rowspan="2">2019年1月13日</td>
                <td>白天</td>
                <td>天气晴</td>
                <td colspan="2">适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td>天气晴</td>
            </tr>
        </tHbody>
        <tFood>

        </tFood>

表单标签

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

input(单表签）有一个type属性，决定是什么控件

<body>
    <form action="http://www.baidu.com">
        <h2>输入框：</h2>
        <input type="text">
        <h2>密码框：</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" 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">
    </form>
</body>

在复选框，那三行中的type="checkbox"后加checked则该选项就默认被选中，在后面加disabled则该选项不能被选中。在输入框或密码框中的type="text"或type="password"后面加placeholder="请输入"则输入框会出现请输入字样

在单选框中的input type="radio"后加name=" "属性则两选项中只能选一项 " "中的值自己定义

表单相关标签

多行文本框：<textarea>
下拉标签：<select>,<option>

如：<h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>美食</option>
            <option>游戏</option>
        </select>
        <select>
            <option size="3">请选择</option>
            <option>美食</option>
            <option>游戏</option>
        </select>
        <select multiple>
            <option >请选择</option>
            <option>美食</option>
            <option>游戏</option>
        </select>
        <input type="file" multiple>

辅助标签：<label>

<input type="radio"name="gender" id="man"><lable for="man">男</lable>
        <input type="radio"name="gender" id="woman"><lable for="woman">女</lable>

上面的一些常见属性如**checked,disabled（加上后该项不能被选择）,name,for与id（相对应，扩大了选择时点的范围）,multiple(加在标签后则那一选项可多选）,size（显示的选项数）,cols
和rows（设置多行文本框的大小分别控制列数和行数）**要注意

表格表单组合

如

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

加入的**    可使的两个选择间隔开些**action=“”**可添加提交的网址

`<div>`与`<span>`

div:做一个区域划分的块
span:对文字进行修饰的内联
注：他们默认都是没有样式的，如果要进行一些修饰就要用样式来配合

边框框选的是由div进行区域划分的，标题部分的红色HTML是由span进行修饰的

css基础语法

格式:选择器｛属性1；值1；属性2；值2｝
属性：width：宽
height:高
background-color:背景色
长度单位：
1.px像素
2.%百分比
外容器1–600px 当前容器50%–300px
外容器2–400px 当前容器50%–200px

<!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:100px;height:100px;background-color:red}
    </style>
</head>
<body>
    <div>这是忙碌的一天</div>
</body>
</html>

在head部分加一个<style>标签中间加一个div｛｝表示选择器，与后面body部分的div对应｛｝之中添加相应属性，反应到<div>这是忙碌的一天</div>的运行结果中

内联样式与内部样式

1.内联(行内，行间）样式
在html标签上添加style属性来实现
2.内部样式
在<style>标签内添加的样式
注:内部样式的优点，可以复用代码

css样式的引入方式

内联样式（如<div style="width:100px;height:100px;background-color:red">正式</div>）
style属性
内部样式
style标签
区别：内部样式符合w3c的规范标准，进行让结构和样式分开处理
外部样式
引入一个单独的css文件，name.css
用 <link>标签，有以下两属性
1.rel引入资源跟页面的关系
2.href引入的外部资源的地址
用@import引入（不建议）

<!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">
    <link rel="stylesheet" href=".\common.css">
    <title>Document</title>
</head>
<body>
    <div>二级分行</div>
</body>
</html>

如上面的代码，创建一个common.css其中写下一些样式，在title标签上面添加一个link标签。其中rel后的值有很多种
如

这里
是引用

href后面的链接就会映射到body部分去，给它添加上样式

css中的颜色表示法

1.单词表示法：red blue green yellow…
2.十六进制表示法：#000000（最小） #ffffff（最大白）
在0123456789abcdef中选择字符来表示
3.rgb三原色表示法：rgb(255,255,255);
取值范围0-255
获取颜色的工具
提取颜色的下载地址：https://www.baidufe.com/fehelper
photoshop工具

背景样式

background-color背景色
background-image背景图
url(背景图地址)
默认：会水平垂直都铺满背景图
background-repeat:背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 都不平铺
background-position：背景图片的位置
x,y number（如%50%50)/单词
x:left,center,right
y:top,center,bottom
background-attachment：（body有高度时）背景图片随滚动条的移动方式
scroll:默认值（背景位置是按当前元素进行偏移的）
fixed:(背景位置是按阅览器进行偏移的，图片固定不动。如果设置的图片位置也变成了相对与阅览屏幕设置的，）

背景实现视觉差效果

在head部分style标签中加#div1#div2#div3用来和body部分的三个div相对应从而添加不同的样式

css边框样式

border-style:边框样式（solid:实线，dashed:虚线，dotted:点线）
border-color：边框颜色
border-width:边框大小
边框可以针对某一个边进行单独设置：border-left-style：中间的方向有left right top bottom

css边框实现三角形

在head部分的style标签中的div中通过设置边框颜色和背景颜色来实现（边框颜色设置成透明色：transparent)

css文字样式

font-family:字体类型
英文字体：Arial,‘Times New Roman’（字体类型中出现空格则要加引号）
中文字体：微软雅黑，宋体
常设置有多种字体类型，防止电脑无法识别
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSum
衬线体与非衬线体
font-size:字体大小
默认：16px
写法：（）px，单词（small,large…不推荐）
font-weight:字体粗细
两种模式：正常(normal)，加粗（bold)
写法：单词/numder(100,200…900 ，100-500是正常的之后是加粗的)
font-style:字体样式
模式：正常（normal）斜体（italic）
写法：单词(normal,italic)
oblique也表示斜体，将没有斜体属性的字体设置倾斜操作。用的较少

color：字体颜色

css段落样式

text-decoration:文本装饰
下划线：underline
删除线:line-through
上划线:overline
不添加任何修饰：none
注：添加多个文本修饰写法：line-through underline overline
text-transform:文字大小写(针对英文段落）
小写：lowercase
大写:uppercase
只针对首字母大写：capitalize
文本缩进（text-indent)
首行缩进(首行第一个字对齐于二行第二个字的表达样式如：text-indent：36px；font-size：18px。即将text-indent后面的值设置为font-size（默认值为16px）的两倍）
em单位：相对单位，1em永远与字体大小相同（例如上面可以表示为text-indent：2em；font-size：18px）
注意：若文段中有英文则无法对齐到指定位置
文本对齐（text-align)
对齐方式：left，right，center，justify(两端点对齐）
文本的行高
line-height:定义行高
定义：一行文字的高度加文字的上边距，下边距
默认值：是变化的根据字体的大小在不断变化
取值：number）px/scale（比例值（1,2…），跟文字大小成比例)
letter-spacing:字之间的间距
word-spacing:定义词间距（针对英文)
英文和数字折行问题
word-break：break-all；（强烈的折行）
word-warp：break-word；（不太强烈，会产生一些空白区域）
如在这里插入图片描述

css复合样式

复合的写法：通过空格的方式实现，复合写法有的是不需要关心顺序(但那要是个整体则要挨在一起）的。如background,border;有的要。如font
background：red url() repeat 0 0;
border:1px red solid;
font：
注：最少两个值 size family
weight style size family
style weight size family
weight style size/line-height family
注：复合单一尽量不混写，非要的话也先写复合形

css选择器

ID选择器
注：id是唯一值，一个页面不能多次出现同个ID(div标签中加id=name,head部分style中加#name{属性})
命名规范由字母，下划线，中划线，且第一个字母不是数字
1.驼峰写法（根据目的采用相关单词组合命名）如searchButton（小驼峰，第一个单词首字母小写，第二个单词首字母大写），SearchButton(大驼峰）
2.短线写法：search-small-button
3.下划线写法：search_small_button
CLASS选择器
1.class可以复用
2.可添加多个class样式
写法：

 <style>
       .doc{background:rebeccapurple} 
       .cont{width:300px;height:300}
    </style>
</head>
<body>
   <div class="doc cont">开开心心</div>
   <div class="doc cont">高高兴兴</div>
</body>

3.多个class样式优先级由css决定（head部分中的style标签中添加的css属性的先后,后面的属性优先），而不是class属性中的顺序
4.标签+类的写法

<style>
       p.doc{background:rebeccapurple}
    </style>
</head>
<body>
   <div class="doc cont">开开心心</div>
   <p class="doc">十二点半</p>

其中doc中的属性就加到了p中

web前段学习 第二部分

web前段学习 第二部分

HTML的基本使用

嵌套列表

表格标签

表格属性

表单标签

表单相关标签

表格表单组合

<div>与<span>

css基础语法

内联样式与内部样式

css中的颜色表示法

背景样式

背景实现视觉差效果

css边框样式

css边框实现三角形

css文字样式

css段落样式

css复合样式

css选择器

web前段学习第二部分

web前段学习第二部分

`<div>`与`<span>`