今日笔记

一、案例一：网站信息展示页面

1.1、需求说明

1.2 HTML语言入门

1.2.1 HTML简述及作用

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

1.2.2 HTML入门案例

1.2.3 HTML语言特点

HTML文件不需要编译，直接使用浏览器打开即可解析效果
HTML文件的扩展名是.html 或 .htm
HTML都是由标签组成
通常情况下标签由开始标签和结束标签组成

开始标签和结束标签之间的信息，叫做标签的内容体。
```
<font color="red">我是红色字体</font>
```
HTML标签是有属性的。

<标签名属性名1= " 属性值1" 属性名2=" 属性值2"/>

属性用于修饰标签效果，例如：字体颜色、字体大小等。好比人有肤色、眼睛大小等属性一样。

1.2.4 使用Hbuilder创建HTML

使用hb软件,在资料中.演示使用

1.3 HTML常见标签

1.3.1、HTML标签-注释ctrl+/

1.3.2、HTML标签-标题标签h1 h6

1.3.3 HTML标签-水平线标签hr

b变粗 i变斜

属性名	属性说明
size	定义水平线的粗细单位：px（像素）
color	定义水平线的颜色
width	定义水平线的长短取值

1.3.4 HTML标签-字体标签

属性名	属性说明
size	定义字号大小默认大小3号。取值范围:1~7 1号最小，7号最大
color	定义字体的颜色颜色可以是英文单词：例如red,blue,yellow颜色也可以是编码：#FFFFFF

1.3.5 HTML标签-粗体&斜体标签

1.3.6 HTML标签-段落标签p

1.3.7 HTML标签-换行标签br

1.3.8 HTML标签-空格标签

1.4 需求分析

1.5 代码实现

二、案例二：网站图片页面展示

2.1 需求说明

2.2 HTML标签-图片标签

三、案例三：网站列表页面展示

3.1 需求说明

3.2、列表&超链接标签

3.2.1、HTML标签-列表标签

用于展示列表信息

定义有序列表
- type 列表类型，取值：A、a 、I 、i 、1 等
定义无序列表
- type 符号的类型，取值：disc 实心圆、square 方块、circle 空心圆
列表项

ul或者ol属性（了解）

属性说明	属性名
定义列表的符号类型。有序列表：取值：A、a 、I 、i 、1 等无序列表：取值：disc 实心圆、square 方块、circle 空心圆	type

3.2.2、HML标签-超链接标签

属性名	属性说明
href	用于指定需要连接并打开的页面路径
target	确定以何种方式打开href所设置的页面。取值：_blank 在新窗口中打开href确定的页面。 _self 默认。使用href确定的页面替换当前页面。

3.3、需求分析

3.4、案例代码实现

四、案例四：表格展示

4.1、需求说明

4.2、表格标签

4.2.1 表格的作用

4.2.2 表格的结构标签

标签名	作用
table	表格容器
tr	行
th	列标题加粗居中效果
td	列
caption	表格的标题

4.2.3 常用的表格属性

属性名	作用
width	表格宽度
border	表格外边框粗细
align	可用在table、tr、td中
rowspan	跨几行
colspan	跨几列
cellspacing	设置单元格之间的间隔
cellpadding	设置单元格边框与文字之间的距离

4.2.4 没有边框的表格

<table>
            <tr>
                <td>刘备</td>
                <td>关羽</td>
                <td>张飞</td>
                <td>赵云</td>
            </tr>
            <tr>
                <td>曹操</td>
                <td>曹丕</td>
                <td>曹植</td>
                <td>曹冲</td>
            </tr>
        </table>

4.2.5 有表头且有边框的表格

<table align="center" border="1px" cellspacing="0px" width="350px">
            <tr>
                <th>姓名</th>
                <th>智力值</th>
                <th>爱好</th>
            </tr>
            <tr>
                <td>诸葛亮</td>
                <td>98</td>
                <td>兵法</td>
            </tr>
        </table>

4.2.6 跨列的表格

<table   align="center"  border="1px"  width="350px">
            <caption>武力值</caption>
            <tr>
                <td>100</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>400</td>
                <td>500</td>
                <td>600</td>
            </tr>
            <tr>
                <td colspan="3">3000</td>
            </tr>
        </table>

4.2.7 跨行的表格

<table   align="center"  border="1px"  width="350px">
            <caption>武力值</caption>
            <tr>
                <td>100</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>400</td>
                <td>500</td>
                <td rowspan="2">600</td>
            </tr>
            <tr>
                <td>700</td>
                <td>800</td>
            </tr>
        </table>

4.3、案例需求分析

4.4、案例代码实现

属性名	属性说明
src	指定需要展示的图片所在路径
alt	图片无法显示时的替代文本。
width	图片宽度单位：像素/百分比
height	图片高度单位：像素/百分比

2.3 代码实现

笔记

<table  align="center" width="500px" border="1px" cellspacing="0">
            <caption>武力值</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>武力值</th>
            </tr>
            <tr align="center">
                <td>001</td>
                <td>吕布</td>
                <td>男</td>
                <td>800</td>
            </tr>
            <tr align="center">
                <td>002</td>
                <td>赵云</td>
                <td>男</td>
                <td rowspan="2">700</td>
            </tr>
            <tr align="center">
                <td>003</td>
                <td>马超</td>
                <td>男</td>

            </tr>
            <tr align="center">
                <td>总武力</td>

                <td colspan="3">1500</td>
            </tr>
        </table>

一、表单

1.1、表单的作用

用来接收用户输入的数据，并将这些数据提交给服务器

1.2、HTML-表单输入项标签（input）

标签用于获得用户输入信息，type属性值不同，会成为不同的组件。最常用的标签。

input属性：

属性名	属性说明
type	定义表单输入项input的组件类型详见下一个表格type属性值说明
name	组件名。给组件起一个名字
value	组件默认值。
checked	设置单选框/复选框的默认选中状态
readonly	设置该标签的参数值只读，用户无法手动更改。参数名可以正常提交
disabled	设置该标签不可用（禁用），参数值无法更改。参数提交不了
size	组件的长度

input-type属性值说明：

属性值	说明
text	文本框，单行的输入字段，用户可在其中输入纯文本。
password	密码框。(加密)
radio	单选框。必须设置name的值一样（保证是一组的）
checkbox	复选框。必须设置name的值一样（保证是一组的）
submit	提交按钮。
reset	重置按钮。用于将所有的表单输入项恢复到默认状态
file	附件框。(用于文件的上传)
hidden	隐藏域。(正常提交参数名/值，但是又不想显示出来)
button	普通按钮(结合JS事件使用)
date	定义日期字段
number	定义数字字段
email	定义email地址字段
color	取色器

        <form>
            <input type="hidden" type="text" name="uid" value="66" />
            用户名：<input   name="uname" type="text" /><br />
            密码：<input name="pwd" type="password" /><br />
            性别：男：<input type="radio" name="sex" value="man"/>
                女：<input checked="checked" type="radio" name="sex" value="woman"/><br />
            爱好：
                抽烟:<input checked="checked" type="checkbox" name="hobby"                                        value="smoking"/>
                喝酒：<input type="checkbox" name="hobby" value="drinking"/>
                烫头：<input type="checkbox" name="hobby" value="tangtou"/>
            <br />
            头像：<input type="file" />
            <br />
            生日：<input type="date" />
            <br />
            年龄：<input type="number" />
            <br />
            邮箱：<input type="email" />
            <br />
            最喜欢的颜色：<input type="color"/>
            <br />
            工资：<input name="salary" value="20000" type="text" readonly="readonly" />
            <br />
            权限：<input name="quanxian" type="text" value="禁用" disabled="disabled" />
            <br />
            <input type="image"  src="../img/register.png" />
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
            <input type="button"  value="按钮" />
        </form>

1.3、HTML-表单输入项标签（select）

select属性：

属性名	属性说明
name	组件名。
Multiple	设置该标签选项全部显示，并且可以进行多选提交。(了解)

option属性：

属性名	属性说明
value	设置需要提交的参数值。
selected	设置某个列表项默认选中。

如果不设置value属性，参数值就是

如果设置了value属性，参数值就是value设置的值

学历：<select name="xueli">
                    <option value="ss">硕士</option>
                    <option value="bk">本科</option>
                    <option value="dz">大专</option>
                    <option value="xx" selected="selected">小学</option>
                </select>
            <br />

1.4、HTML-表单输入项标签（text-area）

文本域标签，可支持用户输入并提交大量纯文字数据。

textarea属性：

属性名	属性说明
name	组件名。
cols	设置文本域列
rows	设置文本域行数

    个人介绍：
            <textarea cols="30" rows="5" name="message">
            </textarea>

1.5、表单标签(form)-常用属性

from属性：

属性名	属性说明
action	将表单数据提交到何处。
method	将数据以何种方式提交。

<html>
    <head> 
        <meta charset="utf-8"> 
        <title>表单提交</title> 
    </head>
    <body>
        <form action="demo.html">
            First name: <input type="text" name="FirstName" value="Mickey"><br>
            Last name: <input type="text" name="LastName" value="Mouse"><br>
            <input type="submit" value="提交">
        </form>
        <p>点击"提交"按钮，表单数据将被发送到demo.html上。</p>
    </body>
</html>

1.6 标签span和div

div定义和用法

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记

，那么该标签的作用会变得更加有效。

用法

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的 class 或 id 应用额外的样式。

不必为每一个

都加上类或 id，虽然这样做也有一定的好处。

可以对同一个

元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

案例

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>div标签</title> 
    </head>

      <body>
        <p>这是一些文本。</p>
        <div style="color:#0000FF">
          <h3>这是一个在 div 元素中的标题。</h3>
          <p>这是一个在 div 元素中的文本。</p>
        </div>
        <p>这是一些文本。</p>
    </body>
</html>

span标签

span标签定义及使用说明

用于对文档中的行内元素进行组合。

标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对应用样式，那么元素中的文本与其他文本不会任何视觉上的差异。

标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

提示和注释

提示：被元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

案例

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>span标签</title> 
    </head>
    <body>
        <p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，
           我的父亲有 <span style="color:yellow;font-weight:bold">黄色</span> 的眼睛。
        </p>
    </body>
</html>

font-weight:bold 定义字体的粗细

font-weight

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。

行内元素：span

1、有多少内容占多大的空间

2、不会自动换行

块级元素：div

1、独自占一行

2、会自动换行

应用场景：根据特点去看

1、div一般用于网页的布局

2、span一般用于展示少量的信息

二、CSS

2.1、css简述

2.1.1、css是什么？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现F%AD%E8%A8%80/6805073)的一个应用）或等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

       1. 功能更加强大，样式更加丰富

         2. 和HTML代码分离，体现的代码的解耦性(方便维护)

2.1.2、css的引入

引入代码

2.2、css选择器

2.2.1、元素选择器

元素选择器根据元素名称来选择 HTML 元素。

案例

在这里，页面上的所有

元素都将居中对齐，并带有红色文本颜色

<!DOCTYPE html>
<html>
  <head>
      <style>
          p {
            text-align: center;
            color: red;
          } 
        </style>
  </head>

  <body>
      <p>每个段落都会受到样式的影响。</p>
      <p id="para1">我也是！</p>
      <p>还有我！</p>
  </body>
</html>

2.2.2、类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

案例

在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
              text-align: center;
              color: red;
            }
        </style>
    </head>
    <body>
        <h1 class="center">居中的红色标题</h1>
        <p class="center">居中的红色段落。</p> 
    </body>
</html>

2.2.3、id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

案例

这条 CSS 规则将应用于 id="para1" 的 HTML 元素

<!DOCTYPE html>
<html>
    <head>
        <style>
            #para1 {
              text-align: center;
              color: red;
            }
        </style>
    </head>
    <body>
        <p id="para1">Hello World!</p>
        <p>本段不受样式的影响。</p>
    </body>
</html>