HTML个人学习笔记-仅供参考

概述

• 超文本

  在网页中显示的内容不局限于文本，还可以显示图片、视频、音频、超链接、列表等内容。

• 静态网页与动态网页的区别

  静态与动态的区别不是由是否存在动态效果、动画效果决定的，而是由数据决定的。一个网站是否能够动态的显示数据、动态的进行更新才是衡量动态网页的标准

• html语言的特点

  • 标签要正确嵌套
  • 父子集标签在嵌套书写时，要注意缩紧
  • html中的标签名不区分大小写，规范下全小写
  • html中的标签分两种：双标签和单标签
    • 双标签：一对标签，有开标签、关标签组成，其中，关标签内要有斜杠
    • 单标签：没有开关之分，但是规范下，也要写斜杠
  • html中的根标签可以存在多个
  • 网页文件的后缀名可以为html或htm，在浏览器中运行

html常用标签

• 标题标签：h1～h6

  • 特点：

    文本自带加粗，常用的是h1～h3

• 段落标签：p

  • 特点：

    表示网页的正文内容，正常文本显示

• 换行标签：br

  • 特点：

    显示内容时实现换行显示，是单标签

• 分割线标签：hr

  • 特点：

    分割内容，是单标签

  • 属性：

    • width：宽度，默认单位是px，也可以给百分比
    • size：厚度，取值1~7，值越大越厚
    • color：颜色，取值颜色的英文单词或#加red、green、blue三色的16进制值或rgb(0~255,0~255,0~255)

• 标签属性的语法格式：

  • 标签属性写在标签的行间，双标签写在开标签，单标签写在内部
  • 标签属性也可以称为行间属性
  • 标签属性名 = “值”，一组与一组之间使用空格隔开，第一组属性要与标签名以空格隔开

• 字体标签：font

  • 特点：

    用于承载不同样式的文本

  • 属性：

    • size：字体大小，取值范围1～7，值越大，字越大
    • color：字体颜色，目前也只需要记住单词和16进制代码写法即可

• 字体加粗标签：b

• 字体倾斜标签：i

• 图片标签：img

  • 属性：

    • src：图片的路径，可以是相对路径，也可以是绝对路径
    • width：图片的宽度
    • height：图片的高度
    • width和height同时给定，按照给定值显示，如果只给一边另一边也会等比例缩放
    • art：当图片加载失败时，为了增加用户体验，显示占位文本
    • title：鼠标悬停在标签上时，出现的文本提示

• 超链接标签：a

  • 属性：

    • href：超链接的链接地址，可以是相对路径也可以是绝对路径，注意：在绝对路径书写时除了域名还需要加上网络传输协议
    • target：链接的打开方式、位置，默认值为_self刷新自身，我们改值为_blank之后，可以让链接在新窗口打开

• 列表标签：有序ol-li，无序ul-li

  • ol和ul本身是不会显示的，在页面中显示的是li中的内容
  • ol>li和ul>li的组合是固定的，li的父级必须是ul或ol，而ul、ol内的直接子级必须是li
    • 无序列表ul的type属性值：默认disc小黑点，circle圆圈，square黑方快
    • 有序列表ol的type属性值：默认为1代表有序数字，a小写字母，A大写字母，i小写罗马数字，I大写罗马数字
    • 去掉列表前面的点，需在css样式中添加list-style:none;

• 实体标签

  • 注释(触发方式ctrl+/或ctrl+shift+/)：<!-- -->
  • <：<
  • >：>
  • ©️：©
  • ™️：™
  • 单引号："
  • ®️：®
  • 空格： 
  • &：&

• 表格标签table

  • 优势：

    让一组数据的显示具有结构、清晰明了、直观

  • 组成：

    表格标题caption，行tr，单元格th(表头单元格)、td(内容单元格)

  • 属性：

    • border：设置给table，让表格产生边框，并让单元格之间有分割线，必须存在属性，可以不给值
    • cellspacing：设置给table，单元格之间的间隙
    • cellpadding：设置给table，单元格与自身内容之间的间隙
    • width：设置给table，表格整体变宽；不能设置给tr，设置给th或td后，此单元格所在这一列的整体宽度都会发生变化，因为表格默认是对齐的
    • height：设置给table表格整体变高，设置给tr这一行变高，设置给th或td后，此单元格所在这一行整体变高
    • align：取值left、right、center。设置给table影响，影响表格整体位置，设置给tr影响这一行中所有单元格中内容的位置，设置给td或者th只影响这个单元格中内容的位置
    • bgcolor：背景颜色，设置给table整个表格变色，设置给tr这一行变色，设置给th或者tr此单元格变色
    • bordercolor：设置给表格边框及分割线的颜色，设置给table标签
    • colspan：列合并，设置给th或者td，然后从当前这一个单元格开始合并给定数量的单元格，为了保证合并完成后表格的对齐，需要将当前这个单元格所在这一行后面合并的单元格删除
    • rowspan：列合并，设置给th或者td，然后从当前这一个单元格开始合并给定数量的单元格，为了保证合并完成后表格的对齐，需要将当前这个单元格所在这一列后面合并的单元格删除

• 表单标签form

  • 作用：

    收集数据、提交(发送)数据，而且数据提交时，是可以一次性提交多组数据的

  • action属性

    数据提交的地址

  • method属性

    数据提交的方式，常用的有get和post

  • input标签：type属性标识input收集数据方式

    • text文本输入框

    • password密文输入框

    • radio单选框

    • checkbox复选框

    • file文件上传域

    • button普通按钮

    • submit提交按钮

    • reset重置按钮

    • hidden隐藏域

    • date日期选择框

    • name属性是为了收集、提交的数据设置关键字属性

    • value属性是收集的数据值

      输入框、文件上传域、日期可以不给定value，因为可以输入或者选择，但是单选框及复选框想要进行数据提交，必须把value的值绑定在标签内部；name就是数据传递的名字，而value才是数据的值

    • placeholder占位符属性，针对输入框提供的占位文本，用于提示用户输入信息

    • checked属性，针对单选框、复选框提供默认选中

    • disabled禁用

  • select-option标签：下拉选择框，数据会以下拉列表的形式呈现

    • name属性设置给select标签，代表当前数据的关键字
    • value属性设置给option标签，是真正传递提交的数据，写在option标签内的文本只是为了在页面中显示内容
    • selected属性设置给option标签，可以实现默认选中

  • textarea标签：文本域

    • name属性为数据提供关键字
    • rows行数，用于限制文本域的高度，如果内容超过了指定的行数，出现纵向滚动条
    • cols列数，用于限制文本域的宽度，如果内容超出了指定的列数，自动换行

• 框架集frameset

  frameset框架集可以包含多个页面，将多个页面的内容集成在一起进行显示。常用场景是某某管理系统的首页面

  • 注意事项：
    • frameset与body不能同时存在
    • frameset的子标签可以是frame，也可以是frameset，但frame的父级只能是frameset
    • frameset的属性：
      1. rows，限制子标签的高度，可以给具体值，也可以给*通配剩余量
      2. cols，限制子标签的宽度，可以给具体值，也可以给*通配剩余量
      3. border，调整多个frame之间分割线的粗细
    • frame的属性：
      1. src，引入集成的页面路径
      2. noresize，在集成完毕之后，不允许拉伸页面尺寸
      3. name，为当前的frame页面设置一个名称，后期在改变内容时，可以指定到底是哪一个页面要改变