web前端学习之路-第二天

今天继续学习html，依然跟着菜鸟教程边学边练，然后再总结。
废话不多说，开始！

CSS简单介绍

这部分的内容应该是有单独介绍的，不过既然这里提了，那么就先了解一些简单的。

使用方式

• 内联样式- 在HTML元素中使用”style” 属性
• 内部样式表 -在HTML文档头部 区域使用

内联样式

先看看代码吧

<p style="background: black;
    margin-top: 20px;
    text-align: center; 
    font-family:arial;
    color:red;
    font-size:20px;">一个段落。</p>

style来设置样式
- background：设置背景颜色
- margin-top：设置距上方的距离，同样可以设置其他方向
- text-align：设置文本对齐方向，这里设置的是居中
- font-family：设置字体样式
- color：设置字体颜色
- font-size：设置字体大小

内部样式和外部引用

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过

图像

这个之前有提过，这里无非就是再增加点新的，回顾一下

<img src="images/hackanm.gif" alt="computer man" width="30px" height="30px">

• src：图片的地址，从代码可以看出，这是可以加载动图，和加载正常图片的方式是一样的
• alt：当图片无法正常加载时，会显示该文本用来提示
• 图片宽高，最好指定图片宽高，如果不指定有可能破坏整体布局

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

图像映射

<!-- 设置可点击区域 -->
    <img src="images/planets.gif" alt="planets" width="145px" height="126px" usemap="#planetmap">

    <map name="planetmap">
        <!-- shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位） -->
        <area shape="rect" coords="0,0,82,126" href="sun.html" alt="sun">
        <!-- <area shape="circle" coords="90,58,3" href="Mercury.html" alt="Mercury">
        <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"> -->
    </map>

• usemap：指定了对应的map
• map：定义图像地图
• area：定义图像地图中的可点击区域
• shape：指定了可点击区域的形状
• coords：链接区域的坐标，不同的形状也对应不同的坐标形式
• href：就是点击之后要跳转的界面

表格

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup>	定义表格列的组
col	定义用于表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

这部分内容个人觉得比较简单，主要是表格的合并，对于练习即可。

列表

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义列表
dt	自定义列表项目
dd	定义自定列表项的描述

对于有序列表，有个type属性
type类型：1，A，a，I，i，设置不同的属性，对于列表前面的标签也不同，列表可以进行嵌套

表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 form 来设置

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
fieldset	定义了一组相关的表单元素，并使用外框包含起来
legend	定义了 元素的标题
select	定义了下拉选项列表
option	定义下拉列表中的选项
button	定义一个点击按钮

<form action="">
        用户名：<input type="text" name="user" value="hha"><br><br>
        密码：<input type="password" name="pwd"><br>

        <!-- 单选按钮 -->
        <br>性别：<br>
        男：<input type="radio" name="sex" value=man><br>
        女：<input type="radio" name="sex" value="women" checked><br>

        <br>爱好：<br>
        <input type="checkbox" name="interest" value="篮球">篮球<br>
        <input type="checkbox" name="interest" value="足球" checked>足球<br><br>

        地址：
        <select name="地址" id="">
            <option value="bj">北京</option>
            <option value="" selected>上海</option>
            <option value="">广州</option>
            <option value="">深圳</option>
        </select>

        <br><br>
        <textarea name="" id="" cols="30" rows="10">请输入自我描述</textarea>

        <br><br>
        <input type="button" value="创建" name="" id="">
        <br><br><input type="submit" value="提交">
        <input type="reset" value="重置" name="" id="">
    </form>
    <br><br>
    <!-- 带边框的表单 -->
    <form action="">
        <fieldset>
            <legend>这是用户的边框</legend>
            用户名：<input type="text" name="" id=""><br><br>
            密码：<input type="text">
        </fieldset>
    </form>

    <p><b>注意：</b>表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符</p>

根据type的类型有以下几种样式
- text：普通文本，这是设置value之后，相当于默认输入的
- password：密码，不会明文显示，一般显示星号或圆点
- radio：单选按钮，用checked可设置默认选中
- checkbox：复选框，可以多选
- select：下拉列表，用selected设置默认选中
- option：下拉列表中的每一项
- textarea：文本域
- button：创建一个按钮
- submit：提交按钮，可以跳转到对应php文件进行交互
- reset：重置，点击之后会恢复填写之前的状态

---

以上是我今天所学，刚学两天就被告知要做小程序，所以html可能就要先放放，明天主攻小程序，加油。
资源地址：https://download.csdn.net/download/lbqcsdn/10443353