HTML---学习笔记_使用html表格标签及其他所学标签,自行设计表格页面结构,完成个人信息的展示。要求-程序员宅基地

技术标签： java  html  

HTML学习笔记

一、Web标准

1、为什么需要Web标准？

浏览器不同，它们显示页面或者排版就会有些许差异，所以需要一套标准来规范。

2、Web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准 说明
结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为 行为是指网页模型的定义及交互的编写，现阶段学的主要是JavaScript

Web标准提出的最佳体验方案：结构、样式、行为相分离。

二、HTML标签

1、语法规范

1.1 基本语法概述

  1. HTML标签是由尖括号包围的关键词，如：<html>

  2. HTML通常是成对出现的，如：<html></html>，称为双标签

  3. 有些特殊的是单标签，如：<br />

2、HTML基本结构标签

标签名 定义 说明
<html></html> HTML标签 根标签
<head></head> 文档的头部 注意在head标签中我们必须要设置的标签是title
<title></title> 文档的标题 让页面拥有属于自己的网页标题
<body></body> 文档的主体 包含文档的所有内容，页面内容基本都是放到body里面的 
<!DOCTYPE html>   //文档类型声明标签，当前页面是HTML5版本，必须位于第一行，它不是THML标签
<html lang="en">  //lang语言种类，zh-CN为中文文档
<head>
    <meta charset="UTF-8">  //字符集 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3、HTML常用标签

3.1 标签语义

简单理解为标签的含义，这个标签是用来干什么的？在合适的地方用合适的标签，可以让页面结构更加清晰。

3.2 标题标签

HTML提供了六个等级的标题标签，即 <h1> ~ <h6>

<h1>这是一级标题</h1>
1
3.3 段落和换行标签

标签<p>用于定义段

<p>我是一个段落标签</p>

<br /> 用于强制换行
3.4 文本格式化标签
语义 标签 说明
加粗 <strong></strong>或者<b></b> 推荐使用<strong>，语义更强烈
倾斜 <em></em>或者<i></i> 推荐使用<em>，语义更强烈
删除线 <del></del>或者<s></s> 推荐使用<del>，语义更强烈
下划线 <ins></ins>或者<u></u> 推荐使用<ins>，语义更强烈
3.5 div和span标签

div和 span标签是没有语义的，它们就是一个盒子，用来装内容的。

<div>这是头部</div>

<span>今天天气真好</span>

div 是 division 的缩写，表示分区、分割。span意为跨度、跨距。

特点

  1. div 标签用来布局，但是现在一行只能放一个div，可以理解为，它是独占一行的大盒子。
  2. span 标签也是用来布局的，但是一行可以有多个 span 。可以理解为小盒子。
3.6 图像标签img和路径

1、它是单标签，image的缩写。

<img src = "图像的URL" />

src 是 image 标签的必需属性，用于指定图像文件的路径和文件名。

img标签的其他属性：

属性 属性值 说明
src 图片路径 必需属性
alt 文本 替换文本，图像不能显示的文字
title 文本 提示文本，鼠标放到图片上显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

图像标签属性注意点：

  1. 属性必须写在标签名的后面。
  2. 属性之间不分先后顺序，标签名与属性、属性与属性之间要以空格隔开。
  3. 属性采取键值对的形式：属性名 = “属性值”。

2、路径

  1. 相对路径：以引用文件所在位置为参考基础而建立的目录路径。

    简单来说，就是图片相对于HTML页面的位置。

  2. 绝对路径

    是指目录下的绝对路径，直接到达目标位置，通常是从盘符开始的路径。

    例如："D:\***\123.jpg"

相对路径分类 符号 说明
同一级路径 ./ 图像文件位于HTML文件同一级
下一级路径 / 图像文件位于HTML文件下一级
上一级路径 ../ 图像文件位于HTML文件上一级
3.7 超链接标签

标签用于定义超链接，作用是从一个页面链接到另一个页面。

  1. 语法格式

    <a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>
1
    属性 作用
    href（必需属性） 链接目标的URL地址
    target 用于指定目标页面的弹出方式，_self 为默认值 _blank为在新窗口中打开

  2. 链接分类

    1. 外部链接：地址必须以 http://开头。

    2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。

    3. 空链接：没有确定链接目标时

      <a href = "#">还没想好链接到哪儿</a>

  3. 下载链接：如果 href 里面地址是一个文件或者压缩包，点击就会下载这个文件。

  4. 网页元素链接：各种网页元素例如文本、图像、表格、音频等都可以添加超链接。

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

    1. 锚点链接：点击链接可以快速定位到页面中的某个位置。

      • 设置链接文本的属性 href 为 #名字 的形式，如：

        <a href ="#job"> 任职经历 </a>
    • 找到目标位置标签，并添加一个 id 属性 = 上面命名的名字，如：
      <h3 id = "job">
       任职经历简介
      </h3>
3.8 表格标签

  1. 表格的主要作用

    用于显示、展示数据，提高数据的可读性。

  2. 表格的基本语法

    <table>
    <tr>
        <td>这是一个单元格</td>
        ...
    </tr>
    ...
</table>

  3. table用于定义表格。

    1. tr 用于定义表格中的一行，必须嵌套在 table 中。
    2. td 用于定义表格中的单元格，必须嵌套在 tr 中。
    3. td 指的是 table data 表格数据，即数据单元格中的内容。

  4. 表头单元格标签

    一般位于表格的第一行或第一列，里面的文本内容会加粗居中显示。

    th 标签表示 HTML 表格的表头部分（ table head ）

    <table>
    <tr>
        <th>姓名</th>
        ...
    </tr>
    ...
</table>

  5. 表格属性

实际开发中并不常使用，后面通过CSS来设置。

属性名 属性值 描述
align left 、center 、right 规定表格相对周围元素的对齐方式
border 1 或 “” 规定表格单元是否拥有边框，默认值为""，无边框
cellpadding 像素值 规定单元格内容与边框之间的空白距离，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度
  1. 表格结构标签

当表格很长时，为了更好的表示单元格的语义，可以将表格分割成表格头部和表格主体两大部分。用 thead 表示头部区域、 tbody 表示主体区域 。

  1. 合并单元格

    特殊情况下，把多个单元格合并成一个单元格

    1. 合并单元格的方式

      • 跨行合并：rowspan = “合并单元格的个数”
      • 跨列合并：colspan = “合并单元格的个数”

    2. 目标单元格

      • 跨行：最上侧为目标单元格
      • 跨列：最左侧为目标单元格

    3. 合并单元格的步骤

      1. 确定跨行还是跨列
      2. 找到目标单元格，写上 ：合并方式 = 合并单元格的数量，如:
      <td colspan = "3"></td>

  2. 删除多余的单元格

3.9 列表标签

表格是用来显示数据的，列表是用来布局的，因为它最大的特点就是整齐有序。分为无序列表、有序列表和自定义列表。

3.9.1 无序列表

（做导航栏什么的一般用无序列表）

<ul></ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项用<li>标签定义。
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

注意：

  1. 无序列表各个表项之间没有顺序级别之分。
  2. <ul></ul> 中只能嵌套 <li></li>，但是 <li></li>中可以容纳所有元素。
  3. 无序列表会带有自己的样式属性，但在实际使用时，通过CSS来设置。
3.9.2 有序列表
<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    ...
</ol>

注意事项和无序列表基本一致，在实际开发中使用并不多。

3.9.3 自定义列表

使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
    <dt>联系方式</dt>
    <dd>微信</dd>
    <dd>QQ</dd>
</dl>

注意：

  1. <dl></dl>里面只能包含 <dt></dt> 和 <dd></dd>
  2. dt 和 dd 没有个数限制
3.10 表单标签

表单的目的是为了收集用户信息。

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

  1. 表单域
    包含表单元素的区域，在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。<form>会把它范围内的表单元素提交给服务器。

    <form action = "url地址" method = "提交方式" name = "表单名称">
    各种表单元素控件
</form>

常用属性：

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式。
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域。
  1. 表单控件（表单元素）
<input>表单元素

  • type属性值：

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

  • 除 type 属性外，<input>标签还有其他很多属性，常用属性如下：

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

    注意：

    1. name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
    2. name 表单元素的名字，要求 单选按钮和复选框都要有想同的 name 值
<label>标签

为 input 元素定义标签，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点（光标）转到或者选择到对应的表单元素上，用来增加用户体验。

<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />
12

核心：<label>标签的 for 属性要与相关元素的 id 属性相同。

<select>下拉表单元素

**使用场景：**有多个选择项并且想要节约页面空间。

<form>
籍贯：
<select name = "jiguan">
    <option>广东</option>
    <option selected = "selected">湖南</option>
    <option>浙江</option>
    ...
</select>
</form>

注意：

  1. <select>中至少包含一对<option>
  2. 在<option>中定义 selected = “selected” 时，选项变为默认选项
<textarea>表单元素

**使用场景：**当输入内容较多的情况下，可以使用<textarea>标签，常见于留言板、评论。

<textarea rows = "3" cols = "20" name = "pinglun">
    文本内容
</textarea>
  1. 通过<textarea>标签可以轻松地创建多行文本输入框
  2. cols = “每行中的字符数” ，rows = “显示的行数”，但在实际开发中不会使用，都是用CSS来改变大小

三、HTML中的注释和特殊字符

  1. 注释
<!--注释语句-->

  1. 特殊字符

    记住三个，其余的自行查阅：

    特殊字符 描述 字符的代码
    空格符 &nbsp;
    < 小于号 &lt;
    > 大于号 &gt;

四、查阅文档

www.w3school.com.cn
https://developer.mozilla.org/zh-CN
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45385121/article/details/109563030

智能推荐

[Java]JavaWeb学习笔记(尚硅谷2020旧版)_javaweb笔记 尚硅谷-程序员宅基地

文章浏览阅读2.7k次，点赞3次，收藏32次。 Tomcat JavaWeb相关概念 Web资源的分类 常用的 Web 服务器 Tomcat 服务器和 Servlet 版本的对应关系 Tomcat的使用 下载 Tomcat目录介绍 启动Tomcat服务器方式一 常见启动失败情况 双击 startup.bat 文件出现一个小黑窗口一闪而过 常见JAVA_HOME配置失败情况 启动Tomcat服务器方式二 Tomcat 的停止 修改 Tomcat 的端口号 部暑 web 工程到_javaweb笔记 尚硅谷

linux curl命令_curl 输出到文件-程序员宅基地

文章浏览阅读1.8k次。curl命令是一个利用URL规则在命令行下工作的文件传输工具。它支持文件的上传和下载，所以是综合传输工具，但按传统，习惯称curl为下载工具。作为一款强力工具，curl支持包括HTTP、HTTPS、ftp等众多协议，还支持POST、cookies、认证、从指定偏移处下载部分文件、用户代理字符串、限速、文件大小、进度条等特征。做网页处理流程和数据检索自动化，curl可以祝一臂之力。语法curl(选项..._curl 输出到文件

Flutter 常用插件_flutter 插件集合-程序员宅基地

文章浏览阅读3.7k次，点赞3次，收藏18次。flutter 常用插件_flutter 插件集合

ESP32超详细学习记录：wifi配网，AP配网，浏览器配网，无线配网_esp32网页配置wifi-程序员宅基地

文章浏览阅读2.8w次，点赞105次，收藏408次。ESP32配网，wifi配网模式，可清除以前配网信息。移植方便！可改改函数用于无线调参。_esp32网页配置wifi

vscode使用git教程_vscode git 本地-程序员宅基地

文章浏览阅读1.5w次，点赞11次，收藏81次。vscode使用git教程git基本配置就不写了vscode配置直接上图清晰明了按照图片出现的顺序 "git.path": "D:/Git/bin/git.exe", "terminal.integrated.shell.windows": "D://Git//bin//bash.exe", "git.autofetch": true把上面代码写入setting.json..._vscode git 本地

Course Z6110X0035 CC Final Report-程序员宅基地

文章浏览阅读56次。话题：核酸酶-切割核酸小组成员：计算机科学与技术165班 邱日煌 （6130116217）计算机科学与技术165班 王文浩 （6130116227）关键词：核苷酸酶，DNA切割，docker镜像邮箱：[email protected]实验项目名称核酸酶-切割核酸实验步骤1.拉取docker镜像alpine2.编写c语言程序docker.c3.创建基础镜像4.创建基于镜像的容...

随便推点

MYSQL数据类型、范式及索引总结_mysql int和tyint-程序员宅基地

文章浏览阅读2.7k次，点赞3次，收藏2次。MySQL基础（MySQL5.1）MySQL的数据类型MySQL数据类型简介整数类型、浮点数类型和定点数类型日期与时间类型字符串类型二进制类型MySQL数据类型选择MySQL范式MySQL范式介绍MySQL范式联系与转化MySQL索引索引的含义及特点索引的分类MySQL建立索引原则MySQL创建索引MySQL删除索引MySQL索引的有效性索引的使用规则MySQL的数据类型MySQL数据类型简介整数类型、浮点数类型和定点数类型整数： 如上表所示INT和INTEGER的字节数与取值范围相同，其实，在M_mysql int和tyint

【HTTP】998- 经得住拷问的 HTTPS 原理解析-程序员宅基地

文章浏览阅读1.1k次。HTTPS 是在 HTTP 和 TCP 之间建立了一个安全层，HTTP 与 TCP 通信的时候，必须先进过一个安全层，对数据包进行加密，然后将加密后的数据包传送给 TCP，相应的 TCP ..._http status 998

MultipartHttpServletRequest 多文件上传。个人demo-程序员宅基地

文章浏览阅读6.5k次。编辑

python 类中的__call__是什么？-程序员宅基地

文章浏览阅读3k次，点赞3次，收藏12次。随便定义一个函数输入def say() : print("小白一起学python")输出小白一起学python -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 小白一起学pythoncall方法是把对象当成函数来使用的时候，会自动调用。参考链接。___call__

【云计算】Hadoop集群安装-程序员宅基地

文章浏览阅读963次，点赞3次，收藏2次。Hadoop是一种开源框架，可用于处理大数据集。它基于Google的MapReduce算法和Google文件系统（GFS）的概念而来。Hadoop可在廉价硬件上运行，并能够提供高度可靠性和容错性。HDFS：Hadoop分布式文件系统，用于存储和管理大规模数据集；MapReduce：用于并行处理和生成大规模数据集的分布式算法框架。除了这两个核心组件外，Hadoop还包括许多其他工具和应用程序，例如Pig、Hive等。_hadoop集群安装

这些小众的工具，你知道几个？_defenderremover-程序员宅基地

文章浏览阅读566次。今天我和大家分享几个比较小众的工具，来看一下有几个是你知道的吧。1、克拉壁纸使用它可以创建DIY 壁纸，可以自己添加背景 / 颜色 / 字体。同时还可以在相册里选择自己的图片，然后它可以虚化处理成壁纸，其实它还有很多很多各种不同的主题让你选择。面还有专门的创作者创造的壁纸也可以下载。2、微软电脑管家微软电脑管家是微软官方出品的电脑管家类软件；软件支持 Windows 版本。支持的功能包括：一键体检、系统加速、软件进程管理、病毒查杀、系统升级。其中一键体检功能包括：垃圾清理、开机启动项、系统异常、病毒检测、系_defenderremover

推荐文章

热门文章

相关标签