HTML及CSS

最新推荐文章于 2024-06-16 15:31:20 发布

原创最新推荐文章于 2024-06-16 15:31:20 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

3 篇文章

订阅专栏

HTML

基本结构

#使用的是html的哪个版本， 此处是html5
<!DOCTYPE html>
#主体 例如人基本结构
<html lang="en">
#大脑
<head>
    #字符编码
    <meta charset="UTF-8">
    <title>Title</title>
</head>
#身体
<body>

</body>
</html>

文本标签

标题标签: h1-h6
段落标签: p
加粗标签: b, strong
斜体标签: i
下划线标签: u
删除标签: s
换行标签: br-----(没有成对出现的标签)
水平分隔符标签: hr-----(没有成对出现的标签)
预格式化文本标签(保留文本的原有格式): pre标签
上标和下标: sup， sub
块引用标签: blockquote
普通的文本: span — 行内标签，元素是内联元素
普通文本的标签:div------文档中的分区或节，元素是块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color: #f10180">标题1</h1>
<p>2014年 Martin Fowler 在<b>《MicroServices》</b>论文中首次提出了微服务的概念。</p>
<p>近些年，伴随着互联网的日益发展，微服务在国内、甚至国际上的发展已达到一个新高潮。</p>
<h2 style="color: #ffaaaa">标题2</h2>
在微服务流行之前，<strong>SOA（Service Oriented Architecture）</strong>被广泛熟知与采用。<br>
微服务基于 SOA 发展而来，但与之相比，<s>错误的</s><u> 微服务更易于理解，也更利于设计者、开发者的实践落地，它把“面向服务”的设计思想实现得更加彻底。</u>
<hr>
<h3 style="color: #ffff77">标题3</h3>
<pre>
2014年 Martin Fowler 在《MicroServices》论文中首次提出了微服务的概念。
近些年，伴随着互联网的日益发展，微服务在国内、甚至国际上的发展已达到一个新高潮。

在微服务流行之前，SOA（Service Oriented Architecture）被广泛熟知与采用。
微服务基于 SOA 发展而来，但与之相比，微服务更易于理解，也更利于设计者、开发者的实践落地，它把“面向服务”的设计思想实现得更加彻底。
</pre>
<h4>标题4</h4>
x<sup>2</sup>+x<sub>1</sub>
<br>
<span>你好</span>世界
<div>你好</div>世界
</body>
</html>

在这里插入图片描述

超链接、图片

超链接标签 :a

<!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>
<!--新建一个浏览器窗口并打开-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>
<!--2. 跳转到当前页面的指定位置（锚点）-->
<a href="#C1">第一个标题 </a>
<a href="#C2">第2个标题 </a>
<h1><a name="C1">第一个标题</a></h1>
<h1><a name="C2">第2个标题</a></h1>

图片标签：img

<!--1. 插入图像并设置大小
    src指定图片的位置， 可以是url地址， 也可以是本地的图片;
    alt: 如果图片不能正常加载， 则显示alt里面的文字;
-->
<!--2. 设置图像的对齐方式(html中已弃用， 通过css样式实现功能)-->
AI会议即将开始: <img  align="top" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI会议即将开始: <img align="middle" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI会议即将开始: <img align="bottom" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<!--3. 将图像浮动到文本的左侧和右侧-->
AI会议即将开始: <img align="left" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
AI会议即将开始: <img align="right" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<!--4. 图像链接 a标签和img标签-->
<a href="http://www.youkuaiyun.com"> <img src="img01.jpg"></a>

实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#C1">第一标题</a>
<a href="#C2">第二标题</a>
<h1><a name="C1">第一标题</a> </h1>
美图:<a href="http://www.baidu.com"><img align="middle" src="http://img1.3lian.com/2016/w2/11/89.jpg" alt="图1" ></a>
<h2><a name="C2">第二标题</a></h2>
<h1></h1>
</body>
</html>

在这里插入图片描述

序列化标签

无序标签：ul 和 li

<!--1. 无序标签之ul和li-->
<h2>无序标签</h2>
<!--去掉ul里面的所有li标签里面的样式-->
<!--案例1： 实现水平导航栏
list-style-type: none  ---- 去掉圆点
display: inline-block   ---- 变为行内元素， 并且可以设置高度和宽度
width:              -----可以使用300px表示， 也可以用百分比来表示； 20%
-->
<ul style="list-style-type: none">
    <li style="display: inline-block; width: 20%; background: azure;">
        <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
    </li>
    <li style="display: inline-block; width: 20%; background: azure;">CSS</li>
    <li style="display: inline-block; width:20%; background: azure;">JS</li>
    <li style="display: inline-block; width: 20%; background: azure;">python</li>
</ul>
<!--案例2： 实现竖直导航栏-->
<ul style="list-style-type: none">
    <li style="display: block; width: 20%; background: azure;"></li>
    <li style="display: block; width: 20%; background: azure;">CSS</li>
    <li style="display: block; width:20%; background: azure;">JS</li>
    <li style="display: block; width: 20%; background: azure;">python</li>
</ul>

在这里插入图片描述
有序标签: ol 和 li

!--2. 有序标签之ol和li-->

<!--type可以指定有序列表符号的类型
text-decoration: none;  ---去掉原有标签的文本装饰
 color: black： 设置字体颜色为黑色
-->
<ol type="A">
    <li>
        <a href="http://www.baidu.com" style="text-decoration: none; color: black">
            html </a>
    </li>
    <li><a href="#"> CSS </a></li>
    <li><a href="#"> JS </a></li>
    <li><a href="#"> Python </a></li>
</ol>

在这里插入图片描述
嵌套标签：dl ， dt 和 dd

<!--&lt;!&ndash;3. 嵌套标签之dl, dt和dd&ndash;&gt;-->

<dl>
    <dt>HTML</dt>
    <dd>li</dd>
    <dd>span</dd>
    <dd>div</dd>
    <dd>hr</dd>
    <dd>sub</dd>
    <dt>CSS</dt>
    <dd>text-decoration</dd>
    <dd>color</dd>

</dl>

在这里插入图片描述

表格及相关操作

表格标签：
table代表一个表格
caption 表格的标题
td: 列
tr: 行
cellpadding=“3” -----设置表格的内边距
cellspacing=“5” ----设置表格的外边距

<table style=" text-align: center;  width: 80%;" border="1px" cellpadding="5px" cellspacing="0px" >
    <caption>表格的标题</caption>
    <tr>
        <!--第一行是表格的表头， 让自动加粗-->
        <th>主机名</th>
        <th>IP地址</th>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.78</td>
    </tr>

    <tr>
        <td>server1</td>
        <td>172.25.254.78</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.78</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.78</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.78</td>
    </tr>
</table>

<br>
<table style="width: 80%; text-align: center;" cellpadding="3" border="1px"

       cellspacing="5">
    <caption>课程表</caption>
    <tr>
        <!--tr:一行内容-->
        <!--td: 一列内容-->
        <th>周一</th>
        <th>周2</th>
        <th>周3</th>
        <th>周4</th>
        <th>周5</th>
    </tr>
    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>

    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>
    <tr>
        <td>周一</td>
        <td>周2</td>
        <td>周3</td>
        <td>周4</td>
        <td>周5</td>
    </tr>
</table>

在这里插入图片描述

合并单元格

合并列单元格： colspan

<table style="text-align: center;width: 80%;" cellpadding="3" border="1px" cellspacing="0px">
    <tr>
        <td>主机名</td>
        <!--<td>IP</td>-->
        <!--<td>IP</td>-->
        <!--<td>IP</td>-->
        <td colspan="3">IP</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>server1</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

</table>

在这里插入图片描述

合并行单元格: rowspan

<table style="text-align: center;width: 80%;" cellpadding="3" border="1px" cellspacing="1">
    <tr>
        <td>主机名</td>
        <td>server1</td>
        <td>server2</td>
        <td>server3</td>
    </tr>


    <tr>
        <td rowspan="3">IP</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

    <tr>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>
    <tr>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
        <td>172.25.254.2</td>
    </tr>

</table>

在这里插入图片描述
表格嵌套标签：

<table style="text-align:center; width:80%;" cellpadding="3" border="1px" >
    <tr>
        <td>
            <img style="width:20%;" src="http://img1.3lian.com/2016/w2/11/89.jpg">
        </td>
        <td>
            <ul>
                <li>html</li>
                <li>html</li>
                <li>html</li>
            </ul>
        </td>
    </tr>
        <tr>
        <td>
            <pre>
                fkjrefre
                trgtrhryt
            </pre>
        </td>
        <td>
            <strong>hdhefreg</strong>
        </td>
    </tr>
</table>
</body>

在这里插入图片描述

表单标签：

form：

<!--&lt;!&ndash;   1. form表单标签   &ndash;&gt;-->
<h1>个人信息</h1>
<form  method="get">
    <!--文本域-->
    <span>用户名: </span><input type="text"><br/>
    <!--密码域-->
    <span>密码:</span><input type="password">
    <br/>
    <!--文本域-->
    <span>个人简介:</span><textarea>
    </textarea><br/>
    <!--提交文件-->
    <span>个人简历：</span><input type="file"><br/>

    <!--日期-->
    <span>出生日期:</span><input type="date">

    <!--提交按钮-->
    <input type="submit" value="登陆">
    <input type="reset" value="重置">
</form>

在这里插入图片描述

<h2>详细信息</h2>
<!--单选按钮-->
<span>性别:</span>
<!--name和value是为了将用户选择的信息传递给服务器， gender=1-->
<span style="font-size: small">男</span><input type="radio" name="gender" value="1">
<span style="font-size: small">女</span><input type="radio" name="gender" value="2">
<br/>

<!--多选按钮-->
<span>你喜欢的书籍:</span>
<ul>
    <li><input type="checkbox" name="java"><span>java</span></li>
    <li><input type="checkbox" name="python1"><span>python1</span></li>
    <li><input type="checkbox"><span>python2</span></li>
    <li><input type="checkbox"><span>python3</span></li>

</ul>
<!--下拉列表-->
<select>
    <option>--选择省份--</option>
    <option>陕西</option>
    <option>山西</option>
    <option>河南</option>
    <option>河北</option>
</select>
<!--围绕数据的标签-->
<fieldset>
    <legend>个人简介</legend>
    <h1>用户登陆</h1>
    <hr/>
    用户名: <input type="text"><br/>
    <input type="submit" value="登陆">
</fieldset>

</body>

在这里插入图片描述
一个案例：个人信息

<h1 align="center">个人信息</h1>
<table width="50%" border="1px" cellpadding="5" cellspacing="0"
       style=" margin: 0 auto; background: snow">
    <tr>
        <td style="background: #c0ffff">姓名</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>性别</td>
        <td>
            <select style="width: 95%">
                <option>男</option>
                <option>女</option>
            </select>

        </td>
    </tr>
    <tr>
        <td>手机号码</td>
        <td><input style="width: 95%; " type="tel"></td>
        <td>电子邮箱</td>
        <td><input style="width: 95%; " type="email"></td>
    </tr>
    <tr>
        <td>教育程度</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>工作职位</td>
        <td><input style="width: 95%; " type="text"></td>
    </tr>
    <tr>
        <td>工作城市</td>
        <td><input style="width: 95%; " type="text"></td>
        <td>期望工资</td>
        <td><input style="width: 95%; " type="text"></td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td colspan="3"><input type="text" style="width: 98%"></td>

    </tr>
    <tr>
        <td>特长</td>
        <td colspan="3"><input style="width: 95%; " type="text"></td>

    </tr>
    <tr>
        <td>地址</td>
        <td colspan="3"><input style="width: 95%; " type="text"></td>

    </tr>
    <tr>
        <td colspan="4"><br/></td>

    </tr>
    <tr>
        <td colspan="4" align="right">
            <input type="submit" value="添加">
            <input type="reset" value="关闭">
        </td>

    </tr>
</table>

在这里插入图片描述

CSS

div 和 span：

div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;

CSS 概述:
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

行内标签和块级元素：

学习的行内标签和块级元素分别有哪些?
行内标签:span, strong, a, img, input, textarea
块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
两者的区别与特性；
1). 块级元素独占一行空间，行内元素只占据自身宽度的空间;
2). 块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
3). 块级元素可以设置宽和高，行内元素设置的宽和高失效；
如何让块级元素居中? 如何让行内元素居中?
1); 块级元素居中： margin: 0 auto
2> 行内元素居中: text-aligin:center

标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        div{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>

在这里插入图片描述

类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        div{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }

        /*选择div标签中类名为important的进行设置下面的样式*/
        .important {
            width: 20px;
            height: 20px;
            font-size: large;
        }
    </style>
</head>
<body>
<div class="important">1</div>
<div>2</div>
<div class="important">3</div>
<div>4</div>
<div class="important">5</div>
</body>

在这里插入图片描述

id选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        #cooffee{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>
<div>1</div>
<div id="cooffee">2</div>
<div>3</div>
</body>

在这里插入图片描述

层级选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ul li a {
           color: red;
       }
       input[type='submit']{
           background: palevioletred;
            width: 200px;
       }
    </style>
</head>
<body>
<ol>
    <li><a href="#" > 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ol>
<ul>
    <li><a href="#"> 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ul>
<form>
    姓名: <input type="text"><br/>
    密码: <input type="password"><br/>
    <input type="submit" value="注册">
</form>
</body>

在这里插入图片描述

css的引入方式

1). 行内引入: <a style=“行内引入的样式”>
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件，通过<link rel=“stylesheet” href=“css/main.css”>与当前html文件链接在一起.
三种引入方式的优先级: 就近原则

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<div>
    <ul>
        <li style="background: blue">
            <a href="http://www.w3school.com.cn/h.asp" style="
            text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

唯品会注册界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>唯品会网站注册</title>
    <style>
        .complete{
            width:1353px;
            height: 883px;
        }
        .parth1{
            width:1353px ;
            height: 100px;
            /*border: 1px solid crimson;*/
            padding: 0;
            margin: 0;
        }
        .parth1-img1{
            padding-left: 14%;
            padding-top: 4px;
        }
        .parth1-img2{
           padding-left: 35%;
        }
        .parth2{
            width: 1353px;
            height: 643px;
            border: 1px solid white;
            background-image: url('8.png');
        }
        #login{
            width: 360px;
            height: 555px;
            background-color: #FFF;
            margin-left: 62%;
            margin-top: 38px;
            border-radius: 3px;
            box-shadow:  2px 2px 2px rgba(241, 1, 145, 0.19);
        }
        .parth2-1{
            width: 360px;
            height: 51px;
        }
        .parth2-1-1{
            width: 122px;
            height: 31px;
            text-align: center;
            float: right;
            font-size: 14px;
            padding-top: 20px;
            padding-right: 40px;
        }
        .tile{
            padding-top: 18px;
            padding-left: 35px;
            color: grey;
        }
        #form-class{
            width: 328px;
            height: 412px;
            border: 1px solid white;
            margin-top: 30px;
            margin-left: 14px;
        }
        .input-stye{
            width: 100%;
            height: 35px;
            margin-top: 28px;
        }
        .change{
            font-size: small;
            text-decoration: none;
            color:#176F9C;
        }
        a.change:hover{
            text-decoration: none;
            color: #1D94D1;
        }
        .last1{
            text-decoration: none;
            background-color: #f10180;
            width: 328px;
            height: 42px;
        }
        a.last1:hover{
            text-decoration: none;
            background-color: #333333;
            width: 328px;
            height: 42px;
        }
    </style>
</head>
<body class="complete">
<div class="parth1" >
    <a href="https://www.vip.com/?ff=125|2|1|14"><img class="parth1-img1" src="唯品会u.png" ></a>
    <img class="parth1-img2" src="Screenshot%20from%202018-09-29%2010-45-46.png">
</div>
<div class="parth2">
    <div id="login">
        <div class="parth2-1">
            <div class="parth2-1-1">已注册可<a href="https://passport.vip.com/login?ff=125|2|1|1" style="color: #f10180;text-decoration: none" >直接登录</a></div>
            <h3 class="tile">会员注册</h3>

        </div>
        <hr style="color: rgba(128, 128, 128, 0.28);margin: 0">
        <form id="form-class">
            <input class="input-stye" type="text" placeholder="请输入电话号码" style="margin-top: 0">
            <input class="input-stye" type="text" placeholder="验证码" style="width: 50%">
            <input type="button" value="获取验证码" style='background-color: rgba(128, 128, 128, 0.11);
            width:40%;height: 47px;border-radius: 10px;color: rgba(90, 81, 81, 0.36);margin-top: 28px;margin-left: 10px;'>
            <input class="input-stye" type="password" placeholder="密码由6-20位字母，数子和符号组成">
            <input class="input-stye" type="text" placeholder="再次输入上面的密码">
            <div class="input-stye">
            <input type="checkbox" name="read">我已阅读并接受以下条款:
            <a class="change" href="#" >《唯品会服务条款》</a>
            <a class="change" href="#" >《隐私条款》</a>
            <a class="change" href="#" >《唯品会支付用户协议》</a>
            <a class="change" href="#" >《唯品会信用服务协议》</a>
            </div>
            <div class="input-stye" style="margin-top: 48px;height: 42px"  >
              <a class="last1" href="#"><input type="button" value="立即注册" style="width: 100%;height: 100%;background-color: #f10180;color: white;border-radius: 10px;"></a>
            </div>
        </form>
    </div>

</div>
</body>
</html>

在这里插入图片描述