1) 前端:html

这里使用谷歌浏览器

开发工具使用pycharm

图片1.png

1、HTML的概述

html全称HyperText Mackeup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式。比如字体、颜色、大小等。

注:html中,除了语义,其他什么都没有。

2、HTML的网络术语

· 网页 :由各种标记组成的一个页面就叫网页。

· 主页(首页) : 一个网站的起始页面或者导航页面。

· 标记: <p>称为开始标记 </p>称为结束标记,也叫标签。每个标签都规定好了特殊的含义。

· 元素:<p>内容</p>称为元素.

· 属性:给每一个标签所做的辅助信息。

3HTML 的规范

1)所有标记元素都要正确的嵌套,不能交叉嵌套。正确写法举例:<h1><font></font></h1>

2)所有的标记都必须小写。

3)所有的标记都必须关闭。

· 双边标记:<span></span>

· 单边标记:<br> 转成 <br /> <hr> 转成 <hr />,还有<img src=“URL” />

4)所有的属性值必须加引号。<h1 id="head"></h1>

5)所有的属性必须有值。<input type="radio" checked="checked" />

HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。换不换行、tabtab,都不影响页面的结构。

也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。要求大家都正确缩进标签。

 

 

任何一个标准的HTML页面,第一行一定是一个以

<!DOCTYPE...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
</body>
</html>

 图片2.png

head标签都放在头部分之间。这里面包含了:<title><meta><link><style>

· <title>:指定整个网页的标题,在浏览器最上方显示。

· <meta>:提供有关页面的基本信息

· <link>:定义文档与外部资源的关系。

· <style>:定义内部样式表与网页的关系

 

http-equiv属性

它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为contentcontent中的内容其实就是各个参数的变量值。

 

<!--重定向 2秒后跳转到对应的网址,注意分号-->

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">

<!--指定文档的内容类型和编码类型 -->

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<!--告诉IE浏览器以最高级模式渲染当前网页-->

<meta http-equiv="x-ua-compatible" content="IE=edge">

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
</body>
</html>

 

<meta name=viewport content="width=device-width, initial-scale=1">

上面这个标签,是让我们网页支持移动端,移动设备优先(了解即可)

 

可以参考:

http://www.cnblogs.com/majj/p/9056951.html

 

 

 

 

需要记住:

 图片3.png

标题使用<h1><h6>标签进行定义。<h1>定义最大的标题,<h6>定义最小的标题。具有align属性,属性值可以是:leftcenterright

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>学城</h1>
    <h2>学城</h2>
    <h3>学城</h3>
    <h4>学城</h4>
    <h5>学城</h5>
    <h6>学城</h6>
</body>
</html>

 

 图片4.png

上标:<sup> 下标:<sub>

上小标这两个标签容易混淆,怎么记呢?这样记:b的意思是bottom:底部

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
5<sup>2</sup>
8<sub>2</sub>
</body>
</html>

 

 

特殊符号:

·  :空格 non-breaking spacing,不断打空格)

· <:小于号(less than

· >:大于号(greater than

· &:符号&

· ":双引号

· ':单引号

· ©:版权©

· :商标

特殊符号列表:

http://tool.chinaz.com/Tools/HtmlChar.aspx

 

段落标签:<p>

属性:

· align='属性值':对齐方式。属性值包括:leftcenterright

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<p>这是一个段落</p>
<p align="center">这是另一个段落</p>
</body>
</html>

 

 

下面这几句话,大家一定牢牢记住。HTML标签是分等级的。HTML将所有的标签分为两种:

· 文本级标签pspanabiuem。文本标签里只能放文字、图片、表单元素。

· 容器级标签divh系列、lidtdd。容器级标签里可以放任何东西

<p>标签可以换行

 

修改超链接连接的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
    <style type="text/css">
        a{
            text-decoration: none;
            /*color: red;*/
        }
        a:hover{
            color: red;
        }

    </style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

 

 图片5.png

出现小手在浏览器上:

图片6.png 

跳到顶部:#top

<a href="#top"><img src="./1.jpg" alt="美女"></a>

 

阻止a标签的功能:

<a href="javascript">

 

从学习p的第一天开始,就要死死记住:p标签是一个文本级标签p里面只能放文字、图片、表单元素。其他的一律不能放。

错误写法:(把h系列的标签放到p里)

 

块级标签:

divspan是非常重要的标签,div的语义是division“分割span的语义就是span“范围、跨度CSS课程中你将知道,这两个东西,都是最最重要的盒子

 

div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

div标签的属性:

· align="属性值":设置块儿的位置。属性值可选择:leftrightcenter

<span><div>唯一的区别在于<span>是不换行的,而<div>是换行的。

如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<div class="topBar">
    导航栏
</div>
<div class="header">
    区域栏
</div>
<span>sssss</span>
<span>bbbbb</span>
</body>
</html>

 图片7.png

 

标签选择器:

 图片8.png

 图片9.png

类选择器:

 图片10.png

 图片11.png

写多个别名:

 图片12.png

 图片13.png

<a>:标签不能设置宽高,在一行内显示,默认是内容的宽高

 图片14.png

图片15.png

 

display属性:可以对a标签的属性进行设置宽高

 图片16.png

Img:标签

行内块标签

 图片17.png

 

div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。

div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。

span也是表达小区域、小跨度的标签,但是是一个文本级的标签。

就是说,span里面只能放置文字、图片、表单元素。 span里面不能放phuldloldiv

Span举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<p>
        商品简介:
        <span>
            <a href="">详细信息</a>
            <a href="">生产日期</a>
        </span>
</p>
</body>
</html>

 

图片18.png 

 

预定义标签:

含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)
说明:真正排网页过程中,<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
 <pre>
        鹅鹅鹅

        作者:李白
        曲项向天歌
        白毛浮绿水

    </pre>
</body>
</html>

图片19.png 

 

超链接:

外部链接:链接到外部文件。举例:

<a href="new.html">点击进入到新网页</a>

<a href="http://www.baidu.com" target="_blank">进入百度</a>

 

锚链接
指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。

<a href="new.hhml#top">回到顶部</a>

邮件链接
代码举例:

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

返回页面顶部的位置

 <a href="#">跳转到顶部</a>

js有关:

 <a href="javascript:alert(1)">内容</a>

  <a href="javascript:;">内容</a>

1. javascript:;表示什么都不执行,这样点击<a>时就没有任何反应 例如:<a href="javascrip:;">内容</2

2. javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<ahref="javascript:alert()">内容</a>

 

连接图片:

<!-- 当前目录中的图片 -->

<img src="2.jpg"><img src=".\2.jpg">

 <!-- 上一级目录中的图片 -->

<img src="..\2.jpg">

1)以盘符开始的绝对路径。举例:

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

2)网络路径。举例:

<img src="http://www.baidu.com/2016040102.jpg">

 

· width:宽度

· height:高度

· title提示性文本。公有属性。也就是鼠标悬停时出现的文本。

· align:指图片的水平对齐方式,属性值可以是:leftcenterright

<img src="images/bojie.jpeg" alt="波姐" title='波多野结衣' width="400" height="400">

注意事项:
1)如果要想保证图片等比例缩放,请只设置widthheight中其中一个。
2)如果想实现图文混排的效果,请使用align属性,取值为leftright

 

无序列表<ul>  ,无序列表中的每一项是<li>

· ulunordered list无序列表的意思。

· lilist item列表项的意思。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<ul>
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
</ul>
</html>

 

 图片20.png

· li不能单独存在,必须包裹在ul里面;反过来说,ul儿子不能是别的东西,只能有li

· 我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的语义的。

属性:

· type="属性值"。属性值可以选: disc(实心原点,默认)square(实心方点)circle(空心圆)

效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<ul type="square">
         <li>张三</li>
         <li>李四</li>
         <li>王五</li>
</ul>
</html>


 图片21.png

列表之间是可以嵌套的。我们来举个例子:
代码:

<ul>

    <li><b>北京市</b>

        <ul>

            <li>海淀区</li>

            <li>朝阳区</li>

            <li>东城区</li>

 

        </ul>

    </li>

 

    <li><b>广州市</b>

        <ul>

            <li>天河区</li>

            <li>越秀区</li>

        </ul>

    </li>

  </ul>

 

有序列表<ol> 里面的每一项是<li>

<ol>   

        <li>嘿哈</li>

       <li>哼哈</li>

        <li>呵呵</li>

</ol>

属性:

· type="属性值"。属性值可以是:1(阿拉伯数字,默认)aAiI。结合start属性表示从几开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<ol type="A">
        <li>嘿哈</li>
       <li>哼哈</li>
        <li>呵呵</li>
</ol>
</body>
</html>

图片22.png 

 

定义列表<dl>

定义列表的作用非常大。

<dl>英文单词:definition list,没有属性。dl的子元素只能是dtdd

· <dt>definition title 列表的标题,这个标签是必须的

· <dd>definition description 列表的列表项,如果不需要它,可以不加

备注:dtdd只能在dl里面;dl里面只能有dtdd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<dl>
        <dt>第一条规则</dt>
        <dd>不准睡觉</dd>
        <dd>不准交头接耳</dd>
        <dd>不准下神</dd>

        <dt>第二条规则</dt>
        <dd>可以泡妞</dd>
        <dd>可以×××子</dd>
        <dd>可以看mv</dd>
</dl>
</body>
</html>

图片23.png 

表格标签:

表格标签用<table>表示。
一个表格<table>是由每行<tr>组成的,每行是由<td>组成的。
所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。
在以前,要想固定标签的位置,唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候,表格作用还是有一些的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table>
        <tr>
            <td>小马哥</td>
            <td>18</td>
            <td></td>
            <td>山东</td>
        </tr>

        <tr>
            <td>小岳岳</td>
            <td>45</td>
            <td></td>
            <td>河南</td>
        </tr>

        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <td></td>
            <td>香港</td>
        </tr>

    </table>
</body>
</html>

 图片24.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table border="1">
        <tr>
            <td>小马哥</td>
            <td>18</td>
            <td></td>
            <td>山东</td>
        </tr>

        <tr>
            <td>小岳岳</td>
            <td>45</td>
            <td></td>
            <td>河南</td>
        </tr>

        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <td></td>
            <td>香港</td>
        </tr>

    </table>
</body>
</html>

 图片25.png

<tr>:

属性:

· dir:公有属性,设置这一行单元格内容的排列方式。可以取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left

· bgcolor:设置这一行的单元格的背景色。
注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。

· height:一行的高度

· align="center":一行的内容水平居中显示,取值:leftcenterright

· valign="center":一行的内容垂直居中,取值:topmiddlebottom

<rd>:单元格

属性:

· align:内容的横向对齐方式。属性值可以填:left right center
如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。

· valign:内容的纵向对齐方式。属性值可以填:top middle bottom

· width:绝对值或者相对值(%)

· height:单元格的高度

· bgcolor:设置这个单元格的背景色。

· background:设置这个单元格的背景图片。

单元格合并:

colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。

rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table border="1">
        <tr>
            <td>小马哥</td>
            <td>18</td>
            <td></td>
            <td>山东</td>
        </tr>

        <tr>
            <td>小岳岳</td>
            <td>45</td>
            <td></td>
            <td>河南</td>
        </tr>

        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <!--<td>女</td>-->
            <td colspan="2">香港</td>
        </tr>

    </table>
</body>
</html>

 图片26.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table border="1">
        <tr>
            <td>小马哥</td>
            <td>18</td>
            <td></td>
            <td rowspan="3">中国</td>
        </tr>

        <tr>
            <td>小岳岳</td>
            <td>45</td>
            <td></td>
            <!--<td>河南</td>-->
        </tr>

        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <td></td>
            <!--<td colspan="2">香港</td>-->
        </tr>

    </table>
</body>
</html>

 

图片27.png 

加粗使用<th>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table border="1">
        <tr>
            <td>小马哥</td>
            <td>18</td>
            <td></td>
        
    <th rowspan="3">中国</th>
        </tr>

        <tr>
            <td>小岳岳</td>
            <td>45</td>
            <td></td>
            <!--<td>河南</td>-->
        </tr>

        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <td></td>
            <!--<td colspan="2">香港</td>-->
        </tr>

    </table>
</body>
</html>

 图片28.png

 

<caption> 表格的标题:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<table border="1">
    <caption>人物介绍</caption>
        <tr>
            <td>小马哥</td>
            <td>18</td>
            <td></td>
            <th rowspan="3">中国</th>
        </tr>

        <tr>
            <td>小岳岳</td>
            <td>45</td>
            <td></td>
            <!--<td>河南</td>-->
        </tr>

        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <td></td>
            <!--<td colspan="2">香港</td>-->
        </tr>

    </table>
</body>
</html>

 图片29.png

表单标签:

表单标签用<form>表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的、选择的。

get提交和post提交的区别:
GET方式:
将表单数据,以"name=value"形式追加到action指定的处理程序的后面,两者间用"?"隔开,每一个表单的"name=value"间用"&"号隔开。
特点:只适合提交少量信息,并且不×××全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

 

POST方式:
将表单数据直接发送(隐藏)action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(WordExcelrarimg)

 

<input>:输入标签:

用于接收用户输入。

<input type="text" />

type="属性值":文本类型。属性值可以是:

text(默认)

password:密码类型

radio:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是名字
)。非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio

checkbox:多选按钮,名字相同的按钮作为一组进行选择。

checked:将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时,可以用这个属性。属性值也是checked,可以省略。

hidden:隐藏框,在表单中包含不希望用户看见的信息

button:普通按钮,结合js代码进行使用。

submit:提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有提交文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。

reset:重置按钮,清空当前表单的内容,并设置为最初的默认值

image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。

file:文件选择框。
提示:如果要限制上传文件的类型,需要配合JS来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。

value="内容":文本框里的默认内容(已经被填好了的)

size="50":表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦

readonly:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。

disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
  <form>
        姓名:<input value="呵呵" >逗比<br>
        昵称:<input value="哈哈" readonly=""><br>
        名字:<input type="text" value="name" disabled=""><br>
        密码:<input type="password" value="pwd" size="50"><br>
        性别:<input type="radio" name="gender" value="male" checked="">
              <input type="radio" name="gender" value="female" ><br>
        爱好:<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
    </form>
</body>
</html>

 

 图片30.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
  <form>
        姓名:<input value="呵呵" >逗比<br>
        昵称:<input value="哈哈" readonly=""><br>
        名字:<input type="text" value="name" disabled=""><br>
        密码:<input type="password" value="pwd" size="50"><br>
        性别:<input type="radio" name="gender" value="male" checked="">
              <input type="radio" name="gender" value="female" ><br>
        爱好:<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
    </form>
<form>
        <input type="button" value="普通按钮"><br>
        <input type="submit"  value="提交按钮"><br>
        <input type="reset" value="重置按钮"><br>
        <input type="image" src="images/bojie.jpeg" width="400" value="图片按钮2"><br>
        <input type="file" value="文件选择框">
</form>
</body>
</html>

图片31.png 

<select>:下拉列表标签:

<select>标签里面的每一项用<option>表示。select就是选择option“选项

select标签和uloldl一样,都是组标签。

<select>标签的属性:

· multiple:可以对下拉列表中的选项进行多选。没有属性值。

· size="3":如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。

<option>标签的属性:

· selected:预选中。没有属性值。

 

    <form>

        <select>

            <option>小学</option>

            <option>初中</option>

            <option>高中</option>

            <option>大学</option>

            <option selected="">研究生</option>

        </select>

        <br><br><br>

 

        <select size="3">

            <option>小学</option>

            <option>初中</option>

            <option>高中</option>

            <option>大学</option>

            <option>研究生</option>

        </select>

        <br><br><br>

 

        <select multiple="">

            <option>小学</option>

            <option>初中</option>

            <option selected="">高中</option>

            <option selected="">大学</option>

            <option>研究生</option>

        </select>

        <br><br><br>

 

    </form>

 

 图片32.png

 

<textare>:标签:多行文本输入框

text就是文本area就是区域

属性:

· value:提交给服务器的值。

· rows="4":指定文本区域的行数。

· cols="20":指定文本区域的列数。

· readonly:只读。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
 <form>
        <textarea name="txtInfo" rows="4" cols="20">小李飞刀</textarea>
</form>
</body>
</html>

图片33.png 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<form>

        <fieldset>
        <legend>账号信息</legend>
        姓名:<input value="呵呵" >逗比<br>
        密码:<input type="password" value="pwd" size="50"><br>
        </fieldset>

        <fieldset>
        <legend>其他信息</legend>
        性别:<input type="radio" name="gender" value="male" checked="">
              <input type="radio" name="gender" value="female" ><br>
        爱好:<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
        </fieldset>

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

 

图片34.png 

<input type="radio" name="sex" /> 

<input type="radio" name="sex" /> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<input type="radio" name="sex" />
<input type="radio" name="sex" />
</body>
</html>

 图片35.png

<input type="radio" name="sex" id="nan" /> <label for="nan"></label>
<input type="radio" name="sex" id="nv"  /> <label for="nv"></label>

可以写成这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
<input type="radio" name="sex" id="nan" /> <label for="nan"></label>
<input type="radio" name="sex" id="nv"  /> <label for="nv"></label>
<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>
</body>
</html>

 

 图片36.png

 

Css的引入方式

1)行内引入:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="color: red">
    我是一个div
</div>

</body>
</html>

2)内接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            color: yellow;
        }
    </style>
</head>
<body>
<div>
    我是一个div
</div>
<p>我是×××的</p>

</body>
</html>

 

 

3)外接式:

<link rel="stylesheet" href="./index.css">

 

4)外接式-导入式

 

<style type="text/css">

        @import url('./index.css');

</style>

 

 

Css选择器:

标签选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            color: #0000CC;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div>
            <p>haha</p>
        </div>
    </div>
</div>


</body>
</html>

 

 

Id选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*权重问题*/
        /*id  class 标签 的个数*/
        .app{
            color: #25acd1;
        }
        #box{
            color: green;
        }
        p{
            color: red;
        }
        .child {
            color: blue;
        }
        #pa{
            color: yellow;
        }
    </style>
</head>
<body>
<div id="box">
    <div>
        <div class="child">
            <p id="pa" class="app">猜猜我是什么颜色</p>
        </div>
    </div>
</div>
</body>
</html>

 

后代选择器:

 

 

 图片1.png

子代选择器:

 

 图片2.png

总结:标签选择器是安照权重来分的,首先是id  然后是class  最后是标签,比大小,如果id多那就是这个如果id一样就比class,一次类推

 

 图片3.png

 

标签悬浮和点击过后以及点击前的颜色

图片4.png 

 

盒子模型:

 

Padding使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            padding: 50px;
        }
    </style>
</head>
<body>
<div class="box">
内容
</div>

</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        .box{
            width: 300px;
            height: 350px;
            background-color: red;
            /*padding-left: 100px;*/
            padding: 100px 50px 40px 30px;
        }
    </style>
</head>
<body>
<div class="box">
内容
</div>

</body>
</html>

 

 

 图片5.png

 

小三角:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 0px;
            height: 0px;
            border-bottom: 30px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }
    </style>
</head>
<body>
<div>

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

 图片6.png