九品知码酱
九品知码酱

HTML学习笔记

HTML学习笔记

一、HTML基本结构

1.文档类型声明

  • 作用：告诉浏览器按当前标准解析代码

  • HTML5 不区分大小写，双标记结束标签可以省略（不推荐）

  • HTML4.01 严格（strict） 过渡（transitional） 框架（frameset）

  • XHTML 严格的HTML，区分大小写，双标记结束标签必须写

  • doctype不是标签

  • DTD 等同于文档类型声明 DOCTYPE

2.head

  • 作用：

    • 标明作者信息、关键字、描述

    • 设置字符集、引入外部文件

    • 标题（只有标题能被用户看到）

3.body

  • 作用： body里边的所有信息都是展示给用户的 此区域内展示HTML的所有内容

二、常用标签

1.标题标签

  • 作用: 设置标题

  • 说明：h1~h6，h1最大，h6最小，默认加粗居左 块级元素

  • 属性：

    • align设置内容水平对齐方式

      • left （左对齐、默认值）

      • center （居中对齐）

      • right (右对齐)

2.图片

  • 作用：引入图片

  • 说明：src属性必须得有，行内元素

  • 属性：

    • src：图片路径

    • alt：图片加载失败时提示

    • title：鼠标悬停时出现的文字

3.超链接

  • 作用：跳转到目标（地址、位置、文件等）

  • 说明：行内元素

  • 属性：

    • href：链接目标

    • target：打开方式（在哪个窗口打开）

      • _blank （新窗口打开）

      • _self （当前窗口打开 默认值）

  • 应用：

    • 锚点定位

      • a标签到a标签

      • a标签到块级元素

      • 空标签 点击返回顶部

4.段落标记

  • 作用：标记一个段落

  • 说明： 块级元素

  • 属性：

    • align：水平对齐方式（同上）

5.强制换行


  • 作用：强制换行

  • 说明：没有任何属性

6.水平分割线

  • 作用：在网页中添加水平分割线

  • 说明：块级元素

  • 属性：

    • color：设置分割线的颜色

      • 关键字：red、blue、yellow...

      • rgb颜色：#000000...

    • width：设置水平线的长度，默认单位px

    • size：设置水平线的粗细，默认单位px

    • align同上

7.文本格式化标签

加粗bold 倾斜italic 下划线underline 删除线 强调，倾斜显示 强调，加粗显示 上标 下标 大号字体 小号字体

双标记，行内元素

三、列表

块级元素

1.无序列表

 <ul>
     <li>li>
     <li>li>
     <li>li>
 ul>

  • 效果

  • 属性：

    • type：设置项目符号

      • disk

      • circle

      • square

      • none

2.有序列表

 <ol>
     <li>li>
     <li>li>
     <li>li>
 0l>

  • 效果

  • 属性：

    • type："1/a/A/i/I"设置序号符号

    • reversed："reversed"倒序，当属性等于属性值时，可以简写为属性

    • start="number" 设置从第几个开始

3.自定义列表

     <dl>
         <dt>主题一dt>
         <dd>描述一（多个描述）dd>
         <dt>主题二dt>
         <dd>描述二dd>
     dl>

  • 一般用来放置图片以及相关描述

四、表格

 <table>
  <caption>表格的标题caption>
     <tr>
         <th>特殊单元格th>table header
         <th>替换tdth>
         <th>默认水平居中且加粗th>
     tr>
     <tr> 行 table row
         <td>列 单元格 table data celltd>
         <td>td>
         <td>td>
     tr>
     <tr>
         <td>td>
         <td>td>
         <td>td>
     tr>
 table>

  • 效果：

     
     

  • 作用：向用户展示数据

  • table属性：

    • border 设置边框（默认没有），像素单位px;

    • align 水平对齐方式（表格）

    • width 宽度

    • height 高度

    • cellpadding 单元格内边距

    • cellspacing 单元格间距

    • bgcolor 背景颜色

    • background 背景图片

    • bordercolor 边框颜色

  • tr的属性

    • height 行高

    • align 行内容的水平对齐方式

    • valign vertical 行内容的垂直对齐方式，取值top/middle/bottom

  • td的属性

    • width 宽度

    • height 高度

    • align 单元格内容的水平对齐方式

    • valign 单元格内容的垂直对齐方式

    • bgcolor 背景颜色

    • background背景图片

    • colspan 水平合并（跨列） 删除同一行的td

    • rowspan 垂直合并（跨行）删除下面行的td

五、表单

块级元素

  • 作用：采集数据，将数据提交到服务器

  • 说明：不能相互嵌套，一个HTML文件可以包含多个form表单

  • 属性

    • name：表单名称

    • method：提交方式，默认值get

      • get：提交数据不安全，提交的数据会在地址栏中显示；get提交的数据大小有限制（不能超过2kb）；

      • post：比较安全；提交的数据理论上没有限制；

    • action：提交的地址

  • 表单元素

    • 单行文本框：

    • 密码框：

    • 单选框：

    • 多选框：

    • 提交：

    • 重置：

    • 无功能按钮：

      • input type="button" value="无功能">

    • 图片提交按钮：

    • 文本框：