HTML学习笔记

最新推荐文章于 2024-10-16 20:49:18 发布

qq_42559453

最新推荐文章于 2024-10-16 20:49:18 发布

阅读量160

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_42559453/article/details/107864034

版权

ch_01

meta：描述文档类型、字符编码

例：

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

设置网页描述信息（搜索引擎显示）

    <meta name="description" content="QQ邮箱，为亿万用户提供高效稳定便捷的电子邮件服务。你可以在电脑网页、iOS/iPad客户端、及Android客户端上使用它，通过邮件发送3G的超大附件，体验文件中转站、日历、记事本、漂流瓶等特色功能。QQ邮箱，常联系。" />

设置搜索关键字（通过搜索引擎输入这些内容找到网页）

块级标签

标题标签 <h1> </h1> …… <h6> </h6>
段落标签 <p> </P>
水平线标签 horizontal rule <hr width=“200px”>

unordered list

    <ul>
        <li> </li>  <!--list item-->
    </ul>

ordered list
- ```
    <ol>
        <li> </li>
    </ol>
```

描述标签

    <dl>   <!--definition list-->
        <dt>商品名称</dt>   <!--Definition Term-->
        <dd>针对当前商品一系列介绍</dd>   <!--definition description--> <!--会有缩进-->
    </dl>

分区标签
- ```
    <div> </div> 
```

行级标签
- span标签对文字特殊处理
  
  商品价格：<span style="color: #ff000a; font-size: 40px; font-family: 方正姚体,serif">1</span>元
- 图片标签 src:source
  
  <img src="../imgs/icon.png" height="100" align="center">
- 换行标签 blank rule
  
  <br>
- 粗体 bold
  
  <b>
- 斜体 italic
  
  <i>

ch_02

超链接

  <a href="test02.html" target="_blank">点击一下</a>

  <a href="http://www.baidu.com" target="_blank">

锚点：

  <a name="锚点名称">目标位置</a>

锚链接

  <a href="test02.html#anchor02">其他页面的锚点位置</a>

  <a href="mailto:wxwty168@gmail.com">联系我们</a>

表单

  <form action="信息提交地址" method="get/post">

  <input type="text" name="uname" placeholder="请输入用户名"> <br>

type值: 文本框：text; 密码框：password; 邮箱框：email; 数字框：number; 日期框：date; 颜色框：color

单选框：

  <input type="radio" name="sex" value="1" checked>

复选框：

  <input type="checkbox" name="hobby" value="1" checked>

下拉框：

  <select>
      <option value="1" selected>山东省</option>
  </select><br>

多行文本框：

  <textarea name='des' id="" cols="30" rows="5" readonly>协议内容</textarea><br>

表单内提交按钮

仅表单内可用

  <input type="submit" value="注册" name="" id="">	
  <input type="image" src="../images/cat.jpg">
  <input type="reset" value="重置" id="">

以上按钮必须在form表单中使用

全局可用按钮

  <button οnclick="">普通按钮</button>
  <input type="button" value="点击一下" οnclick="">

用onclick在js中定义点击动作

上传文件：

  <input type="file" name="fname" id=""><br>

隐藏域（提交用户不可见的信息）

  <input type="hidden" name="hidden" value="0123" id="">

只读：readonly;不可用；disabled 用js实现再可用

特殊符号
- 空格 &ensp; 半个空白位； &emsp; 一个空白位；  不断行的空白
- 大于 >
- 小于 <
- 引号 "
- 版权号 ©

ch_03

表格结构
- ```
    <table border="1" width="300px">
        <tr>
            <td align="center">01</td>
        </tr>
    </table>
```
- table的属性
  - border：用于设置表格边框宽度，单位px
  - width：用于设置表格的宽度，单位px
- td的属性
  - align：设置单元格中内容相对于单元格的位置
    - center：居中显示（内容较短，长度基本一致）
    - left：居左显示，default（用于内容长短不一时）
    - right：居右显示（数字，如年龄）
- td是显示内容的容器
表格的合并（放在td里）
- 行合并：上下方向的单元格合并rowspan=“n”（合并同一列n行的单元格）
- 列合并：左右方向的单元格合并colspan=“n”（合并同一行n列的单元格）
表格的分区
- caption（标题）、thead、tbody、tfoot
  - 注：thead中将td标签换成th标签
  - 优势：分区设置样式
表格布局原则：非字形

ch_04

iframe框架

优点: 内嵌非常灵活、可以在网页的任何位置使用

  <a href="test01.html" target="mainFrame">菜单一</a>
  <a href="test02.html" target="mainFrame">菜单二</a>
  <a href="http://baidu.com" target="mainFrame">菜单三</a>
  <br>
  <iframe src="test01.html" name="mainFrame" frameborder="1" height="200" width="400" scrolling="no"></iframe>

ch_05

行内样式
- ```
    <div style="color:red;"></div>
```

内部样式

    <head>
        /*内部样式*/
        <style>
            选择器{
        		属性：属性值
            }
        </style>
    </head>

标签选择器：选择页面中的某一类标签

  div{/*标签选择器*/
      color:red;
      font-size: 25px;
      font-family: 宋体,serif;
      background-color:lightblue;
  }

类选择器

    .green{
        color: green;
        font-size: 30px;
    }
    ---------标签的设置--------
    <div class="green">内容</div>
    <p class="green">段落文字</p>

id选择器：

    #ul1{/*id选择器*/
        background-color: green;
        font-size: 30px;
    }
    ---------标签的设置----------
    <ul id="ul1">
            <li>菜单1</li>
        <li>菜单2</li>
    </ul>

组合选择器
- ```
  div,p,#ul1,.red{
  }
```

外部样式

在html页面中引入css文件

  <head>
      <link rel="stylesheet" href="style.css">
  </head>

样式的优先级
- id选择器 > 类选择器 > 标签选择器
- 行内样式(直接在标签内设置样式) > 内部样式和外部样式
  - 内部样式和外部样式
    - 就近原则（覆盖之前的）
样式的继承
- 父标签的样式会自动被继承到后代标签

常用样式

字体样式

  color: saddlebrown;
  font-size: 30px;
  font-family: 宋体;
  font-style: italic;
  font-weight: 900;/*用于设置粗体,取值100-900*/
  text-decoration: underline;/*下划线,default为none*/
  cursor: pointer;/*放上去鼠标变成手形*/

列表样式
- ```
  li{
      float: left;/*横向浮动显示*//*right时从右往左排列*/
      width: 150px;/*li标签宽度*/
      color: red;
      font-family: 隶书;
      list-style: none;/*前面的图标为空*//*decimal为数字*/
  }
```
- float：浮动显示
  - 可以使li标签横向显示
  - left：li标签从左往右依次显示
  - right：li标签从右往左依次显示
- list-style：用于设置li标签前面的图标
  - none：空白
  - decimal：十进制（数字）
  - disc：实心圆点
  - circle：空心圆圈
  - square：正方形
- td内居中 textalign

ch_06

元素的隐藏和显示

    div{
        display: inline;/*none:隐藏, block:以块级元素显示, inline:以行级元素显示*/
    }

背景样式

    <body bgcolor="aqua" background="../images/cat.jpg">

某个模块的背景设置

    div{
        width: 400px;
        height: 200px;
        background-color: saddlebrown;
        background-image: url("../images/lama.png");
        background-repeat: no-repeat;
        ----适用于图片尺寸小于div尺寸	
        ----o-repeat
        ----repeat(default)
        ----repeat-x
        ----repeat-y
        background-position: 20px 30px;   
        ----出示图片起始像素位置
        background-attachment: fixed;
        ----适用于页面出现滚动条时
        ----fixed:页面滚动,背景不动（静态）
        ----scroll:页面滚动,背景随着滚动（动态）
    }

其他设置方式

    div{
        background-image: url(".png") no-repeat fixed 20px 30px;
    }

全屏背景图片

    <style>
        body{
            background-image: url("../images/cat.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
    </style>

按百分比社会之div的高度与宽度

注：！！！！所有的父元素height和width必须设置百分比，包括html标签

html,body{
      width: 100%;
      height: 100%;
}
div{
      width: 50%;/*子标签设置百分比,所有的父标签都必须要设置*/
      height: 50%;
}

位置样式
- position：用于设置元素的显示位置
  - static：静态 default 按照文档流从上往下，从左往右的方式进行显示
  - relative：相对定位不设置top和left属性时按照文档流的方式进行显示，设置后相对于原来位置发生偏移
  - absolute：绝对定位元素会脱离文档流即不在页面中占用任何空间，其后的内容会显示在该位置上
  - 设置了相对或者绝对后，元素可以通过top和left进行偏移操作
    - top：距离上面的距离（向下偏移）
    - left：距离左面的距离（向右偏移）
  - relative：
    - 相对定位是对于原有位置进行偏移
    - 偏移后依然占用原有位置
  - absolute：
    - 绝对定位
      - 如果该元素父标签设置了relative或absolute，则该元素相对于父元素左上顶点进行偏移
      - 否则，即设置了static（default），则浏览器会一直往上找设置了relative或者absolute的祖先标签，按照其位置进行偏移（找不到则按body标签来定位）

超链接样式

  <style>
          a:link{/*没有访问过时*/
          color:green;
          text-decoration:none;/*无下划线*/
          }
          a:visited{/*访问之后*/
          color: orange;
          }
          a:active{/*鼠标点击 未放开*/
          color: black;
          }
      a:hover{/*鼠标悬浮在上方时*/
          color:purple;
      }
  </style>

称【选择器：状态】为伪类样式
如果我们只想让li标签下的a 标签应用这些样式
- li a:link{}
- 以上表示li标签的后代选择器，只影响li标签下的a标签

盒子模型
- ```
    <body>
        <div>
            <img src="../images/cat.jpg" alt="" height="200">
        </div>
    </body>
```
- div是盒子，img是盒子中内容
- 针对这个盒子，即div，我们可以设置三个方面的样式
  - margin：外边距
  - border：div的边框属性
  - padding：内填充
- margin：控制div和他的父级或者同级标签的距离，即控制div在页面中的显示位置
  - 四个方向分开设置
  - margin-top: 50px;
  - margin-left: 30px;
  - margin-right: 10px;
  - margin-bottom: 10px;
  - 通常只有left和top生效
  - div高度会随内容扩展
  - 一起设置
  - margin: 50px 50px 30px 50px;
  - 上右下左设置，通常只有左边和上面生效
  - 设置上左
  - margin: 50px 30px;
  - 上50 左30
  - 设置上边距，左右居中
  - margin: 50px auto;
  - border边框
    - border-width: 3px;
    - border-color: red;
    - border-style: solid;
    - border: red 3px solid;
      - 可以分方向：border-top: red 3px solid;
  - padding内填充：div和其中内容的距离
    - padding-top: 10px;
    - padding-left: 20px;
    - padding-right: 20px;
    - padding-bottom: 100px;
      - 左上填充一般都生效
      - 如果没有设置div高度，则buttom生效，如果设置了高度，buttom不生效
      - 右填充一般不生效，除非单独设置
    - padding: 100px 200px 100px 200px;
      - 上右下左
    - padding: 100px 200px;
      - 上下100，左右200
  - 浮动属性
    - float：让块级元素在行内显示，一般用于div的行内显示
    - float的值
      - left：左浮动，从左往右显示
      - right：右浮动，从右往左显示
    - float特点
      - 元素设置为left或者right后，元素会显示为左浮动或右浮动
      - div块级元素设置为浮动后，失去换行显示特性，变为行内元素
      - 会紧贴上一个同方向浮动元素显示，如果宽度不够，自动换行
      - 只占据行内空间，div多大就在页面中占用多大的空间，文字会有环绕显示的效果
  - 浮动后的元素强制换行
    - 如果前一个元素设置了float，只占据行内空间，其后没有设置浮动的div会同行显示，可能会覆盖
    - 使用clear属性强制换行
      - clear属性用于清除前面元素的浮动对当前元素的影响
        left：清除左浮动影响
        right：清除右浮动影响
        both：清除所有浮动影响
    - 默认情况下body有一个外边距8px
      - 需要div占据全屏，需要取消外边距（去边框）
      - *{ /*防止自动留白*/ margin: 0px; padding: 0px; }