unit 03-HTML、CSS

最新推荐文章于 2023-11-07 12:49:48 发布

abu1216

最新推荐文章于 2023-11-07 12:49:48 发布

阅读量673

点赞数

本文链接：https://blog.csdn.net/abu1216/article/details/110390483

版权

HTML: 用于开发网页的一门技术

CSS: 用于修饰、渲染网页的一门技术

HTML+CSS可以开发一个非常美观、非常漂亮的网页

开发网页盖房子

HTML标签搭建网页的结构砖块(搭建房子的结构)

CSS属性石灰、油漆等涂料

HTML概述

HTML是什么

HTML(Hyper Text Markup Language): 超文本标记语言

超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图片、音频、视频等各种格式）

标记：也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容，例如：

<head> <body> <div> <span> <table>等

HTML是最基础的开发网页的语言。

HTML由W3C组织提供(CSS/xml)

关于HTML的细节:

(1)使用HTML开发的网页文件通常以 .htm或.html 为后缀!

(2)使用HTML开发的网页文件由浏览器负责解析并显示（浏览器就是一个html解析器）

(3)HTML是文档的一种(txt/word/ppt/pdf等)

总结: HTML就是用于开发网页的一门语言!!

HTML的结构

1、案例：编写我的第一个HTML网页，并用浏览器打开

新建一个txt文档，将后缀名改为.html，代码实现如下：

<!DOCTYPE html>
<html>
   <head>
       <title>网页的标题</title>
   </head>
   <body>
<h1>Hello CGB2003...</h1>
   </body>
</html>

2、HTML结构详解

(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
上面是html5.0的声明, 也是目前最常用的版本
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放网页可视化数据. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8"/> 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

HTML语法(了解)

1、html标签

标签：也叫做标记、元素等，标签分为开始标签，例如：

和结束标签，例如:

</head>、</body>

开始标签和结束标签之间还可以包含其他内容。

<head>
<titile>声明网页的标题</title>
<meta charset="utf-8"/>
</head>

有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：

2、html属性

在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

标签上可以声明多个属性，多个属性之间用空格分隔

标签上的属性的值可以使用单引号或者双引号引起来

3、html注释

格式: 

注释的作用: (1)为代码添加解释说明

(2)将一些暂时不需要执行的代码注释

浏览器对于html注释中的内容不会解析，也不会显示！

4、html空格和换行

在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：

如何在网页中做一个换行：可以使用 <br/> 标签做换行

如何在网页中做一个空格：可以使用 或&emsp;做空格

补充: HTML中是不区分大小写的！

HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。

HTML标签

图像标签

通过img标签可以在网页中插入一副图像

<img src="./imgs/meinv.jpg" width="50%"/>
<img src="./imgs/lpx.jpg" width="50%"/>

其中src属性用于指定图片的路径（图片的路径不要是带盘符的绝对路径，推荐使用相对路径）

width属性用于指定图片的宽度

height属性用于指定图片的高度

超链接标签

超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接

点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:

<a href="01-第一个网页.html">01-第一个网页.html</a>

<a href="http://www.baidu.com">百度一下，你就不知道</a>
<br/>

<a target="_blank" href="http://www.tmooc.cn">
<img alt="tmooc" src="imgs/tmooc.png" />
</a>

其中 href 属性用于指定点击超链接后将要跳转到的URL地址

target属性用于指定以何种方式打开超链接

_self：默认值, 表示在当前窗口中打开超链接

_blank：表示在新的窗口中打开超链接

表格标签

1.案例：在网页中插入一个3*3的表格

<h1>案例：在网页中插入一个3*3的表格</h1>
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

在浏览器中显示效果如下：

在head标签内添加如下内容：

再次刷新浏览器显示效果为：

2、表格标签介绍

table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）

3、练习：使用表格标签在网页中生成一个表格，如下图：

要求如下:

(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题

表单标签

1、表单的作用: 用于向服务器提交数据

向服务器提交数据的两种方式：

(1)通过表单向服务器提交数据

表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器。

(2)通过超链接向服务器提交数据

http://www.baidu.com?username=张三&pwd=123&like=篮球

<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>

在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。

2、表单标签

<form action="url地址" method="提交方式"></form>

其中action属性用于指定表单的提交地址，例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。

method="GET/POST" 属性是用于指定表单的提交方式，常用的就是GET和POST提交。

表单项标签

1、input元素：

(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

(2)密码输入框(比如:密码/确认密码等)

(3)单选框(比如:性别/部门等)

<input type="radio" name="gender"/>男

(4)复选框/多选框(比如:爱好/岗位等)

(5)普通按钮(比如:换一张图片)

普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为

(6)提交按钮(比如:提交/注册/登录)

提交按钮用于提交表单中的数据到服务器中!

2、select、option标签：

select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置当前option选项默认被选中

3、textarea多行文本输入区域：

cols属性: 用于设置文本输入框的列数(宽度)

rows属性: 用于设置文本输入框的行数(高度)

placeholder属性: 设置输入框中的提示消息!

表单细节问题

1、提交表单时，表单中的数据为什么没有被提交？

对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会别忽略。例如：

2、如何让多个单选框只能有一个被选中？

要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！

3、为什么单选框、复选框选择某一项后提交的值都是on?

因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4、如何设置单选框或复选框默认选中某一项?

可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：

<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5、如何设置下拉选框默认选中某一项?

在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：

6、下拉选框中option选项上的value属性的作用是什么？

如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。

如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容

注册表单案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {
   border: 2px solid red; /* 为表格添加边框 */
   border-collapse: collapse; /* 设置边框合并 */
   background-color: lightgrey; /* 为表格设置背景颜色 */
   /* margin-left: 15%; */
   /* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
   margin-left: auto;
   margin-right: auto;
}

td, th {
   border: 2px solid red; /* 为单元格添加边框 */
   border-collapse: collapse; /* 设置边框合并 */
   padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}

h1 {
   /* border: 2px solid blue; */
   text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<body>
   <h1>欢迎注册</h1>
   <form action="#">
       <table>
           <tr>
               
               <td>用户名:</td>
               <td><input type="text" name="username" /></td>
           </tr>
           <tr>
               
               <td>密码:</td>
               <td><input type="password" name="pwd" /></td>
           </tr>
           <tr>
               
               <td>性别:</td>
               <td><input type="radio" checked="checked" name="gender"
                   value="male" />男 <input type="radio" name="gender" value="female" />女
               </td>
           </tr>
           <tr>
               
               <td>爱好:</td>
               <td><input type="checkbox" name="like" value="basketball" />篮球
                   <input type="checkbox" checked="checked" name="like"
                   value="football" />足球 <input type="checkbox" name="like"
                   value="volleyball" />排球</td>
           </tr>
           <tr>
               
               <td>城市:</td>
               <td><select name="city">
                       <option value="beijing">北京</option>
                       <option value="shanghai">上海</option>
                       <option selected="selected">广州</option>
                       <option>深圳</option>
               </select></td>
           </tr>
           <tr>
               
               <td>自我描述:</td>
               <td><textarea name="description" cols="30" rows="5"
                       placeholder="请输入描述信息..."></textarea></td>
           </tr>
           <tr>
               
               
               <td colspan="2" style="text-align: center;"><input
                   type="submit" value="提交" /></td>
           </tr>
       </table>
   </form>
</body>
</html>

@charset "utf-8";
/* 选中所有的p元素，并给p元素设置样式 */
p{
   border: 2px solid blue;
   color: red;/* 设置字体颜色 */
   font-family: "华文琥珀";/* 设置字体 */
}

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       
       <img src="./img/meinv01.jpg" width="50%" alt="这是一个美女·"/>
       <hr />

       <!-- 插入一个超链接标签
       点击超链接可以跳转到另外一个网页、图片、下载地址
       href属性：用于指定点击超链接后将会跳转到的地址
       target属性：指定以何种方式打开超链接
       取值为——self,表示在当前窗口打开超链接
       _blank,表示在新窗口中打开超链接
       ->
       <a href="http://www.baidu.com" target="_blank">百度一下，你就不知道</a>
       <a href="http://www.tmooc.cn" target="_blank">TMOC一下，你就知道</a><br />
       <a href="./img/meinv02.jpg" target="_blank">美女</a>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       

       <table border="2px" cellspacing="0" cellpadding="5px"
       bordercolor="red" width="70%" bgcolor="lightgrey" align="center">
           <tr>
               <th>单元格11</th>
               <th>单元格12</th>
               <th>单元格13</th>
           </tr>

           <tr>
               <td>单元格21</td>
               <td>单元格22</td>
               <td>单元格23</td>
           </tr>

           <tr>
               <td>单元格31</td>
               <td>单元格32</td>
               <td>单元格33</td>
           </tr>
       </table>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       
       <h1 align="center">欢迎注册</h1>
       <form action="#">
           <table border="1px" cellspacing="0" cellpadding="5px"
           bordercolor="red" bgcolor="lightgrey" align="center">
               <tr>
                   <td>用户名:</td>
                   <td><input type="text" name="username"/></td>
               </tr>

               <tr>
                   <td>密码:</td>
                   <td><input type="password" name="pwd"/></td>
               </tr>

               <tr>
                   <td>性别:</td>
                   <td>
                       <input checked="checked" type="radio" name="gender" value="male"/>男
                       <input type="radio" name="gender" value="female"/>女
                   </td>
               </tr>

               <tr>
                   <td>爱好:</td>
                   <td>
                       <input type="checkbox" name="like" value="basketball"/>篮球
                       <input type="checkbox" checked="checked" name="like" value="football"/>足球
                       <input type="checkbox" name="like" value="volleyball"/>排球

                   </td>
               </tr>

               <tr>
                   <td>城市:</td>
                   <td>
                       <select name="city">
                           <option value ="beijing">北京</option>
                           <option value ="shanghai">上海</option>
                           <option selected="selected value="guangzhou">广州</option>
                           <option value ="shenzhen">深圳</option>
                       </select>
                   </td>
               </tr>

               <tr>
                   <td>自我描述:</td>
                   <td>
                       <textarea name="description" rows="5" cols="30" placeholder="请输入描述信息....." ></textarea>
                   </td>
               </tr>

               <tr>
                   <td colspan="2" align="center">
                       <input type="submit" value="提交" />
                   </td>
               </tr>
           </table>

       </form>
   </body>
</html>

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
   
   <style type="text/css">
       /* ****** CSS样式（注释快捷键：ctrl+shift+/） ****** */
       /*选中所有的span元素并给span元素设置css样式 */
       span{
           border: 2px solid green;/* 设置边框的宽度、样式、颜色 */
           font-size: 30px;/* 设置字体大小 */
           font-weight: bolder;/* 设置字体加粗 */
       }
   </style>

   
   <link rel="stylesheet" type="text/css" href="./css/demo.css"/>
</head>
<body>
   
   
   



   
   <div style="border: 2px solid blue; font-size: 26px;background-color: pink;">
       这是一个div...
   </div>

<p>这是一个p标签1</p>
   <p>这是一个p标签p2</p>
   <p>这是一个p标签p3</p>

   
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<title>CSS选择器</title>
<meta charset="UTF-8" />
<style type="text/css" >
   /* 为了看着方便给所有标签都加上边框，及设置一些默认的样式 */
   body,input{font-size:18px;}
   input{border: 2px solid green;}
   div,span,p{border: 2px solid red;font-size:18px;}
   span{border-color: blue;margin-right:10px;}
   div,p{ width:350px;height:80px;padding:5px;}
   /* ----- 1.标签名/元素名选择器练习 -----
   将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
   span{
       background-color: #efbdef;
       font-size: 22px;
       font-weight: bolder;
   }

   /* ----- 2.class/类选择器练习 -----
   (1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
   (2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
   #ec0e7e；*/

   /* 选中class值为s1的元素，并给元素设置样式*/
   .s1{
       background-color: #faf77b;
       border: 2px solid cyan;
   }
   /* 如果是同一类选择器给同样的元素设置不同的样式，结果是，写在后面的优先级更高
   （因为浏览器是按照从上往下去解释执行，后面的会覆盖前面的样式）*/
   .s2{
       background-color: #5eff1e;
       color: #ec0e7e;
   }



   /* ----- 3.id选择器练习 -----
   用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/

   /*选中id值为p1的元素 */
   #p1{
       font-size: 24px;
       color: #a06649;
       text-indent: 20px;
   }


   /* ----- 4.后代选择器练习 -----
   为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/

   /*选中所有p元素内部的所有span元素，其中p和span之间的空格，表示p和span是包含与被包含的关系
   */
   p span{
       font-size: 18px;
       color: red;
       background-color: pink;
   }

   /* ----- 5.属性选择器 -----
   为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/

   /*选中type="text"的input元素（文本输入框） */
   input[type="text"]{
       background-color: #FF7CCC;
       font-size: 22px;
       text-indent: 15PX;
   }

   /* 选中所有的复选框：input[type="checkbox"]{css属性.....} */
   /* 选中所有的提交按钮：input[type="submit"]{css属性.....} */
</style>
</head>
<body>
   <br/>
   <div>
       div111
       <span class="s2">这是一个span</span>
       这是一个div
   </div> <br/>

   
   <span class="s1 s2">span111</span>
   <span class="s1">span222</span>
   <span class="s1">span333</span>

   <p id="p1">
       ppp111
       <span>这是一个span</span>
       这是一个P元素
   </p>
   <p>
       ppp222
       <span>这是一个span</span>
       这是一个P元素
   </p>
   <input type="text" value="用户名"/>
   <input type="button" value="按钮1" />
   <input type="button" value="按钮2" />
</body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Insert title here</title>
   </head>
   <body>
       <h1>欢迎大家来到达内学习java培优课程！</h1>
       
       

       
       aaaa      bbbbb    cccc

       <hr>
       aaaaaa<br/>
       bbbbb<br/>
       cccccc<br/>

       <hr>
       用户名：<input/><br/>
       密&emsp;码：<input/>
   </body>
</html>

@charset "utf-8";
/* 选中头部的div */
#header{
   /* background-color: pink;/* 333 */
   width: 1200px;
   /* 设置当前元素的左右外边距自适应，始终保持相等
   */
   margin-left: auto;/* 左外边距 */
   margin-right: auto;/* 右外边距 */
   height: 72px;
   margin-top: 42px;/* 上外边距 */
}
#header img{/*头部的logo图片 */
   margin-left: 50px;
   margin-right: 33px;
   /* 设置元素的中线对齐 */
   vertical-align: middle;
}
#header .line{/* 头部的竖线 */
   border: 2px solid #676767;
   margin-right: 22px;
   height: 68px;/* 68+2+2=72 */
   /* span元素不能设置宽高，除非将span设置为inline-block
   或者block类型*/
   display: inline-block;/* 设置后，span就可以设置宽高了 */
   /* 设置元素的中线对齐 */
   vertical-align: middle;
}
#header .wel-login{/* 欢迎登陆 */
   font-size: 36px;
   color: #676767;
   /* 设置元素的中线对齐 */
   vertical-align: middle;
}

/* 选中主体的div */
#middle{
   /* background-color: yellow; *//* 333 */
   width: 1200px;
   margin-left: auto;/* 左外边距 */
   margin-right: auto;/* 右外边距 */
   margin-top: 42px;/* 上外边距 */
   border: 1px solid #F0F0F0;/* 设置边框的宽度、样式、颜色*/
   border-width: 9px 7px;/* 仅设置边框的宽度，上下为9px ,左右为7px */
}
#middle form{/* 主体中的form */
   /* background-color: pink; *//* 333 */
   width: 385px;
   margin-left: 110px;
   /* 既可以同行显示，又可以设置宽高 */
   display: inline-block;
   /* 让当前元素和行内最高元素的顶部对齐 */
   vertical-align: top;
}
#middle form h1{/* 登陆 */
   margin-top: 87px;/* 上外边距 */
   margin-bottom: 20px;/* 下外边距 */
   text-align: center;/* 水平居中 */
   font-size: 26px;
   color: #333333;
}
#middle form #err-msg{
   font-size: 16px;
   color: #FF0000;
   text-align: center;
   margin-bottom: 9px;
}
#middle form input{/* 给所有的input统一设置样式 */
   width: 381px;
   height: 49px;
   border: 2px solid #ededed;
   font-size: 16px;
   color: #999999;
   text-indent: 46px;
   margin-bottom: 32px;
}
#middle form input[name='username']{/* 用户名输入框 */
   /* 为当前元素设置背景颜色背景图片、背景图片不重复背景图片的位置 */
   background: #ffffff url(../img/u_ico.jpg) no-repeat 14px 14px;
}
#middle form input[name='psw']{
   background: #ffffff url(../img/p_ico.jpg) no-repeat 14px 14px;
}
#middle form input[type='submit']{/* 提交按钮 */
   height: 52px;
   font-size: 20px;
   color: #FFFFFF;
   background-color: #FF0000;
   border: 2px solid #FF0000;
   text-indent: 0;/* 覆盖前面统一设置的首行缩进 */
   width: 385px;/* 这个宽度是包含边框的 */
}

/* 选中尾部的div */
#footer{
   /* background-color: cyan; *//* 333 */
   width: 1200px;
   margin-left: auto;/* 左外边距 */
   margin-right: auto;/* 右外边距 */
   margin-top: 144px;/* 上外边距 */

}
#footer p{
   text-align: center;
   font-size: 14px;
   color: #999999;
   line-height: 34px;
}

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>登陆页面</title>
       
       <link rel="stylesheet" type="text/css" href="./css/login.css"/>
   </head>
   <body>
       
       <div id="header">
           <img src="./img/logo.jpg" />
           <span class="line"></span>
           <span class="wel-login">欢迎登陆</span>
       </div>

       
       <div id="middle">
           <img src="./img/show.jpg" />
           <form action="#" method="">
               <h1>登陆</h1>
               <div id="err-msg">
                   账户名与密码不匹配请重新输入
               </div>
               <input type="text" name="username" placeholder="用户名 / 已验证手机" />
               <input type="password" name="psw" placeholder="密码" />
               <input type="submit" value="登录"/>
           </form>
       </div>

       
       <div id="footer">
           <p>关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 营销中心 | 手机京淘 | 友情连接 | 销售联盟 | 京淘社区 | 京淘公益 | English Site
           <br/>
           Copyright © 2015 - 2019 京淘jingtao.com 版权所有</p>
       </div>
   </body>
</html>