【WEB前端】---HTML---结构---笔记

目录

1.标签---单标签和双标签

1.1单标签

1.2双标签

2.基本结构标签

2.1HTML标签

2.2文档头部标签

2.3文档标题标签

2.4文档的主题标签

3.常用的标题标签  (n∈[1,6])

4.段落标签

5.换行标签

6.文本格式化标签

6.1粗体

6.2倾斜

6.3删除线

6.4下划线

7.div和span标签

8.图片标签

9.路径=相对路径和绝对路径

9.1相对路径分类

9.2特点：

10.链接标签

10.1链接标签的属性

10.2链接分类

11.注释

12.特殊字符（常用）

13.表格

13.1表格的基本代码书写格式

13.2表格的属性

14.列表

 14.1无序列表

 14.2有序列表

  •  14.3自定义列表

    15.表单标签

    15.1表单基本书写格式

    15.2表单属性

    15.3表单元素（表单控件）

    15.3.1input表单控件的type属性的属性值如下所示

    15.3.2input控件的其他属性

    15.4标签

    15.5下拉标签---节约页面空间15.5.1基本书写格式15.6文本域标签

1.标签---单标签和双标签

1.1单标签

                ---<hr/>水平分割线、<input/>表单元素、<br/>换行标签等

1.2双标签

                ---<h1></h1>标题标签、<html></html>HTML标签等

2.基本结构标签

2.1HTML标签

                        ---<html></html>

2.2文档头部标签

                        ---<head></head>

2.3文档标题标签

                        ---<title></title>

2.4文档的主题标签

                        ---<body></body>

3.常用的标题标签<hn></hn>  (n∈[1,6])

<h1>标题一共六级可以选择</h1>

<h2>文字加粗并且一行显示</h2>

<h3>从h1到h6文字大小递减</h3>

<h4>随着文字大小粗细变化</h4>

<h5>语法书写要规范</h5>

<h6>具体效果刷新就可以看见了</h6>

4.段落标签<p></p>

<p>用于定义段落，可以将网页划分位若干个段落，文本在一个段落中会根据浏览器的窗口大小自动换行，段落与段落之间有空隙</p>

5.换行标签<br/>

换行标签是单标签，是用于强制换行的，只是简单的开启新的一行，没有行间距，段落之间会插入一些垂直的间距

6.文本格式化标签

6.1粗体

                ---<strong></strong>---更加推荐使用<strong>标签

                ---<b></b>

6.2倾斜

                ---<em></em>---推荐使用

                ---<i></i>

6.3删除线

                ---<del></del>---推荐使用

                ---<s></s>

6.4下划线

                ---<ins></ins>---推荐使用

                ---<u></u>

7.div和span标签

<div>标签用来布局，一行只能放一个<div>---大盒子

<span>标签用来布局，一行可以放多个<span>---小盒子

8.图片标签<img />

属性属性值说明
src图片路径

必须属性

alt文本替换文本，图像不能显示的时候显示的文字
title文本提示文本，鼠标悬停在图片上方的时候出现的文字
width像素图片的宽度
height像素图片的高度
border边框图片的边框样式

采用键值对的方式进行书写，可以写多个属性，属性与属性之间用空格分开

9.路径=相对路径和绝对路径

以引用文件的绝对位置为参考基础，而建立的目录路径就是相对路径

9.1相对路径分类

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

9.2特点：

相对路径分类是图像相对于HTML文件的位置；

绝对路径是指目录下的绝对位置，通常是从盘符开始的；

相对路径是从这个项目所在的这个文件夹出发，去寻找目标文件

10.链接标签<a>

10.1链接标签的属性

<a href="跳转目标（也可以是#号（代表是空链接，会自动跳转到页面最顶端），也可以使用JavaScript:;(代表什么也不执行，点击的时候不会产生任何反应)，还可以使用' '(空字符串代表什么都不执行但是会刷新页面)）" target="目标窗口的打开方式（_self默认当前窗口或者_blank新窗口）"></a>

10.2链接分类

  • 外部链接：利用href="跳转的路径"直接跳转到外部链接页面
  • 内部链接：利用href="跳转的路径"直接跳转到当前项目文件夹内中的目标链接页面
  • 空链接：href="#"表示没有确定的跳转目标
  • 下载链接：href="文件/压缩包"，会自动下载此链接指向的内容
  • 网页元素链接：可以直接给当前网页中的元素（图像/表格/音频等）添加超链接
  • 锚点链接：通过href="#名字"的方式跳转到相关id名字所在的地方（起到一个快速定位的作用）

11.注释

<!-- 注释内容-->

12.特殊字符（常用）

符号说明
>

&gt;

<&lt;
&nbsp;

13.表格

13.1表格的基本代码书写格式

<table>
    <thead>
    <!--这里是表头部分-->
        <tr>
            <td>表头单元格，可以按需添加多个</td>
            ...
        </tr>
    </thead>
    <tbody>
    <!--这里是表格主题部分-->
        <tr>
            <td>表格主体的单元格，可以按需添加多个</td>
            ...
        </tr>
        <tr>
            <td>表格主体的单元格，可以按需添加多个</td>

            ...
        </tr>
        ...
    </tbody>
</table>

13.2表格的属性

属性名属性值说明
alignleft  center  right规定表格相对周围元素的对齐方式
border如1(输入必须为整数)或者' '无边框规定表格的边框样式
cellpadding像素值规定单元格边沿与内容之间的边距
cellspacing像素值规定单元格与单元格之间的边距
width像素值规定表格的宽度

colspan

列数值跨列合并（最左侧为目标单元格）
rowspan行数值跨行合并（最上侧为目标单元格）

14.列表

 14.1无序列表<ul>

<ul>
    <li>无序列表的列表项，无序列表中只能存放li标签，可以有若干个li标签</li>
    ...
</ul>

 14.2有序列表<ol>

<ol>
    <li>有序列表的列表项，无序列表中只能存放li标签，可以有若干个li标签</li>
    ...
</ol>

 14.3自定义列表<dl>

<dl>
    <dt>名词1</dt>
    <dd>名词解释</dd>
    ...
</\dl>

15.表单标签

15.1表单基本书写格式

<form>
    <label>xxx</label>
    <input />
    ...
</form>

15.2表单属性

属性属性值作用
actionurl地址用于指定接收并且处理表单数据的服务器程序的url地址
methodget/post

用于设置表单的提交方式，其取值是get/post

name名称用于指定表单的名称，以区分同一个页面中的多个表单

15.3表单元素（表单控件）

15.3.1input表单控件的type属性的属性值如下所示

type的属性值描述
button可点击按钮
checkbox复选框
file上传文件
hidden隐藏
image

图像（可以直接用img标签）

password密码框
text文本框
radio单选按钮
reset重置按钮
submit提交按钮

15.3.2input控件的其他属性

属性属性值描述
maxlength正整数最大长度
name用户自定义名称定义input的名称
value用户自定义value值规定input的值
checkedchecked选项框处于选中状态

注意：name和value值主要是针对后台人员使用的；

多选框实现多选一则需要name值与单选框相同时；

checked主要针对的是单选框radio和复选框checkbox

15.4<label>标签

定义:为input元素添加标签（可以4扩大input元素的交互范围，同相关元素的id值相同时）

<form>
    <label for="同id名字一样扩大交互范围">xxx</label>
    <input type="" name=""  id="" />
    ...
</form>

15.5下拉标签<select>---节约页面空间

15.5.1基本书写格式

<select>
    <option>选项1</option>
    ...
</select>

<select>标签中至少包含一对<option>标签，在<option>中定义selected="selected"时，则当前项即为默认选中项

15.6文本域标签<textarea>

<textarea rows="行数" cols="显示的字符数">
  xxxx文本书写区域
</textarea>

16.HTML5语义标签

<header>页眉
<nav>导航
<main>主体
<section>节
<aside>侧栏
<footer>页脚

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/782974.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Android：自定义View

Android：自定义View

一、简介 点击查看创建自定义视图组件中文官网 Android 提供了一个复杂而强大的组件化模型&#xff0c;用于基于基本布局类 View 和 ViewGroup 构建界面。该平台包含各种预构建的 View 和 ViewGroup 子类&#xff08;分别称为 widget 和布局&#xff09;&#xff0c;可供您用来…
阅读更多...
大舍传媒：如何在海外新闻媒体发稿报道摩洛哥？

大舍传媒：如何在海外新闻媒体发稿报道摩洛哥？

引言 作为媒体行业的专家&#xff0c;我将分享一些关于在海外新闻媒体发稿报道摩洛哥的干货教程。本教程将带您深入了解三个重要的新闻媒体平台&#xff1a;Mediterranean News、Morocco News和North African News。 地中海Mediterranean News Mediterranean News是一个知名…
阅读更多...
Java中获取Class对象的三种方式

Java中获取Class对象的三种方式

Java中获取Class对象的三种方式 1、对象调用getClass()方法2、类名.class的方式3、通过Class.forName()静态方法4、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java中&#xff0c;Class对象是一个非常重要的概念&#xff0c;它代…
阅读更多...
高职计算机应用技术专业教学解决方案

高职计算机应用技术专业教学解决方案

前言 随着信息技术的飞速发展&#xff0c;计算机应用技术专业在高职教育中占据了举足轻重的地位。面对日益增长的行业需求和不断变化的教育环境&#xff0c;高职院校亟需探索创新的教学模式&#xff0c;以培养适应社会和经济发展的高素质技术技能型人才。唯众《高职计算机应用…
阅读更多...
基于docker上安装elasticSearch7.12.1

基于docker上安装elasticSearch7.12.1

部署elasticsearch 首先&#xff0c;先创建网络 # 创建网络 docker network create es-net拉取elasticSearch的镜像 #拉取镜像 docker pull elasticsearch:7.12.1创建挂载点目录 # 创建挂载点目录 mkdir -p /usr/local/es/data /usr/local/es/config /usr/local/es/plugin…
阅读更多...
【Linux开发实战指南】基于UDP协议的即时聊天室：快速构建登陆、聊天与退出功能

【Linux开发实战指南】基于UDP协议的即时聊天室：快速构建登陆、聊天与退出功能

author: bbxwg system_version: Ubuntu 22.04 Time : 2024-07-04 目录 技术简单讲解&#xff1a; UDP (User Datagram Protocol) 链表 父子进程 信号 基于UDP的即时聊天室系统&#xff1a;客户端与服务器端实现 客户端操作步骤 服务器端操作步骤 系统版本&#xff…
阅读更多...
怎么将视频翻译免费？这篇文章告诉你5个视频翻译的方法

怎么将视频翻译免费？这篇文章告诉你5个视频翻译的方法

在探索不同文化的经典影视剧时&#xff0c;我们常常被那些精彩绝伦的台词深深吸引。 然而&#xff0c;难以理解的外语符号让我们难以完全领略其魅力。不过&#xff0c;如果你认识免费视频翻译软件的话&#xff0c;那将这些经典台词从陌生的外语符号变成直观的母语表达&#xf…
阅读更多...
藏汉翻译通工具推荐使用《藏文翻译词典》App：藏族文化的掌上宝典，帮助你了解学习藏语反义词近义词和藏文作文！

藏汉翻译通工具推荐使用《藏文翻译词典》App：藏族文化的掌上宝典，帮助你了解学习藏语反义词近义词和藏文作文！

如果你正在学习藏语&#xff0c;遇到不同地区的发音不同时&#xff0c;卫藏语、安多语和康巴语&#xff0c;那么你需要一款好用的翻译和语音朗读工具&#xff0c;帮助你掌握藏语。 如果你正在用藏文写作文&#xff0c;发现一些词汇不会时&#xff0c;需要使用藏文词典&#xf…
阅读更多...
从0到1构建渠道运营体系：实战案例与策略指南

从0到1构建渠道运营体系：实战案例与策略指南

引言 在当今竞争激烈的市场环境中&#xff0c;有效的渠道运营是企业实现产品或服务快速触达目标用户、提升市场份额的关键。从零开始构建一个高效的渠道运营体系&#xff0c;不仅需要深思熟虑的策略规划&#xff0c;还需要灵活应变的实战操作。本文将结合实战案例&#xff0c;…
阅读更多...
C++ STL 多线程库用法介绍

C++ STL 多线程库用法介绍

目录 一&#xff1a;Atomic&#xff1a; 二&#xff1a;Thread 1. 创建线程 2. 小心移动(std::move)线程 3. 如何创建带参数的线程 4. 线程参数是引用类型时&#xff0c;要小心谨慎。 5. 获取线程ID 6. jthread 7. 如何在线程中使用中断 stop_token 三&#xff1a;如何…
阅读更多...
大前端热点技术

大前端热点技术

前言 2018年后&#xff0c;整个大前端发展趋于稳定&#xff0c;各大主流框架的特性变少&#xff0c;各种新轮子也在逐渐变少&#xff0c;但在多端融合、上下游提效以及一些细分领域&#xff0c;还是有很多值得期待的。 本文将基于过去一年大前端方向在Web、Node、多端、IoT、…
阅读更多...
vue学习笔记之组件传值

vue学习笔记之组件传值

说起组件传值&#xff0c;首先要介绍再vue中什么是组件。 组件&#xff08;Component&#xff09;&#xff0c;是vue中很强大的一个功能&#xff0c;可以将一些可重用的代码进行重用。所有的vue组件同时也是vue实例&#xff0c;可以接受使用相同的选项对象和提供相同的生命周期…
阅读更多...
[Unity入门01] Unity基本操作

[Unity入门01] Unity基本操作

参考的傅老师的教程学了一下Unity的基础操作&#xff1a; [傅老師/Unity教學] Unity3D基礎入門 [華梵大學] 遊戲引擎應用基礎(Unity版本) Class#01 移动&#xff1a;鼠标中键旋转&#xff1a;鼠标右键放大&#xff1a;鼠标滚轮飞行模式&#xff1a;右键WASDQEFocus模式&…
阅读更多...
【机器学习】属性降维：揭示数据的简化之美

【机器学习】属性降维：揭示数据的简化之美

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 属性降维&#xff1a;揭示数据的简化之美引言什么是属性降维&#xff1f;为何降…
阅读更多...
linux学习week2+3

linux学习week2+3

linux学习 九.linux磁盘分区、挂载 3.磁盘情况查询 命令&#xff1a;df -h 注意&#xff1a;使用率到80%以上就要清理了 查询指定目录的磁盘占用情况&#xff1a;du -d 目录 其它参数&#xff1a; -s&#xff1a;指定目录占用大小汇总 -h&#xff1a;带计量单位 -a&#xff…
阅读更多...
lora/lycoris

lora/lycoris

Stable Diffusion 训练指南 (LyCORIS) | Coding HuskyStable Diffusion 文字生成图片的教程已经很多了。这篇文章是讲解如何用 Kohya Trainer 在 Google Colab 上训练一个 LyCORIS 模型。在读之前希望你已经至少玩过 Stable Diffusion。https://ericfu.me/stable-diffusion-fin…
阅读更多...
QFileSystemModel绑定到 QTreeView、 QListView、QTableView

QFileSystemModel绑定到 QTreeView、 QListView、QTableView

QFileSystemModel绑定到 QTreeView、 QListView、QTableView&#xff0c;实现文件的查看 .h文件 #ifndef FILESYSEXAMPLE_H #define FILESYSEXAMPLE_H#include <QMainWindow> #include <QFileSystemModel>namespace Ui { class FileSysExample; }class FileSysExam…
阅读更多...
Vuex的模块化编程

Vuex的模块化编程

1.之前我们使用store引入的时候不够简介&#xff0c;store为我们封装了方法 mapState:从state中获取数据,以数组的方式返回 mapGetters:从getters中获取方法,以数组的方式返回 mapMutations:从mutations中获取操作,以数组的方式返回 mapActions:从actions中获取动作,以数组的方…
阅读更多...
Hi3861 OpenHarmony嵌入式应用入门--MQTT

Hi3861 OpenHarmony嵌入式应用入门--MQTT

MQTT 是机器对机器(M2M)/物联网(IoT)连接协议。它被设计为一个极其轻量级的发布/订阅消息传输 协议。对于需要较小代码占用空间和/或网络带宽非常宝贵的远程连接非常有用&#xff0c;是专为受限设备和低带宽、 高延迟或不可靠的网络而设计。这些原则也使该协议成为新兴的“机器…
阅读更多...
PFC电路中MOS管的选取2

PFC电路中MOS管的选取2

上面这种驱动方式叫推挽驱动&#xff0c;或者图腾柱驱动 当芯片驱动脚 DRV为高电平时&#xff0c;此时回路中的源是芯片的 DRV引脚&#xff0c;芯片驱动电流从左往右流动&#xff0c;通过 R1&#xff0c;通过Q1的be脚&#xff0c;通过R3、R4给MOS管Q4的Cgs结电容充电 不过值得…
阅读更多...
最新文章

Copyright @ 2022~2023