[前端学习] HTML + CSS 学习笔记(二)

已于 2023-08-01 15:28:04 修改
阅读量46 收藏
点赞数
文章标签： 前端 学习 html
于 2023-06-20 11:24:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49160784/article/details/131303146
版权

HTML + CSS 学习笔记(二)

一、表格 table

  1. 表格基本结构
  • 表格标题(<caption>)、表格头部(<thead>)、表格主体(<tbody>)、表格脚注(<tfood>)

    行(<tr>)
    表头中的列(单元格<th>)、
    表格主体、表格脚注中的列(单元格<tr>)

    <table>
  <caption>表格标题</caption>
  <!-- 表格头部 -->
  <thead>
    <tr>
      <th>第一列</th>
      <th>第二列</th>
      <th>第三列</th>
    </tr>
  <thead>
  <!-- 表格主体 -->
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <!-- 表格脚注，可写可不写 -->
  <tfoot>
    <tr>
      <td>共计1</td>
      <td>共计2</td>
      <td>共计3</td>
    </tr>
  </tfoot>
</table>
  1. 表格常用属性
  • <table>中的属性

    border、width、height、cellspacing

    • 边框：border
      <!-- 在<table>中设置border -->
<!-- 表格最外侧边框以及单元格边框均为 1px -->
<table border="1">
  ...
</table>
<!-- 表格最外侧边框为 10px，但是单元格边框依 然为 1px -->
<table border="10">
  ...
</table>
    • 宽度：width
      <!-- 在<table>中设置width -->
<!-- 根据单元格中内容的长度，浏览器对每一列按   比例分配500px的宽度 -->
<table border="1" width="500">
  ...
</table>
    • 高度：height
      <!-- 在<table>中设置height -->
<!-- 改变表格主体中每行的高度，不改变表头和表格 脚注的高度 -->
<!-- 表格整体总高度至少 300px，当表格中的内容占 的高度大于300时，表格被撑高；
当表格中内容占的高度小于 300时，表格整体高度为  300px -->
<table border="1" height="300">
  ...
</table>
    • 单元格间隙：cellspacing
      <!-- 在<table>中设置cellspacing -->
<!-- 单元格边框之间的间隙为 2px -->
<table border="1" height="300"    cellspacing="2">
  ...
</table>
  • <thead>中的属性

    可设置高度height、align、valign;
    border、width、cellspacing写在<thead>中不起作用

    • 高度：height
      <!-- 在<thead>中设置height -->
<!-- 改变表格主体中每行的高度，不改变表头和表格脚注的高度 -->
<table border="1" height="300">
  <!-- 设置表头的高度为 300px，此时table整体高度大于 300px -->
  <thead height="300">
    ...
  </thead>
  ...
</table>
    • 水平对齐<align>
      默认值为center，水平居中对齐；left：水平左对齐；right：水平右对齐。
      <table border="1">
  <!-- 单元格中内容水平左对齐，只写一个align，默认表示居中对齐 -->
  <thead height="300" align="left">
    ...
  </thead>
  ...
</table>
    • 垂直对齐<valign>
      默认值为middle，垂直居中对齐；top：顶部对齐；bottom：底部对齐。
      <table border="1">
  <!-- 单元格中内容水平左对齐，只写一个align，默认表示居中对齐 -->
  <thead height="300" align="left">
    ...
  </thead>
  ...
</table>
  • <tbody>中的属性

    heigth、align、valign

    • 高度：height

      若同时也在<table>中设置了高度，若在 <tbody>中设置的高度与表头，表格脚注加起来的高度不超过<table>中的高度，将以<table>中的值为准；若加起来超过<table>中的高度，表格将被撑高。

      <!-- 在<tbody>中设置height -->
<table border="1" height="300">
  ...
  <!-- 设置表主体高度为 300px，此时table整体高度大于 300px -->
  <tbody height="300">
      ...
  </tbody>
    ...
</table>
    • 对齐
      水平对齐，垂直对齐与<thead>中用法一样，但<tbody>中单元格中内容默认为左对齐。
  • <tfoot>中的属性

    heigth、align、valign

  • <tr>中的属性

    heigth、align、valign

  • <th>、<td>中的属性

    width、heigth、align、valign、rowspan、colspan

    • 宽度、高度：width、height
      在一个单元格中设置 宽/高 ，将会影响其所在 列/行 所有单元格的宽/高。
    • 水平对齐、垂直对齐：align、valign
      对单个单元格起作用
    • 跨行、跨列：rowspan、colspan
      <!-- 下面是一个表头一行、表格主体四行，总共六列的一个表格 -->
<table border="1">
  <thead>
    <tr>
      <th>a</th>
      <!-- 设置了colspan="2"表示bcd占了三列  (在<tbody>中有6列) -->
      <th colspan="3">bcd</th>
      <th>e</th>
      <th>f</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一行 -->
    <tr>
      <td>1a</td>
      <td>1b</td>
      <td>1c</td>
      <td>1d</td>
      <td>1e</td>
      <td>1f</td>
    </tr>
    <!-- 第二行 -->
    <tr>
      <td>2a</td>
      <!-- 设置rowspan="2"表示23b占了2行 -->
      <td rowspan="2">23b</td>
      <td>2c</td>
      <td>2d</td>
      <td>2e</td>
      <td>2f</td>
    </tr>
    <!-- 第三行 -->
    <tr>
      <td>3a</td>
      <!-- 由于在第二行设置了23b占了两行，所以这里只需要写四列的内容，3b可以不写，如果依旧写5列的内容，3e这一列的内容将在表格右侧突出 -->
      <!-- <td>3b</td> -->
      <td>3c</td>
      <td>3d</td>
      <td>3e</td>
      <td>3f</td>
    </tr>
    <!-- 第四行 -->
    <tr>
      <td>4a</td>
      <td>4b</td>
      <td>4c</td>
      <td>4d</td>
      <td>4e</td>
      <td>4f</td>
    </tr>
  </tbody>
</table>
  • 其他几个常用标签

    <br>：换行，最好不好用于增大间隔
    <hr>：分割线
    <pre></pre>：定义预格式化标签，标签中的空格和换行符都会被保留，常用来表示源代码

二、表单 form

  1. 表单基本结构
<!-- action：表单提交的地址；target：设置页面打开方式(新标签也或本标签页)；method：表单提交方法 -->
<form action="https://www.baidu.com/s" target="_black" method="get">
  <!-- 输入框，type：输入框类型；name：数据提交的名字 -->
  <input type="text" name="wd">
  <!-- 按钮 -->
  <button>去百度搜索</button>
</form>
  1. 文本框input
    通过设置input的属性type来设置不同的类型
  • 文本框、密码框、单选按钮、多选框

    文本框：<input type="text">；
    密码框：<input type="password">；
    单选按钮：<input type="radio" value="123">；
    多选框：<input type="checkbox" value="123" checked>；
    （input需要设置name值以便数据的传输，单选按钮和多选框还需要设置value值，checked表示默认选择）

  • 隐藏域

    <input type="hidden">

  • 确认按钮、重置按钮

    确认提交按钮：<input type="submit">；
    重置按钮：<input type="reset">；
    （不要在这里加name属性）

  • value的不同意义

    文本框与密码框中：表示默认值；
    单选按钮与多选框中：表示选项代表的真正的值；
    确认按钮与重置按钮中：表示按钮上显示的文本

  1. 按钮button

确认按钮：<button type="submit">提交</button>，button的type默认是submit
重置按钮：<button type="reset">重置</button>
普通按钮：<button type="button">普通按钮</button>

  1. 文本域textarea
    <textarea name="other" cols="20" rows="3"></textarea>
    通过设置列cols,行rows来设置文本域大小
  2. 下拉框select
    select配合option一起使用，option为下拉框的选项，在select中设置name属性，在option设置value值，在option中设置selected表示默认选中的选项
  3. 禁用表单控件disabled
    在表单控件的标签中添加disabled可禁用该控件
    例：<input type="text" name="account" value="张三" maxlength="10" disabled>，此时此输入框无法输入。
<form action="https://search.jd.com/search">
  <!-- 普通文本框 -->
  账户：
  <input type="text" name="account" value="张三" maxlength="10"><br>
  <!-- 密码框 -->
  密码：
  <input type="password" name="pwd" maxlength="10"><br>
  <!-- 单选按钮 -->
  性别：
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女<br>
  <!-- 多选框 -->
  爱好：
  <input type="checkbox" name="hobby" value="sing">唱歌
  <input type="checkbox" name="hobby" value="dance">跳舞
  <input type="checkbox" name="hobby" value="paint">画画<br>
  <!-- 隐藏域(提交表单时携带一些固定数据) -->
  <input type="hidden" name="abc" value="123"><br>
  其他：<textarea name="other" cols="20" rows="3"></textarea><br>
  <!-- 设置value后传递的值为value的值，若没有设置value，传递的值为option包裹的文字 -->
  籍贯：
  <select name="jiguan">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉" selected>吉林</option>
  </select><br>
  <!-- 确认按钮 -->
  <input type="submit" value="确认">
  <button type="submit">提交</button>
  <!-- 重置按钮 -->
  <input type="reset" value="重置">
  <button type="reset">重置1</button>
  <!-- 普通按钮 -->
  <button type="button">普通按钮</button>
</form>
  1. label标签

<label>标签为input元素定义标注（标记）。当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
将label与input进行关联：

  1. 在label标签中设置for属性，其值等于与其将要绑定的input标签的id值
  2. 用<label></label>包裹需要关联的整体
<form action="https://search.jd.com/search">
  <!-- 关联方式一 -->
  <!-- 此时点击“账户：”焦点在input框上，可以进行输入 -->
  <label for="a">账户：</label>
  <input id="a" type="text" name="account" value="张三" maxlength="10"><br>
  <!-- 密码框 -->
  <!-- 未关联，此时点击“密码：”，焦点不会转移到input框，无法在密码框中输入 -->
  密码：
  <input type="password" name="pwd" maxlength="10"><br>
  <!-- 单选按钮 -->
  性别：
  <!-- 关联方式二 -->
  <!-- 此时点击“男”，将会选中此选项 -->
  <label>
    <input type="radio" name="gender" value="male">男
  </label>
  <!-- 未关联，点击“女”不会选中这个选项，只有点击单选框的小圆点才能选中此选项 -->
  <input type="radio" name="gender" value="female">女<br>
  <!-- 多选框 -->
  爱好：
  <input type="checkbox" name="hobby" value="sing">唱歌
  <input type="checkbox" name="hobby" value="dance">跳舞
  <input type="checkbox" name="hobby" value="paint">画画<br>
</form>
  1. fieldset和legend
    对表单内容进行分类
<form action="https://search.jd.com/search">
  <fieldset>
    <legend>主要信息</legend>
    <!-- 下面这些标签将会被框住，框的右上角处会有主要信息四个字 -->
    <label for="a">账户：</label>
    <input id="a" type="text" name="account" value="张三" maxlength="10"><br>
    密码：
    <input type="password" name="pwd" maxlength="10"><br>
    性别：
    <label>
      <input type="radio" name="gender" value="male">男
    </label>
    <input type="radio" name="gender" value="female">女<br>
  </fieldset>
  <fieldset>
    <legend>附加信息</legend>
    爱好：
    <input type="checkbox" name="hobby" value="sing">唱歌
    <input type="checkbox" name="hobby" value="dance">跳舞
    <input type="checkbox" name="hobby" value="paint">画画<br>
  </fieldset>
</form>

三、框架 iframe

  1. 利用iframe嵌入一个网页
<!-- frameborder的值只有 0 和 1 -->
<iframe src="https://www.toutiao.com" width="900" height="300" frameborder="0"></iframe>
  1. 利用iframe嵌入其他内容
<iframe src="xxx.jpg" width="900" height="300" frameborder="0"></iframe>
<iframe src="xxx.mp4" width="900" height="300" frameborder="0"></iframe>
<iframe src="xxx.pdf" width="900" height="300" frameborder="0"></iframe>
<!-- 浏览器无法打开的内容会打开下载页面 -->
<iframe src="xxx.zip" width="900" height="300" frameborder="0"></iframe>
  1. 与其他标签的target属性配合使用
<!-- 与超链接的target属性一起使用 -->
<!-- 点击超链接将会在iframe中展示herf的内容 -->
<a href="https://www.toutiao.com" target="container">点我看新闻</a><br>
<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
<!-- 与表单的target属性一起使用 -->
<!-- 点击按钮将会在iframe中展示表单提交结果 -->
<form action="https://so.toutiao.com" target="container">
  <input type="submit" value="搜索">
</form>
<iframe name="container" width="900" height="300" frameborder="0"></iframe>

四、HTML字符实体

用一种特殊形式的内容表示某个特殊符号，由&+名称或#编号+;组成

  1. 空格：&nbsp;或#160;，需要几个空格就写几个
  2. 大于号>：&gt;小于号<：&lt;
  3. &符：&amp;
  4. ￥人民币符号：&yen;
  5. ©版权所有符号：&copy;
  6. ×乘号：&times;
  7. ÷除号：&divide;

五、HTML全局属性

  1. id：标签唯一标识，在一个html文件里不可重复，不可在head、html、meta、script、style、title标签里使用
  2. class：给标签指定类名分类，可重复，后续可使用css给标签设置样式
  3. style：给标签设置style样式
  4. dir：内容的方向，值：ltr、rtl，不可在head、html、meta、script、style、title标签里使用
  5. title：给标签设置一个文字提示，一般超链接和图片用得多
  6. lang：给标签指定语言，不可在head、html、meta、script、style、title标签里使用

六、meta元信息

meta标签的内容属于html的基本信息

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <!-- 设置字符集 -->
    <meta charset="UTF-8">
    <!-- 针对ie浏览器的兼容性设置 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对移动端的配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 配置网页关键字 -->
    <meta name="keyword" content="网上购物，电商，家电">
    <!-- 配置网页描述信息 -->
    <meta name="description" content="80字以内，与网站内容相关">
    ...
  </head>
</html>
Paxlsean
关注
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
尚硅谷前端入门html+css学习笔记——HTML4
qq_62237063的博客
08-04 902
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端全称：HyperText Markup Language 译为： 超文本标记语言1996年W3C制定HTML规范，2014年HTML5由W3C正式发布。
前端学习笔记|尚硅谷前端入门html+css|HTML4（一）
like_potato的博客
05-29 629
记录一些前端学习笔记~
前端三剑客 HTML+CSS+JavaScript 学习笔记
霁晨晨晨的博客
12-10 3万+
总结了一些关于前端 HTML&CSS&JavaScript 的知识点，比较适合初学者快速了解和入门〝前端三剑客〞
前端学习笔记|尚硅谷前端入门html+css|简介
like_potato的博客
05-29 253
记录一些前端学习笔记~
前端HTML5+CSS3学习笔记
Baucd的小博客
11-17 1万+
前端HTML5+CSS3学习笔记
前端学习笔记（一）：HTML+CSS基础
憬淮的博客
11-16 2255
前端笔记01，web端html+css基础
Web前端（HTMI+CSS）学习笔记
m0_74135603的博客
10-21 1483
:对名词进行解释和描述超文本标记语言
Web前端学习课程笔记之HTML+CSS
Ghlys的博客
10-20 1760
Web前端学习课程笔记之HTML、CSS
前端HTML+CSS学习笔记
qq_47522010的博客
06-15 2138
前端HTML+CSS学习笔记
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端的学习笔记HTML+css.zip
01-05
前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css 前端的学习笔记HTML+css前端的学习笔记HTML+css前端的学习笔记HTML+css...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
day01
JiangMeiXue的博客
09-25 246
目录。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 121
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 696
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1670
Webpack 打包后文件过大，如何优化？
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 692
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
HTML5+CSS3+JS前端开发学习笔记
"这是一份综合性的Web前端学习资料，涵盖了HTML5、...这份学习笔记为初学者和进阶者提供了一个全面的Web前端学习平台，从基础知识到高级特性，从理论到实践，帮助读者掌握前端开发的核心技能，并了解HTML5带来的创新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值