前端---初识HTML(前端三剑客)

1.HTML

先为大家介绍几个学习前端的网站:菜鸟教程,w3school,CSS

HTML:超文本标记语言

超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等

1.1 认识 HTML 标签

HTML 代码是由 "标签" 构成的.

形如:

1 <h3>我是三级标题</h3>

标签名 (body) 放到 < > 中

⼤部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.

少数标签只有开始标签, 称为 "单标签".

开始标签和结束标签之间, 写的是标签的内容.

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

1.2HTML 文件基本结构

在VS中输入!后敲击回车,会自动生成HTML的基本结构

html 标签是整个 html ⽂件的根标签(最顶层标签)

head 标签中写⻚⾯的属性.

body 标签中写的是⻚⾯上显⽰的内容

title 标签中写的是⻚⾯的标题.

1.3简单HTML开发 

在body中写入:第一个HTML开发,然后ctrl+s保存,在文件中以浏览器打开

1.4HTML常见标签

1.4.1标题标签h1-h6

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4>
</body>
</html>

1.4.2段落标签p 

在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是h1标签</h1><p>这是一个段落</p><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4>
</body>
</html>

在HTML中用于另起一行

在HTML中:

html 内容⾸尾处的换⾏, 空格均⽆效.

在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.

html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格

1.4.3换行标签br

 换行也可以使用br标签

br 是⼀个单标签(不需要结束标签)

br 标签不像 p 标签那样带有⼀个很⼤的空隙.

<br/> 是规范写法. 不建议写成 <br>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>换行<br/>换行<br/>换行<br/>换行<br/></body>
</html>

1.4.4 图⽚标签: img

img 标签必须带有 src 属性. 表⽰图⽚的路径.

<img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" alt="">

 

其他的参数:

width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.

border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设

    <img src="https://m.360buyimg.com/seckillcms/s150x150_jfs/t1/274275/4/2437/22524/67d2989bF5c0b9cd0/680c6ed27abdb414.jpg" width="500px" height="800px">

 

1.4.5 超链接: a

<a href="https://www.jd.com">京东</a>

 

点击后会跳转到京东 

href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.

target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开

链接的⼏种形式:

1.外部链接: href 引⽤其他⽹站的地址

<a href="http://www.baidu.com">百度</a>

2.内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可.

在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html

<!-- 1.html -->我是 1.html<a href="2.html">点我跳转到 2.html</a><!-- 2.html -->我是 2.html<a href="1.html">点我跳转到 1.html</a>

3.空链接: 使⽤ # 在 href 中占位.

<a href="#">空链接</a>

1.4.6表格标签

table 标签: 表⽰整个表格

tr: 表⽰表格的⼀⾏

td: 表⽰⼀个单元格

thead: 表格的头部区域

tbody: 表格的主体区域.

 

表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置.

这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对⻬⽅式. align="center" (不是内部元素的对⻬⽅式)

border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), "" 表⽰没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺⼨.

注意, 这⼏个属性, vscode 都提⽰不出来

 

    <table border="1"><tr><td>1</td><td>2</td><td>3</td></tr>   </table>

 1.4.7表单标签

表单域: 包含表单元素的区域. 重点是 form 标签

表单控件: 输⼊框, 提交按钮等. 重点是 input 标签

1.4.7.1 input标签

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等

name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀

value: input 中的默认值

checked: 默认被选中.(⽤于单选按钮和多选按钮)

1.4.7.2 from标签

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>

action:将数据提交到那个界面

1.4.8 select 标签

下拉菜单

option 中定义 selected="selected" 表⽰默认选中

    <select><option>北京</option><option selected="selected">上海</option></select>

1.4.9无语义标签div  /  span

真实业务一般都用这个

用于页面布局

div是下图的大盒子

span是下图的小盒子

在盒子中有许多元素

    <div><span>span</span><span>span</span><span>span</span></div>

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AcWing 4905. 面包店 二分

类似还有一个题是二分&#xff0c;用区间来判断是否有解 这个爆long long 有点坑了 const int N 1e2 10;LL n,tc,Tm; LL a[N],b[N],c[N];bool check(LL mid) {LL minx max(0LL,mid 1 - Tm),maxx min(tc - 1LL,mid);//将y转为x的函数,此时判断x是否有解//枚举所有客户的需…

SpringBoot 第一课(Ⅲ) 配置类注解

目录 一、PropertySource 二、ImportResource ①SpringConfig &#xff08;Spring框架全注解&#xff09; ②ImportResource注解实现 三、Bean 四、多配置文件 多Profile文件的使用 文件命名约定&#xff1a; 激活Profile&#xff1a; YAML文件支持多文档块&#xff…

2025年西安交通大学少年班招生考试初试数学试题(初中组)

1、已知正整数 x 、 y 、 z x、y、z x、y、z 满足 x y z 2025 xyz2025 xyz2025 &#xff0c; x 2 y y 2 z z 2 x x y 2 y z 2 z x 2 x^2yy^2zz^2xxy^2yz^2zx^2 x2yy2zz2xxy2yz2zx2&#xff0c;则 x 、 y 、 z x、y、z x、y、z 共有 ___ 组解。 2、在数 1 、 2 、 …

开发、科研、日常办公工具汇总(自用,持续更新)

主要记录汇总一下自己平常会用到的网站工具&#xff0c;方便查阅。 update&#xff1a;2025/2/11&#xff08;开发网站补一下&#xff09; update&#xff1a;2025/2/21&#xff08;补充一些AI工具&#xff0c;刚好在做AI视频相关工作&#xff09; update&#xff1a;2025/3/7&…

软件架构设计习题及复习

软件系统需求分析 系统需求模型转换为架构模型 软件架构设计 架构风格领域 难点 单选 平衡点是敏感点的一种&#xff0c;如果达到了平衡点一定要选平衡点&#xff0c;不能选敏感点添加层次不能提高系统性能&#xff0c;任何时候直接沟通性能最高效

ccf3501密码

//密码 #include<iostream> #include<cstring> using namespace std; int panduan(char a[]){int lstrlen(a);int s0;int zm0,sz0,t0;int b[26]{0},c[26]{0},d[10]{0},e0,f0;while(s<l&&l>6){if(a[s]<Z&&a[s]>A){b[a[s]-A];zm;}if(a[s…

【JavaEE进阶】Spring事务

目录 &#x1f343;前言 &#x1f334;事务简介 &#x1f6a9; 什么是事务? &#x1f6a9;为什么需要事务? &#x1f6a9;事务的操作 &#x1f340;Spring 中事务的实现 &#x1f6a9;Spring 编程式事务 &#x1f6a9;Spring声明式事务Transactional &#x1f6a9;T…

MySQL索引特性——会涉及索引的底层B+树

1 没有索引&#xff0c;可能会有什么问题 索引&#xff1a;提高数据库的性能&#xff0c;索引是物美价廉的东西了。不用加内存&#xff0c;不用改程序&#xff0c;不用调sql&#xff0c;只要执行正确的 create index &#xff0c;查询速度就可能提高成百上千倍。但是天下没有免…

给单片机生成字库的方案

Python 这段代码用来将txt文件中储存的字符串转变成二进制的像素数据 from PIL import Image, ImageFont, ImageDraw import osdef find_microsoft_yahei():"""Windows系统定位微软雅黑字体"""font_paths ["C:/Windows/Fonts/msyh.ttc&q…

01Spring Security框架

Spring Security是什么&#xff1f; Spring Security是⼀个提供身份验证、授权和针对常见攻击的保护的框架。 Spring Security做什么&#xff1f; 作为开发⼈员&#xff0c;在⽇常开发过程中需要⽤到Spring Security的场景⾮常多。事实上&#xff0c;对Web应⽤程序⽽⾔&#xf…

「BWAPP靶场通关记录(1)」A1注入漏洞

BWAPP通关秘籍&#xff08;1&#xff09;&#xff1a;A1 injection 1.HTML Injection - Reflected (GET)1.1Low1.2Medium1.3High 2.HTML Injection - Reflected (POST)2.1Low2.2Medium2.3High 3.HTML Injection - Reflected (URL)3.1Low3.2/3.3Medium/HIgh 4.HTML Injection - …

机器学习算法实战——敏感词检测(主页有源码)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ ​​​ 1. 引言 随着互联网的快速发展&#xff0c;信息传播的速度和范围达到了前所未有的高度。然而&#xff0c;网络空间中也充斥着大量的…

Ollama+DeepSeek+NatCross内网穿透本地部署外网访问教程

目录 一、Ollama 简介 二、下载Ollama 三、下载并运行 DeepSeek 模型 四、运行 DeepSeek 模型 五、NatCross免费内网穿透 六、配置 ChatBox 连接 Ollama 七、外网使用ChatBox体验 一、Ollama 简介 Ollama 是一个开源的本地大模型部署工具&#xff0c;旨在让用户能够在个…

联想台式电脑启动项没有U盘

开机按F12&#xff0c;进入启动设备菜单&#xff0c;发现这里没有识别到插在主机的U盘&#xff1f; 解决方法 1、选上图的Enter Setup或者开机按F2&#xff0c;进入BIOS设置 选择Startup -> Primary Boot Sequence 2、选中“Excludeed from boot order”中U盘所在的一行 …

开源链动 2+1 模式 AI 智能名片 S2B2C 商城小程序助力社群发展中榜样影响力的提升

摘要&#xff1a;本文深入剖析了社群发展进程中榜样所承载的关键影响力&#xff0c;并对开源链动 21 模式 AI 智能名片 S2B2C 商城小程序在增强这一影响力方面所具备的潜力进行了全面探讨。通过对不同类型社群&#xff0c;如罗辑思维社群和 007 不出局社群中灵魂人物或意见领袖…

《交互式线性代数》

《交互式线性代数》 *Interactive Linear Algebra*由Dan Margalit和Joseph Rabinoff编写&#xff0c;是一本聚焦线性代数的教材。本书旨在教授线性代数的核心概念、方法及其应用&#xff0c;通过代数与几何相结合的方式&#xff0c;帮助读者深入理解线性代数的本质&#xff0c…

CSS -属性值的计算过程

目录 一、抛出两个问题1.如果我们学过优先级关系&#xff0c;那么请思考如下样式为何会生效2.如果我们学习过继承&#xff0c;那么可以知道color是可以被子元素继承使用的&#xff0c;那么请思考下述情景为何不生效 二、属性值计算过程1.确定声明值2.层叠冲突3.使用继承4.使用默…

生活中的可靠性小案例11:窗户把手断裂

窗户把手又断了&#xff0c;之前也断过一次&#xff0c;使用次数并没有特别多。上方的图是正常的把手状态&#xff0c;断的形状如下方图所示。 这种悬臂梁结构&#xff0c;没有一个良好的圆角过渡&#xff0c;导致应力集中。窗户的开关&#xff0c;对应的是把手的推拉&#xff…

怎么解决在Mac上每次打开文件夹都会弹出一个新窗口的问题

在Mac上每次打开文件夹都会弹出一个新窗口的问题&#xff0c;可以通过以下方法解决‌ ‌调整Finder设置‌&#xff1a; 打开Finder&#xff0c;点击“Finder”菜单&#xff0c;选择“偏好设置”。在偏好设置中&#xff0c;选择“通用”标签。取消勾选“在标签页中打开文件夹”或…

HOT100——栈篇Leetcode739. 每日温度

文章目录 题目&#xff1a;Leetcode160. 相交链表原题链接思路代码 题目&#xff1a;Leetcode160. 相交链表 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温…