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

智能推荐

攻防世界_难度8_happy_puzzle_攻防世界困难模式攻略图文-程序员宅基地

文章浏览阅读645次。这个肯定是末尾的IDAT了，因为IDAT必须要满了才会开始一下个IDAT，这个明显就是末尾的IDAT了。，对应下面的create_head()代码。，对应下面的create_tail()代码。不要考虑爆破，我已经试了一下，太多情况了。题目来源：UNCTF。_攻防世界困难模式攻略图文

达梦数据库的导出（备份）、导入_达梦数据库导入导出-程序员宅基地

文章浏览阅读2.9k次，点赞3次，收藏10次。偶尔会用到，记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录，执行导库操作　　导出语句：./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log　注释：　　 cwy_init/init_123..._达梦数据库导入导出

js引入kindeditor富文本编辑器的使用_kindeditor.js-程序员宅基地

文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件，可以删掉不需要要到的jsp，asp，asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件，在页面引入js文件：<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js

STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法-程序员宅基地

文章浏览阅读2.3k次，点赞6次，收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA，我们的数据线就会变为10101010，通过修改不同的内容，即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平，后半周期为低电平的状态。在SPI的通信模式中，CPHA配置会影响该实验，下图展示了不同采样位置的SPI时序图[1]。CPOL = 0，CPHA = 1：CLK空闲状态 = 低电平，数据在下降沿采样，并在上升沿移出CPOL = 0，CPHA = 0：CLK空闲状态 = 低电平，数据在上升沿采样，并在下降沿移出。_stm32g431cbu6

计算机网络-数据链路层_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输-程序员宅基地

文章浏览阅读1.2k次，点赞2次，收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决？5.如果在数据链路层不进行帧定界，会发生什么问题？6.PPP协议的主要特点是什么？为什么PPP不使用帧的编号？PPP适用于什么情况？为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输

软件测试工程师移民加拿大_无证移民，未受过软件工程师的教育（第1部分）-程序员宅基地

文章浏览阅读587次。软件测试工程师移民加拿大 无证移民，未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...

随便推点

Thinkpad X250 secure boot failed 启动失败问题解决_安装完系统提示secureboot failure-程序员宅基地

文章浏览阅读304次。Thinkpad X250笔记本电脑，装的是FreeBSD，进入BIOS修改虚拟化配置（其后可能是误设置了安全开机），保存退出后系统无法启动，显示：secure boot failed ，把自己惊出一身冷汗，因为这台笔记本刚好还没开始做备份.....根据错误提示，到bios里面去找相关配置，在Security里面找到了Secure Boot选项，发现果然被设置为Enabled，将其修改为Disabled ，再开机，终于正常启动了。_安装完系统提示secureboot failure

C++如何做字符串分割（5种方法）_c++ 字符串分割-程序员宅基地

文章浏览阅读10w+次，点赞93次，收藏352次。1、用strtok函数进行字符串分割原型： char *strtok(char *str, const char *delim);功能：分解字符串为一组字符串。参数说明：str为要分解的字符串，delim为分隔符字符串。返回值：从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它：strtok函数线程不安全，可以使用strtok_r替代。示例：//借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割

2013第四届蓝桥杯 C/C++本科A组 真题答案解析_2013年第四届c a组蓝桥杯省赛真题解答-程序员宅基地

文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯：无论如何都要记日记。他的日记有个与众不同的地方，他从不注明年月日，而是用一个整数代替，比如：4210后来人们知道，那个整数就是日期，它表示那一天是高斯出生后的第几天。这或许也是个好习惯，它时时刻刻提醒着主人：日子又过去一天，还有多少时光可以用于浪费呢？高斯出生于：1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答

基于供需算法优化的核极限学习机(KELM)分类算法-程序员宅基地

文章浏览阅读851次，点赞17次，收藏22次。摘要：本文利用供需算法对核极限学习机(KELM)进行优化，并用于分类。

metasploitable2渗透测试_metasploitable2怎么进入-程序员宅基地

文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功，进入系统4、测试如下：二、MySQL弱密码登录：1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功，进入MySQL系统3、测试效果：三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入

Python学习之路：从入门到精通的指南_python人工智能开发从入门到精通pdf-程序员宅基地

文章浏览阅读257次。本文将为初学者提供Python学习的详细指南，从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文，您将能够掌握Python编程的核心概念，为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf

推荐文章

热门文章

相关标签