华清远见重庆中心-HTML+CSS个人总结

Stardust_Z77

已于 2022-11-20 15:21:25 修改

阅读量263

点赞数 1

文章标签： html css

于 2022-11-19 18:51:44 首次发布

本文链接：https://blog.csdn.net/stardust_z77/article/details/127919925

版权

近期学习总结

HTML部分

css部分

近期学习总结

通过对html和css的我才发现，平时浏览的网页是如何设计，如何实现的。html使用许多标签来定义网页的内容，而css就是来设计网页的样式，在近期的学习中我尝试着写了一些网页的样式，比如百度的首页，通过自己的手来实现其样式，我也感到颇有收获。在近期的练习中我通过css代码，能实现很多不同的样式，在调试网页样式时我还发现盒子模型对网页样式设计起到的重要作用。

HTML部分

页面和标签：

<!-- 声明这是一个h5网页 -->

<!DOCTYPE html>

<!-- html是根元素 -->

<html>

    <!--

        head 头部标签 放页面的重要信息

                引用外部文件

                定义媒体，编码等等

    -->

    <head>

        <!-- 设置网页编码格式为utf-8，避免中文乱码 -->

        <meta charset="utf-8">

        <!-- 网页的标题 -->

        <title></title>

    </head>

    <!-- body 页面中所有可见的内容都放在body中 -->

    <body>

        <!-- 标签

                - 开始标签<英文字母>，标志着元素的开始

                - 结束标签</英文字母>，标志着元素的结束

                - 元素 <英文字母> 内容</英文字母>

                - 元素内容 标签之间的内容，会显示在页面上

               

            标签的分类

                - 双标签 <body></body>

                - 单标签 <br />或者<br>

        -->

    </body>

</html>

h标签和p标签

        <!-- h标签

                -作用：标题，加粗，独占一行

                -等级：h1~h6

               

            p标签

                -作用：段落，独占一行，两端之间有空隙

               

            注释

                快捷键：crtl+/

           

            br标签

                -作用：换行，两行之间没有空隙

        -->

        <h1>冬夜读书示子聿（yu`）</h1>

        <h3>宋-陆游</h3>

                <p>古人学问无遗力，少壮工夫老始成。</p>

                <p>纸上得来终觉浅，绝知此事要躬行。</p>

                <br />

                古人学问无遗力，少壮工夫老始成。<br />

                纸上得来终觉浅，绝知此事要躬行。

文本格式化标签

   <body>

        <!-- b(bold)和strong标签

                -作用：加粗

                -区别：b标签只是单纯地加粗文本，strong标签有强调的语义，浏览器渲染时会更偏重strong标签

                -b标签更常用

        -->

        <b>这是粗体</b>

        <strong>这也是粗体</strong>

       

        <!-- i标签和em标签(emphasized)

                -作用：斜体

                -区别：em标签有强调的语义

        -->

        <i>这是斜体</i>

        <em>这也是斜体</em>

       

        <!-- del标签和s标签(strikthrough)

                -作用：删除线

                -区别：del标签有强调的语义，表示被删除

                -del标签更常用

        -->

        <del>这是删除线</del>

        <s>这也是删除线</s>

       

        <!-- u标签(underline)和ins标签(insert text)

                -作用：下划线

                -区别：ins标签有强调这是插入的文本的语义

                -u标签更常用

        -->

        <u>这是下划线</u>

        <ins>这也是下划线</ins>

       

        <!-- sup标签

                -作用：上标签，让元素显示在右上角

            sub标签

                -作用：下标签，让元素显示在右下角

         -->

        <p>X<sup>2</sup></p>

        <p>H<sub>2</sub>O</p>

    </body>

转义字符

    <body>

        <!--

            html里，标签中只能识别到一个空格，

            转义字符：

                -语法：&字符名字

                -常用的转义字符：

                    空格：&nbsp;

                    <：&lsaquo;

                    >：&rsaquo;

                    TM：&trade;

                    版权符号©:&copy;

        -->

        <p>&nbsp;&nbsp;&nbsp;这是一段内容&copy;</p>

    </body>

块元素和行内元素

    <body>

        <!-- 块元素

                - 特点：独占一行

                        可以包含其他块元素或行内元素

                - 常见块元素：h标签，p标签

                - 注意：p元素里不放块元素

               

            行内元素

                - 特点：不独占一行，一行里可以有多个行内元素

                - 常见行内元素：

                    b,u,i,del等等文本格式化标签

        -->

        <p>这是p元素

        </p>

    </body>

span元素

    <body>

        <!-- span元素

                - 作用：本身没有语义，常用来帮助处理文本

        -->

        <span style="color: red;">这是span元素</span>

    </body>

图片和路径

 <body>

        <!--

            标签的属性

                - 格式：属性名="属性值"

                - 位置：开始标签里

                - 作用：设置标签的附加信息

            img元素

                - 作用：显示图片

                - 属性：

                    src 必要属性  定位图片的路径

                    alt 图片的描述信息，在图片无法正常显示时提示

                    title 图片的标题，鼠标悬停在图片上时显示

                    width 定义图片的宽度

                    height 定义图片的高度

                   

            路径

                - 相当于电子路线，定位到计算机上的资源文件

                - 相对路径

                    - 相对当前文件的位置，寻找其他目标资源的路线

                    - ./或者文件名 在当前文件的相同目录下

                        ./xxx 进入下一级文件

                - 绝对路径

                    - 文件在计算机上的完整地址，通常以盘符开头

                    - 注意：通过hbuilder等工具运行的html页面是通过它的内置服务器显示的，

                     浏览器为了安全，不允许服务器上的html页面访问本地文件

         -->

         <!-- 图片在当前文件的同一级目录下 -->

        <img src="img.JPG" alt="图片" title="img" width="200px" height="500px">

        <!-- 图片在当前文件的下一级目录下 -->

        <img src="./img/img.JPG" alt="图片" title="img" width="200px" height="500px">

        <!-- 图片在当前文件的上一级目录下 -->

        <img src="../img/img.JPG" alt="图片" title="img" width="200px" height="500px">

        <!-- 绝对路径 -->

        <img src="D:\project\HTML\img\img.JPG" alt="图片" title="img" width="200px" height="500px">

    </body>

列表

<body>

        <!-- 列表

                - 无序列表 ul 里面只能放li标签

                    - li标签表示列表项

                    - 无序列表前是项目符号

                        可以通过ul的type属性修改项目符号

                        - disc 实心圆点 默认

                        - circle 空心圆

                        - square 正方形

                - 有序列表 ol 里面只能放li标签

                    - li标签表示列表项,li标签里可以放其他任何标签，常用的是a标签

                    - 可以通过ol的type属性修改序号

                        - 阿拉伯数字 1 默认

                        - 英文字母 A/a

                        - 罗马数字 I/i

                - 自定义列表 dl

                    - dt 表示术语、标题

                    - dd 表示对术语的解释

                    - dt 和 dd标签里都可以嵌套其他标签

         -->

        <ul type="square">

            <li>富强 民主 文明 和谐</li>

            <li>自由 平等 公正 法治</li>

            <li>爱国 敬业 诚信 友善</li>

        </ul>

       

        下面哪一个是图片在当前文件的下一级目录中

        <ol type="I">

            <li>./img.png</li>

            <li>../start/img.png</li>

            <li>./start/img.png</li><!-- 正确答案 -->

        </ol>

       

        <dl>

            <dt>李白</dt>

            <dd>唐朝诗人，人称诗仙</dd>

            <dt><h1>杜甫</h1></dt>

            <dd><p>唐朝诗人，人称诗圣</p></dd>

        </dl>

    </body>

超链接a标签

<body>

        <!-- a标签

                - href 定义超链接跳转的路径

                - target 定义跳转的方式

                    _blank 空白页显示跳转之后的内容

                    _self 在本窗口显示跳转之后的内容 默认

                    _parent 在父页面窗口显示跳转之后的内容

                    _top 在整个框架的祖先元素的窗口显示跳转之后的内容

            锚点

                - 定位的点

                - 设置id属性，a标签里的href属性= "#对应锚点的id属性值"

         -->

        <a href="https://www.baidu.com/" target="">跳转到百度</a><br>

        <p id="top">目录</p>  

        <a href="#bottom">直达底部</a><br>

        <a href="#p1">段落1</a>

        <a href="#p2">段落2</a>

        <a href="#p3">段落3</a>

        <a href="#p4">段落4</a>

        <p style="height: 600px;" id="p1">这是段落1<br><a href="#top">返回目录</a></p>

        <p style="height: 600px;" id="p2">这是段落2<br><a href="#top">返回目录</a></p>

        <p style="height: 600px;" id="p3">这是段落3<br><a href="#top">返回目录</a></p>

        <p style="height: 600px;" id="p4">这是段落4<br><a href="#top">返回目录</a></p>

       

        <!-- 锚点 -->

        <p id="bottom">底部段落</p><a href="#top">返回目录</a>

    </body>

表格

<body>

        <!-- 表格

                - 必要的标签

                    - table标签

                    - tr标签(table row) 表示一行

                    - td (table data) 表示一个单元格，没有加粗效果

                    - th (table headder cell) 表示表头的单元格，有加粗的效果

                - 表格常用属性

                    - border 表格的边框，值是数字，数字越大边框越粗

                    - cellspacing 单元格之间的空隙，值是像素px

                    - width 表格的宽度

                    - cellpadding 单元格的内边距，值是像素px

                    - align 控制表格的位置，值：center,left,right

                   

        -->

        <table border="1" cellspacing="0" width="1000px" cellpadding="10px" align="center">

            <tr>

                <th>序号</th>

                <th>姓名</th>

                <th>毕业时间</th>

                <th>最高学历</th>

                <th>毕业院校</th>

                <th>专业</th>

                <th>CSDN网址</th>

                <th>现住址</th>

            </tr>

            <tr>

                <td>1</td>

                <td>小明</td>

                <td>2023.6</td>

                <td>本科</td>

                <td>重科</td>

                <td>软工</td>

                <td>http:www.hhh.com</td>

                <td>歇台子</td>

            </tr>

            <tr>

                <td>2</td>

                <td>小明</td>

                <td>2023.6</td>

                <td>本科</td>

                <td>重科</td>

                <td>软工</td>

                <td>http:www.hhh.com</td>

                <td>歇台子</td>

            </tr>

        </table>

    </body>

表格的结构

<body>

        <!-- 表格的结构

                - thead 》 tbody 》 tfoot

                - 显示的顺序是固定的，不会因为在HTML中的顺序改变

        -->

        <table border="1" cellspacing="0" width="200">

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>性别</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>小明</td>

                    <td>男</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <td colspan="2">总人数</td>

                </tr>

            </tfoot>

        </table>

    </body>

合并单元格

<body>

        <!-- 合并单元格

                - rowspan 合并行      rowspan="2" 合并两行，保留的是目标单元格的数据

                - colspan 合并列      colspan="2" 合并两列，保留的是目标单元格的数据

                - 目标单元格 是你要保留数据的单元格，这两个属性写在目标单元格标签里

         -->

        <table border="1" cellpadding="5px">

            <tr>

                <td rowspan="2">1</td>

                <td colspan="2">2</td>

                <!-- <td>2</td> -->

            </tr>

            <tr>

                <!-- <td>1</td> -->

                <td>2</td>

                <td>3</td>

            </tr>

        </table>

    </body>

表单域

    <body>

        <!-- 表单域 form

                - name 表单域的名字，一个HTML里可以有多个表单域

                - action 设置处理表单的服务器程序的url地址

                - method 设置提交表单的方式

                    - get   把提交的参数附在action的url地址中，会显示在地址栏，一般用于不需要保密的信息，比如分页

                    - post  把提交的参数包含在表单体中，不会显示在地址栏

         -->

        <form name="form1" action="url" method="get"></form>

        <form name="form2" action="url" method="post"></form>

    </body>

表单元素

<body>

        <!-- 表单元素input

                - 表单元素需要放在表单域中

                - 行内元素

                - type属性

                    - text 输入框

                    - password 密码框

                    - radio 单元按钮

                    - checkbox 复选框

                    - date 日期 yyyy/mm/dd

                    - datetime-local 日期 时间

                    - color 颜色选择框

                    - file 文件选择框

                    - button 按钮

                    - submit 提交按钮

                    - reset 重置按钮

         -->

        <form action="https://www.baidu.com" method="get">

            <input type="text">

            <input type="password">

            <input type="radio">男

            <input type="radio">女

            <input type="checkbox">记住密码

            <input type="date">

            <input type="month">

            <input type="datetime-local">

            <input type="color">

            <input type="file">

            <input type="button" value="登录">

            <input type="submit">

            <input type="reset">

        </form>

    </body>

input的其他属性

<body>

        <!-- 其他属性

                - name 定义元素的名字，它的值来自输入的值或者value中设置的值

                        一组单选按钮的name属性值应该设置为同一个值，获取到的是被选中的那一个值

                        一组复选框的name属性值应该设置为同一个值，被选中的复选框的value值构成一个数组

                - value 设置元素的值

                - placeholder 设置输入框中的提示文字

                - required 设置必填项，如果不填将会弹出提示信息

                - checked 在打开页面时，让元素是选中状态

                - readonly 设置元素只读

                - disabled 设置元素不可用  

               

         -->

         <form action="" method="get">

             用户：<input type="text" name="user" placeholder="请输入用户名" readonly><br>

             密码：<input type="password" name="password" placeholder="请输入密码" required><br>

             性别：<input type="radio" name="sex" value="man" checked>男

            <input type="radio" name="sex" value="woman">女<br>

             爱好：<input type="checkbox" name="hobby" value="1">旅游

             <input type="checkbox" name="hobby" value="2">摄影

             <input type="checkbox" name="hobby" value="3">运动<br>

             <button disabled>验证</button>

             <input type="submit">

         </form>

    </body>

label标签

 <body>

        <!-- label

                - 为元素设置设置标注

                - label的for属性可以绑定一个元素，当点击label时，被绑定的元素会获取到焦点

                    for="被绑定元素的id值"，注意没有#号

         -->

        <form action="" method="get">

            <label for="user">用户：</label>

            <input type="text" name="user" placeholder="请输入用户名" id="user">

        </form>

    </body>

select标签

   <body>

        <!-- select标签

                - 定义一个下拉列表

                - 选项用<option>标签包裹

                - name属性写在select标签中，选项的值写在option标签中

         -->

        <label>您的职业：</label>

        <select name="job" id="">

            <option value="">请选择</option>

            <option value="teacher">教师</option>

            <option value="layer">律师</option>

            <option value="wizared">法师</option>

        </select>

    </body>

textarea标签

<body>

        <!-- textarea标签

                - 多行文本框

         -->

        <form>

            <label>留言:</label><br>

            <textarea name="" id="" cols="30" rows="10"></textarea>

        </form>

    </body>

内联框架

    <body>

        <!-- 内联框架 iframe

                - 在页面中嵌入另一个页面

                - 属性

                    - src 设置嵌入页面的url地址 即打开后的默认页面的url地址

                    - width 设置内联页面的宽度，height 设置内联页面的高度

                    - farmeborder="0" 设置iframe的边框，值就为0/1

                   

            实现点击链接切换页面

                - 为iframe页面设置name属性

                - a链接的target="iframe的name属性值"

                    a标签中如果不添加target属性值，他会自动跳转至其他页面，不会在iframe内部进行跳转

                    a标签中的target和iframe中的name属性相同时，就会在iframe内部进行展示对应的界面

                - a链接的href中写将要跳转的页面url地址

         -->

        <a href="https://www.bilibili.com/" target="content"><img src="./img/bilibili.png" alt="B站"></a>

        <a href="./18 select标签.html" target="content">选择页面</a>

        <a href="./11表格.html" target="content">选择表格页面</a><br>

        <iframe name="content" src="./18 select标签.html" farmborder="0" width="1000" height="500"></iframe>

       

    </body>

div标签

    <body>

        <!-- div标签

                - 块元素，相当于一个透明的盒子，常用于页面布局

         -->

        <div style="width: 300;height: =300;background-color: rebeccapurple;">

            这是一个div

            <p>这是div中的段落</p>

        </div>

        <div>

            这是一个div

            <p>这是div中的段落</p>

        </div>

    </body>

音频

  <body>

        <!-- 音频 audio

                - src 设置音频的url地址，可以用本地路径，也可以用在线路径

                - controls 设置显示音频控件，属性值设为controls，显示控件

                - muted 设置音频为禁音，属性值设为muted

                - autoplay 自动播放

                - loop 循环播放

                - source 也可以指定文件

                - embed 是个老标签，兼容一些老的浏览器

         -->

        <audio src="./audio/listen.mp3" autoplay controls="controls" muted="muted">

            您当前的浏览器不支持该音频

        </audio>

        <p>Lesson 1 Excuse me!<br>

            对不起！<br>

            Listen to the tape then answer this question. Whose handbag is it?<br>

            听录音，然后回答问题，这是谁的手袋？<br>

            Excuse me!<br>

            Yes?<br>

            Is this your handbag?<br>

            Pardon?<br>

            Is this your handbag?<br>

            Yes, it is.<br>

            Thank you very much.</p>

           

            <audio src="https://webfs.ali.kugou.com/202211091114/294ee749fa4562e32b562e5c39963318/KGTX/CLTX001/069c70fe35c4

            ee9a40866979eae8062d.mp3" autoplay loop controls></audio>

    </body>

视频

  <body>

        <!-- 视频 video

                - src 设置视频资源的url地址

                - controls 设置显示视频控件

                - width 设置视频宽度，height 设置视频高度

         -->

        <video src="./video/movie.ogv" controls width="400px" height="400px">

            您当前浏览器不支持该视频

        </video>

        <video src="https://v.api.aa1.cn/api/api-fj/index.php?aa1=suf7y58th48u935" controls autoplay loop></video>

    </body>

css部分

常用单位

<style>

        p{

            font-size: 5rem;

        }



        .box1{

            width: 100px;

            height: 100px;

            background-color: blue;

        }



        .box2{

            width: 80%;

            height: 60%;

            background-color: brown;

        }

    </style>

<body>

    <!-- 1.长度单位

            px---像素单位，比较常用了，绝对单位

                    像素越小，屏幕显示就越清晰

               

            rpx---在移动端常用，在iPhone6机型下为标准，1rpx=0.5px   1px=2rpx

                                                    375px = 750rpx

                                               

            em---相对单位，相对于父元素，根据父！ font-size的大小为基准



            rem---相对单位，相对于根元素，根据根！ font-size的大小为基准

            ------1rem=20px



            vh\vm----相对单位，相对于窗口----存在兼容性问题，对于移动端使用----不常用

            ---------1vm=窗口1%

                    1vh=窗口1%



        2.百分比单位----多种情况可以使用------根据父元素调整



        3.颜色单位------颜色的英文（也不太常用，单词量问题）

                                                                ------0~255 0~255 0~255 0~1

        ---------------rgb/rgba-----r:红，g：绿，b：蓝，a：透明度------rgb（255 255 255 1）

                                                                    -------------------0：全透

                                                                    -------------------1：不透




        ---------------十六进制-----#FFFFFF（每两位代表 红00~FF   绿00~FF   蓝00~FF）

                        hsl/hsla----h:色相0~360     s：饱和度0~100%     l：亮度0~100%       a：透明度

        4.取色器/qq截图/百度

               

    -->



     <p>这是p标签</p>



     <div class="box">

        <div class="box2">

            内部div

        </div>

     </div>

</body>

常用的样式

<style>

        div{

            /* 块级元素 */

            /* 设置宽高 */

            width: 100px;

            height: 100px;



            /* 背景颜色 */

            background-color: green;

            /* 字体颜色 */

            /* color: ; */



            /* 字体样式 */

            /* 值可以为：微软雅黑、宋体、楷体 */

            font-family: "楷体";

            /* font-size: ;        大小 */

            /* font-weight: ;          粗细 */



            /* 字体呈现样式

                normal  正常情况(默认)

                italic  斜体

            */

            /* font-style: italic; */



            /* 英文字母/文字的字间距 */

            /* letter-spacing: 10px; */



            /* 行高 */

            /* line-height: 100px; */

            /* 文字水平位置 */

            /* text-align: center; */



            /* 文字装饰 */

            /* line-through 删除线

                overline 上划线

                underline 下划线

            */

            text-decoration: underline;



            /* 列表 */

            /* 去除列表原有的样式 */

            /* list-style: none; */

           

            /* 设置整体的透明度 */

            /* opacity: 0.5; */



            /* 盒子的阴影部分 */

            /* box-shadow: 10px 0 50px red; */



            /* 盒子的边框部分 */

            /* border: 2px solid red; */

            /* 边框宽度 */

            border-width: 1opx;

            /* 边框样式

                dashed 虚线

                dotted 点

                double 双框

                inset 嵌入

            */

            border-style: inset;

            /* 边框颜色 */

            border-color: royalblue red orange green;

            /* 边框弧度 */

            /* border-radius: 10px 20px 30px 40px;

                顺时针取值

            */

           

            /* 外边距 */

            margin: 20px;

            /* 内边距 */

            padding: 20px;

        }

    </style>



<body>

    <div>

        这是用来展示的盒子1234apple

    </div>

</body>