初学HTML、CSS

yusheng_xiao

已于 2022-10-27 22:39:40 修改

阅读量352

点赞数

文章标签： html 前端

于 2022-10-27 22:35:23 首次发布

本文链接：https://blog.csdn.net/yusheng_xiao/article/details/127471004

版权

1、表格标签？

<table>：表格的最外层容器
<tr>定义表格行
<th>定义表格头
<td>定义表格单元
<caption>定义表格标题
注：之间有嵌套关系，要符合嵌套规范。
语义化标签：<tHead> <tBody><tFood>

注：tBody可以出现多次，但是tFood、tHead只能出现一次。

<!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>
</head>
<body>
        <table>
            <caption>天气预报</caption>
            <thead>
                <tr>
                    <th>日期</th>
                    <th>天气情况</th>
                    <th>出行情况</th>
                </tr>
            <thead>
                <tBody>
            <tr>
                <td>2018年7月15日</td>
                <td><img src="./tianqi2.png" alt=""></td>
                <td>天气晴朗,适合出行。</td>
            </tr>
            <tr>
                <td>2018年7月18日</td>
                <td><img src="./tiqnqi1.png" alt=""></td>
                <td>有小雨,出门请带伞。</td>
            </tr>
        </tBody>
    </table>
</body>
</html>

表格属性？

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

<!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>
</head>
<body>
    <table border="1" cellpadding="30" cellspacing="30">
     <caption>天气预报</caption>
     <thead>
         <tr align="right" >
             <th colspan="2">日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
         </tr>
     <thead>
         <tBody>
     <tr valign="top">
         <td rowspan="2">2018年7月15日</td>
         <td>白天</td>
         <td><img src="./tianqi2.png" alt=""></td>
         <td>天气晴朗,适合出行。</td>
     </tr>
     <tr>
        <td>夜晚</td>
        <td><img src="./tiqnqi1.png" alt=""></td>
        <td>天气晴朗,适合出行。</td>
    </tr>
     <tr valign="bottom">
         <td rowspan="2">2018年7月18日</td>
         <td>白天</td>
         <td><img src="./tiqnqi1.png" alt=""></td>
         <td>有小雨,出门请带伞。</td>
     </tr>
     <tr>
        <td>夜晚</td>
        <td><img src="./tiqnqi1.png" alt=""></td>
        <td>有小雨,出门请带伞。</td>
    </tr>
    </tBody>
</table>
</body>
</html>

18、表单标签？

：表单的最外层容器。：标签用于搜集用户信息，根据不同的type值属性。展示不同的控件，如输入框，密码框，复选框等。 input（单标签）标签有一个 type属性：决定什么是控件。一开始就有勾的：checked 一开始就不可以选中的：disabled

<!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>
</head>
<body>
    <form action="http//.www.baidu.com">
       <h2>输入框</h2>
       <input type="text" placeholder="请输入用户名">
       <h2>密码框</h2>
       <input type="password" placeholder="请输入密码">
       <h2>复选框</h2>
       <input type="checkbox" checked>周成宇2b
       <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>
</body>
</html>

cols：列 rows;行 multiple：多选 input type=“flie” 选择文件
text area：多行文本框
：下拉菜单辅助表单

<!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>
</head>
<body>
    <center>
     <h4>电子邮箱:
        <input type="text" placeholder="电子邮箱">
     </h4>
     <h4>设置密码:
        <input type="password" placeholder="设置密码">
     </h4>
     <h4>真实姓名:
        <input type="text" placeholder="真实姓名">
     </h4>
     <dd>性别：
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
     </dd>
     <dd>
        生日：
        <select size="">
            <option selected disabled>请选择</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        <select>年
        <select>
            <option selected disabled>月</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        <select>月
        <select>
            <option selected disabled>日</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        <select>日
            <div><a href="https://new.qq.com/rain/a/20210404A00F6C00">为什么要填写我的生日？</a></div>
    </dd>
    <br>
    <dd>
        我现在：<select>
            <option selected disabled>请选择身份</option>
            <option >学生</option>
            <option >老师</option>
            <option >校领导</option>
        <lect>（非常重要）
        <br>
    </dd>
    <dd>
        <img src="./链接的综合练习/images/1_1$9E)DZTGL]KI[K68G4XK.png" alt="错误了"width="150px" height="50px"> 
        <a href="https://new.qq.com/rain/a/20210404A00F6C00">看不清楚换一张</a>
    </dd>
    <br>
    <dd>
        <strong>验证码：<>
        <input type="password "  placeholder="验证码">
    </dd>
    <br>
    <input type="button" value="立即注册" onclick="alert('你按下了按钮')" >




    </center>
</body>
    <tfoot>

    </tfoot>

    
<ml>

表格表单组合？

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

<!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>
</head>
<body>
    <form action="">
        <table border="1" cellpading="30">
            <tbody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td> <input type=" " 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;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

19、div和span

div：做一个区域划分的块
span：对文字进行修饰的，内联。

20、css基础语法？

选择器：{属性1：值；属性2：值；属性3：值；}
width：宽 height：高 background colour：背景颜色
长度单位：
1；px 像素
%：百分比
外容器600px：当前容器50%→300px

<!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;} 
        span{ width: 14%; background-color: blue;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <span>这是一个块</span>
</body>
</html>

21、css样式的引入方式？

1、内联样式
style属性
2、内部样式（注：内部样式的优点。可以复用代码）
style标签
区别：符合w3c标准，选择让结构和样式分开处理。
3、外部样式
引入一个css文件：name：css
通过link标签引入外部资源 rel属性指定资源与页面的关系。helf：资源的地址。
通过@import方式引入外部样式。（这种方式有很多问题，不建议使用。）

21、css中的颜色表示方法？

     1、单词表示法：   red   blue   yellow   black    ....
         2、 十六进制表示法：0    1     2     3      4     5    6    7    8    9    
           0      1
           0       1        2       3        4       5         6       7      8     9     a     b     c  d     e    f 
           3、   rgb三原色表示法：rgb（255，255，255）；
           取值范围   0~255
          获取颜色的工具
              提取颜色的下载地址：https：//www。baidufe。com/fehelper
              photoshop工具

css背景样式？

background-colour 背景色
background 背景图
url(背景地址)
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x
repeat-y
repeat（x，y都进行平铺.默认值）
no-repeat 都不平铺
background-position：背景位置
x，y ： number（px、%） | 单词
x：left、center、right
y：tor、center、bottom
background-attachment：背景图随滚动条移动的方式
scoll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器d进行偏移的
）

css边框样式？

border-style：边框样式
solid：实线
dashed：虚线
dotted ：点线
border-width：边框大小
px…
border-color：边框颜色
red f00 …
边框也可针对某一个边进行单独设置：border-left-style：中间是方向left right top bottom
颜色：透明颜色 transparent

css文字样式？

fornt-family：字体类型
英文中文
1、注意点 :多个文字类型的设置目的
2、引号的添加目的
front-size：字体大小
默认：16pxp’x
写法：number （px ）|单词）（small large 不推荐使用）
fornt- weight：字体粗细
模式：正常（mormal）加粗（bold）
写法：单词（normal、bold）|（number）（100 200 …900 100到500都是正常的，600到900都是加粗的）
fornt-style：字体样式
模式：正常（normal ）斜体（italic）
写法单词 (normal italic)
注：oblique也表示斜体用的比较少，一般了解即可
区别：italic：所有带有倾斜字体的可以设置
2、oblique没有倾斜字体的属性也可以设置倾斜操作。

css段落样式？

text-decoration ：文本装饰
下划线、underline
删除线line-through
上划线：overline
不添加任何装饰：none
注；添加多个文本修饰：line-through underline overline
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对字母大写：capitilize
text-indent：文本缩进
首行缩进
em单位：相对单位 1em永远都是跟字体大小相同
text-align：文本对齐方式
line-height：定义行高
什么是行高。一行文字的高度，上边距和下边距的等价关系。
默认行高，不是固定值而是变化的
默认行高，不是固定值，而且是变化的。根据当前字体的大小在不断的变化。

  取值：1、number（px）|   scale（比例值，跟文字大小成比例的 ）
  letter-spacing：词之间的间距（针对英文段落的）
  英文和数字不自动折行的问题，
  1、world-break：break-a11（0非常强烈的折行）
  2、world-warp：breakworld；（不是那么强烈的折行会产生一些空白区域）

css复合样式：

复合的写法：是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background
border，有的是需要关心顺序；例如font
1、background：red url（）repeat0 0 ；
2、border：1px red solid ；
3、font：
注：最少有两个值 size family
weight syle size family √
syle weight size √
weight style size/line -height family √
注：如果非要这样写的话；那么要先写复合样式，再写一下简单样式，这样样式才不会被覆盖掉。

css选择器？

                  1、TD选择器
                  #elem（）    id=“elem
                  注：id是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
                  2、命名的规范：由字母’下划线‘中划线，字母（并且第一个不能是数字）
                  3、驼峰写法（searchButton   小驼峰）   S饿啊日和Button（大驼峰）searchsmallbutton
                  短线写法：search-small-buttom
                  下划线写法：search_small_button