首页 > > 网页制作 > css >

HTML学习笔记

2018-06-24 00:56:32来源：未知阅读 ()

时间：2016-10-23 17:25

——常用标签

字体标签：
      <font> </font>
      size：范围1 ~ 7，当超出最大值，默认为7。
      color：两种表示方式，1、英文单词 red green black等，2、十六进制表示方法，第一位为#，每两位表示一个颜色。

标题标签：
      h1 ~ h6
      <h1> </h1>
      从h1到h6，大小为从小到大，是行级元素。

水平线标签：
      <hr />
      size：表示水平线粗细。
      color：表示水平线颜色。

特殊字符：
      < <
      > >
      空格  
      & amp;
      ? &cpy;

列表标签：
      定义列表：
          <dl> </dl>
              <dt> </dt>：标题
              <dd> </dd>：列表
      有序列表：
          <ol> <li> </li> </ol>
          type：1、a、i
      无序列表：
          <ul> <li> </li> </ul>
            type：空心圆circle、实心圆disc、实心正方形square、默认disc。

图片标签：
      <img src="URL" />
      width：图片的宽度。
      height：图片的高度。
      alt：图片上显示的文字，当图片正常显示时，鼠标移入显示文字，当图片非正常显示时，则显示该文字。

超链接标签：
      <a> </a>
      链接资源：
          <a href="连接到资源的路径">显示在页面上的内容</a>
        href：链接的资源地址
          target：设置打开方式，默认在当前页打开。
              _blank：在新窗口打开。
              _self：在当前页打开（默认）。
          当href不设置值时，需要加一个占位符“#”。
      定位资源：
          如果想要进行定位，则需要先定义一个锚点：
              <a name="top">顶部</a>
          回到锚点：
              <a href="#top">回到顶部</a>

原样输出：
      <pre> </pre>

表格标签：
      对数据进行格式化，使数据显示更加清晰。
      <table> </table>
            border：表格线粗细。
          bordercolor：表格线颜色。
            cellspacing：单元格线间隙。
            width：表格宽。
          height：表格高。
      <tr> </tr>
          align：center、left、right
      <td> </td>
      <th> </th>
          自动加粗、居中。
      <caption> </caption>
          标题标签。

    合并单元格：
          rowspan：合并行
          colspan：合并列

    表单标签：
    可以将数据提交到服务器。
      <form> </form>：定义一个表单的范围。
      输入项：可以输入内容或者选择内容的部分。
          大部分输入项可以使用input标签进行封装。
              <input type="输入项的类型" />
          type：
              text：普通文本框。
              password：密码框。
              radio：单选框。
                  必须有name属性和value属性，并且name值必须相同。
                  默认值：checked="checked"，表示默认选中。
              checkbox：复选框
                  必须有name属性和value属性，并且name值必须相同。
                  默认值：checked="checked"，表示默认选中。
              file：文件上传
              button：普通按钮
            submit：提交按钮
                  提交时如果表单元素没有name值，则无法提交。
              reset：重置按钮
          下拉框：
              <select>
                  <option></option>
                    <option></option>
                </select>
              select必须有那么，option必须有value。
              默认值：selected="selected"，表示默认选中。
              multiple：将所有的option全部显示。
          文本域：
              <textarea></textarea>
              col：列
              row：行
          隐藏项：
              不会显示在页面上，但是存在于HTML代码中。
              <input type="hidden" />
      form表单中的属性：
          action：提交地址，如果不写，则默认提交到当前页面。
          method：提交方式
              常用的方式：get和post，默认get请求。
          面试题：
              get请求和post请求的区别：
                  get请求地址栏会显示提交的数据，而post不会携带。
                  get请求不安全，post请求安全性较高。
                  get请求有数据大小的限制，而post请求数据大小无限制，文件上传需要post请求。
          enctype：
              一般请求不需要这个属性，做文件上传时需要这个属性。

      使用图片作为提交按钮：
          <input type="image" src="图片路径" />

HTML中其他标签的使用：
      <b>：加粗
      <s>：删除
      <u>：下划线
      <i>：斜体
      <pre>：原样输出
      <sup>：上标
      <sub>：下标
      <p>：段落标签
      <div>：行级元素
      <span>：块级元素

头标签：
      <head> </head>
      <title>：网页标题
      <base>：为页面上的所有链接规定标题栏显示的内容和默认地址或默认目标。（target属性）
          <base href="http://www.baidu.com" />，则页面中所有的超链接地址都以"http://www.baidu.com"开始
          如果没有base标签，则相对路径以当前文件开始，绝对路径根据指定路径进行访问。
      <link>：定义文档与外部资源的关系。
    <meta>：可以提供有关页面的基本信息。
          <meta http-equiv="refresh" content="3;url=http://www.baidu.com" />

框架标签：
      <frameset> </frameset>
          rows：按行划分。
              <frameset rows="80,*"> //将页面划分为两行，第一行的值是80，其余为第二行。
          cols：
              <frameset cols="80,*" > //将页面划分文两列，第一列的值是80，其余为第二列。
      <frame> </frame>
          显示具体页面。
          <frame name="页面名称" src="页面路径">

      当使用框架标签时，标签不能写在body中，使用了框架标签时，需要把body标签删除。
      如果点击左边的超链接想要让内容显示在右边的页面中，可以将超链接的target的值设置为右边frame的name值。

——路径

绝对路径：
      从根路径开始，完整的路径。
相对路径：
      一个文件相对于另外一个文件的位置。
      三种写法：
          在同一目录下：直接写文件名称。
          图片在当前HTML文件的下层目录：从当前目录开始精确到图片文件。
          图片在当前HTML文件的上层目录：一个../就表示一个上层目录，两层目录用../../表示。

——HTML总结

1、HTML操作思想
      使用标签把要操作的数据包围起来，然后通过修改标签的属性值，来实现标签内数据样式的变化。
2、font标签
      属性：
          size：取值范围1~7
          color：可以使用英文单词，或者十六进制数字。
3、标题标签
      h1~h6，由大到小。
4、注释
      
5、列表标签
      自定义列表：
          <dl>
              <dt> </dt>
              <dd> </dd>
          </dl>
      有序列表：
          <ol>
              <li> </li>
          </ol>
      无序列表：
          <ul>
              <li> </li>
          </ul>
6、图片标签
      <img src="路径" width=" " height=" " alt=" "/>
      alt属性浏览器兼容性差。
7、路径
      相对路径：
          同一级目录
          下一级目录
          上一级目录 ../
      绝对路径
8、超链接标签
      <a href="路径" > </a>
          target属性：_blank和_self
9、表格标签
      <table>
          <tr>
              <th> </th> 默认居中、加粗
          </tr>
          <tr>
              <td> </td>
          </tr>
      </table>
10、表单标签
      <form> </form> 表示表单范围
      属性：
          action：提交地址
          method：提交方式
              get和post的区别。
          enctype：上传时使用
      输入项：
          必须写name属性，否则无法提交参数。
          文本框：text
          密码：password
          单选框：radio
              name必须相同，有默认值。
          复选框：checkbox
          下拉框：<select> <option> </option> </select>
          文本域：<textarea> </textarea>
              rows、cols、name
          文件：file
          提交按钮：submit
          重置按钮：reset
          使用图片提交：<input type="image" src="" />
          隐藏项：hidden
          普通按钮：button
11、div和span
      div：行级元素，自动换行
      span：块级元素，在一行显示
12、框架标签
      <frameset> <frame> </frame> </frameset>

——CSS

1、CSS简介
        Cascading Style Sheets是层叠样式表，用来定义网页的显示效果，可以解决HTML代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能，简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

2、CSS和HTML的结合方式（四中结合方式）
      （1）在每个HTML标签中都有一个style属性，可以通过这个属性把CSS和HTML结合在一起。
          <div style="" > </div>
    （2）使用HTML的<style>标签，<style>标签要写在head标签内。
          <style type="text/css">
              CSS代码;
          </style>
      （3）在style标签中使用语句
          @import url(css文件的路径) //不需要双引号
              需要创建一个css文件。
          缺点：兼容性差
      （4）使用<link>标签引入外部CSS文件。（常用）
          <link rel="stylesheet" type="text/css" href="CSS文件路径" />
3、CSS样式优先级
      样式优先级：
          由上到下，由外到内，优先级由低到高。
4、CSS选择器
      选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。
      CSS选择器的类型：
          标签选择器
          类选择器
          id选择器
      选择器优先级：
          style属性 > id选择器 > 类选择器 > 标签选择器
5、CSS扩展选择器
      关联选择器：
          标签是可以嵌套的，由两个多或多个选择器之间产生的关系，就是关联选择器。
          关联选择器使用空格进行分隔。
          如果指定为子元素的选择器，需要加“>”来指定。
      组合选择器：
          对多个不同选择器进行相同样式设置的时候使用组合选择器。
          组合选择器使用逗号进行分隔。
      伪元素选择器：
          在HTML中预先定义好的一些选择器，或者说当前元素处于的状态。
          伪元素选择器使用冒号进行定义。
        比如超链接有四个状态：
              原始状态：:link
                悬停状态：:hover
                点击状态：:active
                点击之后的状态：:visited
6、CSS的盒子模型
      边框：
          border: 统一设置
          border-top: 上边框
          border-bottom: 下边框
          border-left: 左边框
          border-right: 有边框

          取值：
              width: 边框宽度
              style: 边框样式
              color: 边框颜色

      内边距：
          padding: 统一设置
          padding-top: 上边距
          padding-left: 左边距
          padding-bottom: 下边距
          padding-right: 右边距

          属性只有一个：length
          需要注意的是：
                当实际长度超出容器长度时，以实际长度为准。
              当实际长度不足容器长度时，以容器长度为准。

      外边距：
          margin: 统一设置
          margin-top: 上边距
          margin-bottom: 下边距
          margin-left: 左边距
          margin-right: 右边距

          取值：
              auto：取计算机值
              length：自定义长度

7、浮动
      float属性：
          none：默认值，对象不浮动。
          left：向左浮动。
          right：向右浮动。

8、定位
      position属性
          static：默认值，无特殊定位，对象遵循HTML定位规则。
          absolute：将对象从文档流中脱出，使用left、right、top、bottom等属性进行绝对定位。
          relative：对象不可层叠，但会根据left、right、top、bottom等属性在正常文档流中进行相对定位。

      absolute和relative的区别：
          absolute会把对象从文档流中脱出，相当于浮动，可以使用top等属性进行定位。
          relative不会把对象从文档流中脱出，而是依然保留对象位置，也可以进行定位。