web开发

卿云阁

已于 2022-05-01 08:43:37 修改

阅读量163

点赞数 1

分类专栏：前端文章标签： html5

于 2022-04-18 10:34:01 首次发布

本文链接：https://blog.csdn.net/zzqingyun/article/details/124025791

版权

前端专栏收录该内容

1 篇文章 1 订阅

订阅专栏

🌞欢迎来到python的世界
🌈博客主页：卿云阁

💌欢迎关注🎉点赞👍收藏⭐️留言📝

🌟本文由卿云阁原创！

🌠本阶段属于练气阶段，希望各位仙友顺利完成突破

📆首发时间：🌹2021年4月7日🌹

✉️希望可以和大家一起完成进阶之路！

🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢！

🍈 一、初识

我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。

写网页的代码是专门的语言，主要分为Hmtl \ CSS \ JavaScript, 被称为网页开发三剑客，分别作用如下：

Html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

主要负责编写页面架构，有点像建房子时，造的毛坯房。

CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

让你的网页样式变的丰富多彩起来，可以改变字体、颜色、排列方式、背景颜色等

相当于给你的毛坯房做装修

JavaScript（与jave没有一点关系）

周杰伦= 周杰

网页脚本语言，可以让你的网页动起来，比如一张图片鼠标放上去自动变大、一个按钮自动变色、提交表单时少填或填错了字段会提示报错等，都是JavaScript实现的。

HTML简介

HTML不是一门编程语言，只是一种文本标记语言

<!DOCTYPE html>

是关于h5的声明

HTML 标题

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 段落

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

HTML 链接

<a href="https://www.runoob.com">这是一个链接</a>

HTML 图像

<img src="/images/logo.png" width="258" height="39" />

HTML 表格和列表

HTML <div> 和<span>

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

<html>
<head>
<meta charset="UTF-8">
<title>机器人 - OwnThink</title>
</head>
<body>
    <div style="border: 1px dashed red">
        <p>机器人测试，点击右边的对话图标，打开机器人。。</p>
         <p><span style="color:red">e智团队</span>所创</p>
    </div>

<img src="https://s1.ax1x.com/2022/04/07/LSyIYR.jpg" width="600px">
<script type="text/javascript" src="https://www.ownthink.com/bot/js/robot.js?appid=f27eaae80e78d80d78cfc1df6aab8028"></script>
</body>
</html>

HTML <div> 布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <style type="text/css">
        #menu {  /* 前边加#号就是用id来选择这个标签*/
            background-color: yellow;
            height: 80px;
        }
        #side_bar{
            height: 500px;
            width: 10%;
            background-color: orange;
            float: left;
        }
        #content_box{
            height: 800px;
            width: 90%;
            background-color: greenyellow;
            float: left;
        }
        #footer{
            background-color: black;
            height: 100px;
            clear: both; /* 不再按浮动排列*/
        }
    </style>
</head>
<body>
    <div id="menu" >
        <p>首页</p>
        <p>电视</p>
    </div>

    <div id="side_bar">
        <ul>
            <li>手机</li>
            <li>电视</li>
            <li>小家电</li>
            <li>IOT</li>
        </ul>
    </div>
    <div id="content_box">
        <h2>大广告</h2>
    </div>

    <div id="footer">
        <h3>footer...</h3>
    </div>

</body>
</html>

HTML 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式 </title>

    <style type="text/css">
        #css_test {
            background: deepskyblue;
            font-family: "Arial Black";
            color: red;
        }

        .class_test {
            background: yellow;
            /*border: none;*/
        }

        input {
            border: 2px dashed blue;
        }
        p {
            color: red;
            font-style: italic;
        }

        fieldset input{
            border: 2px dashed red ;
        }

    </style>

</head>
<body>
    <p>个人信息表</p>
    <form action="baidu_url">

        姓名: <input id="css_test" type="text" name="name"> <br>
        电话: <input  class="class_test" type="number" name="phone"> <br>
        姓别: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex"  value="女">女  <br>
        爱好: <input  type="checkbox" name="hobbie" value="C">C
             <input type="checkbox" name="hobbie" value="C++">C++
            <input type="checkbox" name="hobbie" value="Python">Python  <br>

        输入密码：<input class="class_test"  type="password" name="password"> <br>

        <p>喜欢的姑娘类型</p>
        <select name="gilr_type">
            <option value="1">胸大貌美大长腿</option>
            <option value="2">气质小可爱</option>
            <option value="3">妖娆性感</option>
            <optgroup label="按区域">
                <option value="4">欧美</option>
                <option value="5">日韩</option>
                <option value="6">淮北</option>
            </optgroup>
        </select> <br>

        个人简介: <br>
        <textarea name="intro" placeholder="输入不省于50字的个人介绍" rows="3" cols="50" ></textarea> <br>



        <button>注册</button>
    </form>

    <form>
         <fieldset>
          <legend>Personalia:</legend>
          Name: <input type="text"><br>
          Email: <input type="text"><br>
          Date of birth: <input type="text">
         </fieldset>

    </form>

</body>
</html>

1.提交到哪里？

    <form action="baidu_url">

2.后台怎么取数据的？

CSS样式初识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first web page</title>

    <style type="text/css">
        div {
            border: 1px dashed red;
            width: 500px;
            margin-bottom: 50px;
            position: relative;
            left: 600px;
       }
        p {
           background-color: yellow;
           font-size: 18px;
           font-family: "PingFang HK";
        }
    </style>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div >
        <h2>Python</h2>
        <h3>hahah</h3>
        <p>卿云阁 <span style="color: red">卿云</span></p>

        <a href="https://blog.csdn.net/zzqingyun?spm=1011.2266.3001.5343" target="_blank">卿云阁</a>
        <br>
    </div>
    <p>卿云阁</p>

</body>
</html>

外部引用

    <link rel="stylesheet" type="text/css" href="test.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first web page</title>

    <style type="text/css">
    </style>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div >
        <h2>Python</h2>
        <h3>hahah</h3>
        <p>卿云阁 <span style="color: red">卿云</span></p>

        <a href="https://blog.csdn.net/zzqingyun?spm=1011.2266.3001.5343" target="_blank">卿云阁</a>
        <br>
    </div>
    <p>卿云阁</p>

</body>
</html>

CSS Id 和 Class选择器

选择器就是通过不同的方法去找标签

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #layer1 {
            height: 500px;
            width: 500px;
            padding: 30px; /*内边距*/
            border: 1px dashed blue;
        }
        #layer2 {
            height: 300px;
            padding: 30px;
            border: 1px dashed red;
        }
        #layer3 {
            height: 200px;
            padding: 30px;
            border: 1px dashed black;
        }
        h2,p,h3{
            background-color: yellow;
        }

    </style>
</head>
<body>

<div id="layer1">
    <h1>first layer.</h1>
    <p>第1层</p>
    <div id="layer2">
        <h2>at top</h2>
        <p>layer 2</p>
        <h2>layer 2 h2</h2>
        <div id="layer3">
            <p>第3层</p>
            <h3>layer 3 h3</h3>
        </div>
        <h2> at bottom h2</h2>
    </div>

</div>
<p>我不在任何的div里</p>

</body>
</html>

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box_1{
            border: 10px solid blue;
            width: 500px;
            height: 500px;
            padding-left: 50px;
            /*padding: 50px;*/
            /*margin: 50px;*/
            /*margin-bottom: 50px;*/

            position: fixed; /*先确定，你要定位的模式*/
            top: 100px;
            left: 50px;

        }
        #box_2{
            border: 5px solid red;
            width: 500px;
            height: 500px;
            margin-top: 50px;
            margin-left: 100px;
            background-size: 500px;
            box-shadow: 20px 15px 10px #888888;
            border-radius: 5px;

        }
        #box_3{
            border: 5px solid greenyellow;
            width: 500px;
            height: 1500px;
            margin-top: 50px;
            margin-left: 100px;
            background-size: 500px;
            box-shadow: 20px 15px 10px #888888;
            border-radius: 5px;

        }


        #box_1 p{
            color: red;
            position: relative;
            left: 100px;
            top:100px;

        }
    </style>
</head>
<body>

<div id="box_1">
    <p>hello</p>
</div>
<div id="box_2">
    <p>hello</p>
</div>
<div id="box_3">
    <p>hello 3</p>
</div>


</body>
</html>

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <style>
        div {
            background-color: orange;
            width: 300px;
            border: 5px dashed yellow;
            padding: 25px;
            margin:  25px;
        }
    </style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。</div>


</body>
</html>

卿云阁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web开发

🌞欢迎来到python的世界🌈博客主页：卿云阁💌欢迎关注🎉点赞👍收藏⭐️留言📝🌟本文由卿云阁原创！🌠本阶段属于练气阶段，希望各位仙友顺利完成突破📆首发时间：🌹2021年4月7日🌹✉️希望可以和大家一起完成进阶之路！🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢！🍈 一、初识我们看到的网页通过代码来实现的，这些代码由浏览器解释并渲染成你看到的丰富多彩的页面效果。这个浏览器就相当于Python的解释器，专门负责解释和执行(渲染）网页代码。..
复制链接

扫一扫