Zzhaozhao的学习笔记-html

Zzhaozhao
48 阅读5分钟

Html

每周一句：百步之内，必有芳草

1.Web标准

  1. 组成：主要包括结构、表现和行为三个方面
标准说明
结构结构用于对网页元素进行整理分类 指的是html
表现表现用于设置网页元素的版式、颜色、大小等外观样式
行为行为是指网页模型的定义以及交互的编写

2.html骨架

2.1.文档类型声明标签

  1. ​

    文档类型声明，作用就是告诉浏览器使用的是那种HTML版本来显示页面

    ​

  2. 不属于html 属于声明标签

2.2.lang语言种类

  1. 作用：用来定义当前文档显示的语种

    1. en定义语言为英语
    2. zh-CN定义为中文

  2. 作用：让浏览器知道是中文还是英文

2.3.字符集

  1. 标签的chatset用来定义字符集

3.标签

3.1.标题标签

<h1> - <h6>

3.2.段落标签

// 会根据浏览器的大小自动换行
// 段落之间有间隙
<p>段落标签</p>

3.3.换行标签

// 强制换行
<br/>

3.4文本格式化标签

// 粗体
<strong></strong> (推荐)
<b></b>
​
// 斜体
<em></em>(推荐)
<i></i>
​
// 删除线
<del></del>(推荐)
<s></s>
​
// 下划线
<ins></ins>(推荐)
<u></u>
​

3.5.盒子标签

// 独占一行
<div></div>
​
// 一行可以放多个
<span></span>

3.5.图像标签

// 图像标签
<img srv="图像URL">
  1. 参数：
标签名作用
src图片路径
alt替换文本（图片不显示）
title提示文本（鼠标放到文件）
width宽度
height高度
border边框

  1. 注意：

    1. 多个属性src放最前面
    2. 采用key-value
    3. 剩下的参数不分顺序

3.6.超链接标签

<a href="跳转目标" target="窗口的弹出方式"></a>
  1. 参数：
标签名作用
href跳转到的链接
target（默认当前窗口：self）跳转目标的窗口方式（当前页面self/新建窗口_blank）

  1. 分类

    1. 内部链接：href="文件名"

    2. 外部链接：href="URL"

    3. 空链接：href="#" （用#代替）

    4. 下载链接：href="iimi.zip"

    5. 网页元素链接：给元素添加链接

      <a href="www.baidu.com"> <img src="img.jpg"> </a>

    6. 锚点链接：快速跳到某个页面的位置

      <a href="#two"></a>
​
<p id="two"></p>

3.7.特殊字符

  1. &nbsp；：空格
  2. &lt；：小于
  3. &gt；：大于
  4. 什么时候用什么时候自己查

3.8.表格标签

  1. 基本语法：

    1. '
      ' 定义表格的标签
    2. ''定义行 在table里面
    3. ''定义列 在tr里面
    4. ''表头标签 ，加粗居中

  2. 属性：

    属性名属性值描述
    alignleft、center、right规定表格相对周围元素的对齐方式
    border1或""规定表格单元是否拥有边框，默认为""，表示没有边框
    cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素
    cellspacing像素值规定单元格之间的空白，默认2像素
    width像素值或百分比规定表格的宽度

  3. 案例

        <table align="center" border = 1 cellspacing=0 cellpadding = 13> 
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="../vue/demo/Vue3-big-event-admin/src/assets/avatar.jpg" alt="箭头"></td>
            <td>345</td>
            <td>5</td>
            <td><a href="http://www.baidu.com" target="_blank">baidu1</a></td>
        </tr>
    </table>

  4. 表格结构标签

    1. thead：必须拥有th
    2. tbody：放入主体
    3. 都要放入带table

  5. 合并单元格

    1. 方式：

      1. 跨行合并：rowspan="合并单元格的个数"
      2. 跨列合并：colspan="合并单元格的个数"

    2. 目标单元格：

      1. 跨行：在最上单元格
      2. 跨列：在最左单元格

    3. 步骤

      1. 先确定跨行还是跨列
      2. 写合并方式 = 合并的数量
      3. 删除多余单元格

3.9.列表标签

  1. 无序列表：

    1. ul嵌套li
    2. ul中只能嵌套li
    3. li里面可以放入
    4. 会带有自己的属性，需要css中清除

  2. 有序列表

    1. ol嵌套li
    2. ol中只能嵌套li
    3. li里面可以放入
    4. 会带有自己的属性，需要css中清除

  3. 自定义列表

    1. dl嵌套dt 和dd

    2. dt是大哥 dd是小弟

      <dl>
        <dt>关注我们</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
    </dl>

    3. dl只能嵌套dt 和dd

    4. dt对应多个dd

3.10.表单域

  1. 概念：将表单数据发送到后台

3.11.表单控件

  1. input输入表单元素

    1. 语法：

      <input type="">

    2. t ype属性：

      属性值描述
      button定义可点击按钮
      checkbox定义复选框
      file定义输入字段和“浏览”按钮，供文件上传
      hidden定义隐藏的输入字段
      image定义图像形式的提交按钮
      password定义密码字段，该字段中的字符被掩码
      radio定义单选按钮（name为同一个值才能单选）
      reset定义重置按钮，重置会清除表单中所有的数据
      submit定义提交按钮，提交按钮会把表单数据发送到服务器
      text定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

    3. 其他属性：

      属性名描述
      name定义input的元素名
      value定义input元素的值
      checked规定此input元素首次加载被选中
      maxlength规定输入字段中的字符最大长度

    4. label标签

      1. label标签为input元素定义标注

      2. label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转移到对应的元素身上

         <form action="ces1">
        <label for="sex">男</label>
        <input type="radio" name="sex" id="sex">
    </form>

      3. 注意：for和id一致

  2. select标签

    1. select下拉菜单，可节省页面空间

      <select>
            <option >1</option>
            <option selected>2</option>
            <option >3</option>
            <option >4</option>
        </select>

    2. 注意

      1. 至少包含一堆option
      2. 可在option中定义selected吗，当前项变为默认选中的项

  3. textarea文本域

    1. 可大量书写数据

       <textarea rows="20" cols="1000">
            测速
 </textarea>

    2. 注意：

      1. rows：显示多少行
      2. cols：每行多少字符
avatar
文章
阅读
粉丝