前端快速上手（一）：HTML

目录

1. HTML 基础

1.1 HTML 标签

 1.2 标签的结构关系

2. HTML 常见标签

2.1 标题标签: h1 - h6

2.2 段落标签: p 

2.3 换行标签: br

 2.4 图片标签: img

2.5 超链接: a 标签

2.5.1 外部链接

2.5.2 内部链接

2.5.3 文件资源链接

2.5.4 空链接

2.6 表格标签

2.7 表单标签

2.7.1 input 标签

2.7.1.1 input 属性

2.7.1.2 type 属性的属性值

2.7.2 select 标签(下拉菜单)

2.7.3 textarea 标签(文本域)

2.7.4 form 标签

2.8 div 标签 / span 标签 (无语义标签)

3. 综合练习: 用户注册

1. HTML 基础

HTML(Hyper Text Markup Language), 超文本标记语言.

  1. 超文本: 比纯文本更加复杂, 更加强大. 像电脑自带的记事本就是纯文本(内容中没有图片, 没有标题, 只有大小粗细一致的字符). 而 HTML 类似于我们平时使用的 Word 文档(可以调字体, 可以插入图片, 可以有音频).
  2. 标记语言: 由标签构成的语言. 

1.1 HTML 标签

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

上述代码的 <h1>, <h2>, <h3> 就是标签

标签具有以下特点:

  1. 标签名 (body) 放到 <> 中
  2. 大部分标签成对出现
  3. <h1> 为开始标签, </h2> 为结束标签
  4. 开始标签和结束标签间, 写的是标签内容

 1.2 标签的结构关系

其中: 

  • html 是 head 和 body 的父标签
  • head 是 title 的父标签
  • body 和 head 是兄弟标签

标签之间的结构关系, 就构成了一个 DOM 树(Document Object Mode, 文档对象模型):

2. HTML 常见标签

2.1 标题标签: h1 - h6

标题标签有 6 个(h1 - h6), 数字越大, 字体越小(和 Word 标题类似).

此外, HTML 具有很好的鲁棒性, 即使 HTML 写的很"粗鲁", 我们在浏览器中也会得到想要的结果.

2.2 段落标签: p 

在 HTML 中, 空格, 换行符 都会失效:

  1. html 内容首尾处的换行,空格均无效
  2. 在 html 中文字之间输入的多个空格只相当于⼀个空格
  3. html 中直接输入换行不会真的换行,而是相当于⼀个空格

要想开辟一个段落, 需要使用 p 标签(并且开辟的段落前是没有缩进的):

2.3 换行标签: br

上文说到, HTML 中, 输入的换行不代表换行. 要想表示换行, 需要使用 br 标签:

 关于 br 标签:

  1. br 是 break 的缩写
  2. br 是一个单标签
  3. <br/> 是规范写法.不建议写成 <br>
     

 2.4 图片标签: img

通过 img 标签, 我们可以把图片插入到网页中.

  1. 使用 img 标签时, 必须标明 src 即图片源地址
  2. 源地址可以是图片的网址, 也可是图片的文件路径(绝对路径/相对路径)
  3. 若使用的是相对路径, 那么就是以当前 HTML 文件的路径为基准
  4. 当源地址(src)不存在时, 会无法加载, 展示 alt 内容
  5. 可以使用 height/width 对图片的像素(大小)进行设置
  6. 若只使用 height 或者只使用 width , 那么图片就是等比例进行缩放
  7. 若同时使用 height 和 width, 那么图片会严格按照数值进行改变(图片可能会变形)

2.5 超链接: a 标签

2.5.1 外部链接

使用 href 引用其他网站的网址(跳转到指定网站):

2.5.2 内部链接

使用 href 引用相对路径, 跳转内部链接

2.5.3 文件资源链接

若 href 引用的是一个文件资源, 则跳转后会下载该文件

2.5.4 空链接

# 代表空链接(多用于占位)

此外, 若想开启一个新的页面来打开当前引入的链接, 需要在 a 标签中加入 target 属性, 并指定属性的值为: "_blank"

2.6 表格标签

  1. table 标签, 表示整个表格
  2. tr 标签, 表示一行
  3. td 标签, 表示一个单元格(一列)

在 table 标签中, 可以添加属性, 来设置表格的外形(高度, 宽度, 边框粗细, 边框间隔):

  1. width: 表格宽度
  2. height: 表格高度
  3. border: 边框粗细(默认无边框. 数字越大, 边框越粗)
  4. cellspacing: 边框间隔距离

此外, 还可以再 tr 标签中加入 colspan 属性, 合并多个单元格(列):

还可以在 td 标签中加入 rowspan 属性, 合并多个行:

2.7 表单标签

上文所介绍的标签, 全部都是展示给用户看的. 而 input 标签, 是能够让用户进行输入操作的.

而表单是让用户输入信息的重要途径.

表单标签分为两部分:

  1. 表单域: 包含表单元素的区域. 重点是 form 标签.
  2. 表单控件: 输入框, 提交按钮等. 重点是 input 标签.

2.7.1 input 标签

2.7.1.1 input 属性

input 标签中, 有以下几种主要属性:

  1. type(必须有), 指定控件类型
  2. name, input 标签的名字(尤其对于单选按钮来说, 非常重要, 只有相同的 name 才可以实现单选)
  3. value: input 中的默认值
  4. checked: 默认被选中
2.7.1.2 type 属性的属性值

type 的值, 可指定输入控件的类型:

  1. 文本框: type="text"
  2. 密码框: type="password"
  3. 单选框: type="radio"
  4. 复选框: type="checkbox"
  5. 普通按钮: type="button" (搭配 JS 使用)
  6. 提交按钮: type="submit" (搭配 form 标签使用, 向服务器发生请求)

2.7.2 select 标签(下拉菜单)

selected 表示默认被选中

2.7.3 textarea 标签(文本域)

 注意: 标签中的内容, 就是初始内容(空格也算)

2.7.4 form 标签

一个 form 标签的定义域中, 就是一个表单域(确定提交的内容哪些是同一组的).

在 action 属性中指定提交的页面:

method 的属性值有两种:

  1. get, 从服务端得到资源
  2. post, 向服务端发送资源

form 标签搭配 input 的 type 属性使用, 规定 type 的值为 submit(提交按钮), 可以将这个表单域中的内容提交到指定的页面中. 

<form action="test.html" method="get">用户名: <input type="text" name="username" id="" size="30"><br/>密码: <input type="password" name="password" id=""><br/>性别: <input type="radio" name="gender" id="gender1" value="1"> <label for="gender1">男</label><input type="radio" name="gender" id="gender2" value="2"> <label for="gender2">女</label><input type="radio" name="gender" id="gender3" value="3"> <label for="gender3">保密</label><br/>兴趣: <input type="checkbox" name="hobby" id="hobby1" value="1"> <label for="hobby1">足球</label><input type="checkbox" name="hobby" id="hobby2" value="2"> <label for="hobby2">篮球</label><input type="checkbox" name="hobby" id="hobby3" value="3"> <label for="hobby3">排球</label><input type="checkbox" name="hobby" id="hobby4" value="4"> <label for="hobby4">乒乓球</label><br/>专业: <select><option value="1">网络工程</option><option value="2" selected>软件工程</option><option value="3">计算机科学与技术</option><option value="4">物联网工程</option></select><br/>个人介绍: <textarea rows="5" cols="25">初始内容  空格</textarea><br/><!-- <button>按钮</button> --><!-- <input type="button" value="这是一个按钮"> --><input type="submit" value="提交"></form>

2.8 div 标签 / span 标签 (无语义标签)

div 标签和 span 标签多用于网页布局(批量处理数据):

  1. div 是独占一行的, 是⼀个大盒子(自动换行)
  2. span 不独占一行, 是一个小盒子(不会换行)

span 标签通常用于纯文本数据.

3. 综合练习: 用户注册

使用 html 构建用户注册页面:

  • 使用表格(table 标签)进行整体布局
  • 使用 input 标签, 实现页面中的输入控件
<body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名" name="username" id=""></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号" name="telephone"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码" name="password" id=""></td></tr></table><div><input type="button" value="注册"> <span>已有账号?</span> <a href="#">登录</a></div>   
</body>

END

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

QT＜30＞ Qt中使鼠标变为转圈忙状态

QT＜30＞ Qt中使鼠标变为转圈忙状态

前言&#xff1a;当我们在写软件时&#xff0c;在等待阻塞耗时操作时可以将鼠标变为忙状态&#xff0c;并在一段时间后恢复状态&#xff0c;可以用到GxtWaitCursor&#xff1a;Qt下基于RAII的鼠标等待光标类。 一、效果演示 二、详细代码 在项目中添加C文件&#xff0c;命名为…
阅读更多...
Shell环境导致编译失败处理方法

Shell环境导致编译失败处理方法

在嵌入式Linux系统源码&#xff08;BSP包&#xff09;编译时&#xff0c;有可能会如现如下提示&#xff1a; [[: not found 这种提示&#xff0c;一般是Shell环境为dash而不是bash导致&#xff0c;可以通过如下命令来切换&#xff1a; sudo dpkg-reconfigure dash 执行后会…
阅读更多...
nginx openresty lua-resty-http 使用的一些问题记录

nginx openresty lua-resty-http 使用的一些问题记录

需求背景 需求是使用 nginx 做一个 https 服务的代理 nginx 收到 http 请求后&#xff0c;需要修改 body 中的某些参数值&#xff0c;然后将修改后的数据发送到目标服务器&#xff08;https&#xff09; 本来以为很简单的需求&#xff0c;结果中间出现了不少岔子&#xff0c;这…
阅读更多...
Redis的分布式锁分析

Redis的分布式锁分析

系列文章目录 Java项目对接redis&#xff0c;客户端是选Redisson、Lettuce还是Jedis&#xff1f; 由Redis引发的分布式锁探讨 系列文章目录一、什么是分布式锁&#xff1f;二、Redis分布式锁的几种实现1. 简单分布式锁2. Redlock 三、Redis 锁的问题1. 互斥失效2. 时钟偏移 四…
阅读更多...
柯桥生活英语口语学习“面坨了”英语怎么表达？

柯桥生活英语口语学习“面坨了”英语怎么表达？

“面坨了”英语怎么表达&#xff1f; 要想搞清楚这个表达&#xff0c;首先&#xff0c;我们要搞明白“坨”是啥意思&#xff1f; 所谓“坨”就是指&#xff0c;面条在汤里泡太久&#xff0c;从而变涨&#xff0c;黏糊凝固在一起的状态。 有一个词汇&#xff0c;很适合用来表达这…
阅读更多...
鸿蒙NEXT应用示例：切换图片动画

鸿蒙NEXT应用示例：切换图片动画

【引言】 在鸿蒙NEXT应用开发中&#xff0c;实现图片切换动画是一项常见的需求。本文将介绍如何使用鸿蒙应用框架中的组件和动画功能&#xff0c;实现不同类型的图片切换动画效果。 【环境准备】 电脑系统&#xff1a;windows 10 开发工具&#xff1a;DevEco Studio NEXT B…
阅读更多...
UAC2.0 speaker——speaker 数据传输

UAC2.0 speaker——speaker 数据传输

文章目录 麦克风数据传输准备音频数据抓包原始数据频谱分析（FFT）应用麦克风数据传输 上一节中实现了 USB 麦克风设备 本节主要介绍 MCU 麦克风的数据如何传输给上位机。 准备音频数据 MCU 端发送 48KHZ, 16bit 单声道的正弦波数据，正弦波数据的生成参考 音频——C语言生…
阅读更多...
【多语言】每种语言打印helloworld，编译为exe会占多大空间

【多语言】每种语言打印helloworld，编译为exe会占多大空间

文章目录 背景c语言 53KBc 53KBgo 1.8Mdart 4.6Mpython未测试nodejs未测试rust未测试java未测试cmd || bash || powershell 未测试other 背景 各个版本的helloworld&#xff0c;纯属闲的, 环境如下: - win10 - mingw: gcc8.1.0 - go1.21 - dart3.5.4c语言 53KB gcc main.c -…
阅读更多...
Android12的ANR解析

Android12的ANR解析

0. 参考&#xff1a; ANR分析 深入理解 Android ANR 触发原理以及信息收集过程 1.ANR的触发分类: ANR分为4类&#xff1a; InputDispatchTimeout&#xff1a;输入事件分发超时5s,包括按键和触摸事件。BroadcastTimeout&#xff1a;比如前台广播在10s内未执行完成&#xff0…
阅读更多...
2022-2023全国高校计算机能力挑战赛区域赛python组编程题

2022-2023全国高校计算机能力挑战赛区域赛python组编程题

mi目录 2022 1. 2. 1. 使用 format() 方法 2. 使用 f-string&#xff08;Python 3.6 及以上&#xff09; 2023 1. 2. 3. 4 闽农大宝玲楼 2022 1. 1.某动物研究员给动物园的动物们定了一个园区幸福值&#xff0c;其中园区幸福值的计算为一个园区内“所有动物的活动时…
阅读更多...
函数的栈帧

函数的栈帧

前言&#xff1a; 1.请使用vs2013调试&#xff0c;我使用vs2019被恶心到了&#xff0c;封装严重&#xff0c;不利于观察。 2.函数栈帧&#xff1a;函数就是程序&#xff0c;程序就需要空间来运行&#xff0c;所以我们要为他分配空间&#xff0c;分配的空间用ebp esp维护&…
阅读更多...
机器学习基础04

机器学习基础04

目录 1.朴素贝叶斯-分类 1.1贝叶斯分类理论 1.2条件概率 1.3全概率公式 1.4贝叶斯推断 1.5朴素贝叶斯推断 1.6拉普拉斯平滑系数 1.7API 2.决策树-分类 2.1决策树 2.2基于信息增益的决策树建立 2.2.1信息熵 2.2.2信息增益 2.2.3信息增益决策树建立步骤 2.3基于基…
阅读更多...
如何解决IDE添加错误GitHub token后无法连接GitHub的问题

如何解决IDE添加错误GitHub token后无法连接GitHub的问题

背景 当初学者首次使用IDE&#xff08;IDEA、Xcode等&#xff09;对GitHub仓库进行操作&#xff08;push、fetch&#xff09;时&#xff0c;会提示输入GitHub账户和token&#xff0c;如果这时候你一不小心输入了错误的token&#xff0c;之后你就叫天天不应叫地地不灵了&#xf…
阅读更多...
PPT技巧：如何合并PPT文件？

PPT技巧：如何合并PPT文件？

在工作与学习中&#xff0c;PPT&#xff08;PowerPoint&#xff09;演示文稿已成为信息传递、项目汇报、教育培训等领域不可或缺的工具。随着任务的累积&#xff0c;我们往往会积累大量单独的PPT文件&#xff0c;每个文件可能包含特定章节、项目阶段或是不同主题的内容。为了更…
阅读更多...
安全见闻1-5

安全见闻1-5

涵盖了编程语言、软件程序类型、操作系统、网络通讯、硬件设备、web前后端、脚本语言、病毒种类、服务器程序、人工智能等基本知识&#xff0c;有助于全面了解计算机科学和网络技术的各个方面。 安全见闻1 1.编程语言简要概述 C语言&#xff1a;面向过程&#xff0c;适用于系统…
阅读更多...
k-近邻算法（K-Nearest Neighbors, KNN）详解：机器学习中的经典算法

k-近邻算法（K-Nearest Neighbors, KNN）详解：机器学习中的经典算法

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…
阅读更多...
LeetCode297.二叉树的序列化和反序列化

LeetCode297.二叉树的序列化和反序列化

题目要求 序列化是将一个数据结构或者对象转换为连续的比特位的操作&#xff0c;进而可以将转换后的数据存储在一个文件或者内存中&#xff0c;同时也可以通过网络传输到另一个计算机环境&#xff0c;采取相反方式重构得到原数据。 请设计一个算法来实现二叉树的序列化与反序…
阅读更多...
蓝牙5.0模块助力闹钟升级，开启智能生活第一步

蓝牙5.0模块助力闹钟升级，开启智能生活第一步

随着智能家居产业的快速发展&#xff0c;智能闹钟作为其中一个重要的品类&#xff0c;逐渐从单一的时间提醒功能演变为集音频播放、语音交互、智能控制等多种功能于一体的智能设备。而在这些功能的实现中&#xff0c;蓝牙音频模组扮演着核心角色。 1、蓝牙音频模组的功能概述 …
阅读更多...
自己动手写Qt Creator插件

自己动手写Qt Creator插件

文章目录 前言一、环境准备1.先看自己的Qt Creator IDE的版本2.下载源码 二、使用步骤1.参考原本的插件2.编写自定义插件1.cmakelist增加一个模块2.同理&#xff0c;qbs文件也增加一个3.插件源码 三、效果总结 前言 就目前而言&#xff0c;Qt Creator这个IDE&#xff0c;插件比…
阅读更多...
力扣经典面试题

力扣经典面试题

1.本题的目标是判断字符串ransomNote是否由字符串magazine中的字符构成&#xff0c;且由magazine中的每个字符只能在ransomNote中使用一次 2.采用的方法是通过一个字典cahr_countl来统计magazine字符串中每个字符出现的次数 3.然后遍历ransomNote字符串&#xff0c;对于其中的…
阅读更多...
最新文章

Copyright @ 2022~2023