自学前端第一天

ops/2024/9/23 14:31:03/

HTML标签

’HTML‘全程是‘hypertext Markup langage(超文本标记语言) HTML通过一系列的’标签(也称为元素)‘来定义文本、图像、链接。HTML标签是由尖括号包围的关键字。

标签通常成对存在,包括开始标签和结束标签(也称为双标签),内容位于两个标签之间,例如:

<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>

 除了双标签,也存在单标签,例如:

<input type="text"
<br>
<hr>

区别:单标签用于没有内容的元素,双标签用于有内容的元素。

HTML文件结构

<!-- 这里放置文档的元信息 -->
<!DOCTYPE html>//告诉浏览器这是一个HTML文件
<html>//HTML标签对,也是根元素,HTML的起始点也是文档的最外层容器,包含整个文档的结构<head>文档的头部,包含了文档的原信息<!-- 这里放置文档的元信息 --><title>文档标题</title>文档标题<meta charset="UTF-8">文档编码格式<!-- 连接外部样式表或脚本文件等 --><link rel="stylesheet" type="text/css" href="styles.css">外部样式表css文件<script src="script.js"></script>外部样式表js文件</head><body>实际显示浏览器页面的内容比如文本,图像,链接等<!-- 这里放置页面内容 --)<h1>这是一个标题</h1><p>这是一个段落。</p >这是一个链接<!-- 其他内容 --></body>
</html>//HTML标签对,也是根元素

各个标签的含义

</head><body><h1>一级标题标签</h1><h2>二级标题标签</h2><h3>三级标题标签</h3><h4>三级标题标签</h4><h5>四级标题标签</h5><p>这是一个段落标签</p><p>更改文本样式:<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p><ul>/无序列表<li>无序列表元素一</li><li>无序列表元素二</li><li>无序列表元素三</li></ul><ol>//有序列表<li>有序列表元素一</li><li>有序列表元素二</li><li>有序列表元素三</li></ol><h1>table row</h1><h2>table date</h2><h3>table header</h3><table border="1"> //制作表格 <tr><th>列标题1</th><th>列标题2</th><th>列标题3</th></tr><tr><td>元素1</td><td>元素2</td><td>元素3</td></tr><tr><td>元素11</td><td>元素12</td><td>元素13</td></tr><tr><td>元素21</td><td>元素22</td><td>元素23</td></tr></table></body></html>

HTML属性

属性在HTML中起到非常重要的作用,它们用于定义元素的行为外观,以及与其他元素的关系

基本语法:

<开始标签 属性名=“属性值”>

每个HTML元素可以具有不同的属性

<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>

属性名称不区分大小写,属性值对大小写敏感

<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
<!--前两者相同,第三个与前两个不一样-->
属性描述
class为HTML元素定义一个或多个类名(类名从样式文件引入)
id定义元素唯一id
style规定元素的内行样式

例如:

<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>

<a>标签常用于创建链接到其他的网页或者位置

href属性定义了这个链接到的目标,可以是其他网页的URL文件的路径、电子邮箱地址、手机号等。

target属性定义链接的打开方式,

_self是一个默认值表示链接在当前窗口或者标签页中打开

_blank表示链接将会在新的窗口或者标签页打开

_parent表示链接在副窗口或者副框架中打开

_top表示链接在顶层窗口或者顶层框架中打开

例如:

    <a href="https://docs.geeksman.com">这是一个超链接</a> <br> //换行标签  <a href="https://docs.geeksman.com"target="_blank">这是二个超链接</a><br><a href="https://docs.geeksman.com"target="_self">这是三个超链接</a><br><a href="https://docs.geeksman.com"target="_parent">这是四个超链接</a><br><a href="https://docs.geeksman.com"target="_top">这是五个超链接</a><hr>//水平分割线

img图片标签

src属性定义了要显示图像文件的路径或者URL,可以是文件的相对路径、绝对路径,也可以是一个URL。

alt属性用于定义图像的这个替代文本,图片如果无法加载,浏览器就会显示出来alt属性中指定的文本。

设置图像的宽高

width属性设置宽度:height属性设置高度。

   	<img src="logo.jpg" alt=""width="500"height="400"><hr><img src="log.jpg" alt="该图片无法显示"><hr><img src="" alt="">

HTML区块 - 块元素与行内元素(HTML 重要概念,学习CSS的前置内容)

快元素(block)

块级元素通常用于组织和布局页面的主要结构和内容,例如段落、标题、列表、表格等。它们用于创建页面的主要部分,将内容分隔成逻辑块。

快级元素通常会从新行开始,并占据整行的宽度,因此它们会在页面上呈现为一块独立的内容块。

可以包含其他块级元素和行内元素。

常见的块级元素包括<div>,<p>,<h1>到<h6>,<ul>,<ol>,<li>,<table>,<from>等。

行内元素(inline)

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素,例如超链接、强调文本等。

行内元素通常在同一行内呈现,不会独占一行。

它们只占据其内容所需的宽度,而不是整行的宽度。

行内元素不会包含块级元素,但可以包含其他行内元素。

常见的行内元素包括<span>,<a>,<strong>,<em>,<img>,br,<input>等。

div标签是一个块级标签通常用于创建一个可以包含其他HTML元素的容器块,没有任何语意,仅用于组织内容,创建页面的布局结构。

比如用div标签创建网页不同的部分,例如:页眉、导航栏、侧边栏、中间的内容区域、页角。

<div class="nav">//导航栏<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a><a href="#">链接5</a></div><div class="content">//主题内容区域<h1>文章标题</h1><p>文章内容</p> <p>文章内容</p> <p>文章内容</p> <p>文章内容</p> <p>文章内容</p> </div>

span标签相对于没有特殊元素的a标签和img标签,主要作用就是把一小部分文本给包装起来以便于它们使用样式、CSS,或者使用 JS 行为,span为行内元素,只会独占一行,只会占据它内容所需的一个宽度。

例如

 <span>这是第 1 个 span 标签</span><span>这是第 2 个 span 标签</span><span>这是第 3 个 span 标签</span><span>这是第 4 个 span 标签</span><span>这是第 5 个 span 标签</span><hr><span>链接点击这里 <a href="#">链接</a>   </span

总结:div标签通常用于创建块级容器以便于组织页面的结构和布局,而span标签,用于内联样式化文本给文本的一部分应用样式或者是标记使用这两个标签通常是与CSS和 JS 一起使用的,这样能实现更加复杂的页面布局和样式化。

HTML表单

form是表单的容器

action表示我们提交标签的时候,向何处发送我们的数据,action的属性值也就是URL,需要服务器也就是后端提供给我们的API

‘#’表示不跳转,锚点占位的作用

input是一个单标签

type属性规定了input元素的类型

placeholder属性的作用是在这个属性值里面填写你想要让它在文本框中显示的内容。给用户填写字段的标识

value属性的作用就是规定我们这个input元素的值

label标签专门为input元素做标记的标签,作用与span标签差不多,仅限于和input对应使用

radio单选,checkbox多选 id唯一 ,class不唯一

for属性是可以将label标签给绑定到input元素,一般input中的for属性与input中id所对应的,id对于每个元素每个标签都是唯一的

submit 显示提交,提交表单的数据。

<form><label for="username">用户名:</label><input type="text" id="username" placeholder="请输入用户名"><br><br><label for="pwd">密码:</label><input type="password" id="pwd" placeholder="请输入内容"><br><br><label >性别:</label><input type="radio" name="gender"> 男<input type="radio" name="gender"> 女<input type="radio" name="gender"> 其他<label>爱好 :</label><input type="checkbox" name="hobby"> 唱歌<input type="checkbox" name="hobby"> 跳舞<input type="checkbox" name="hobby"> rap<input type="checkbox" name="hobby"> 篮球<br><br>        <input type="submit" value="上传"></form>

注:刚开始接触前端,希望有大佬提出建议,本人虚心学习。


http://www.ppmy.cn/ops/49919.html

相关文章

计算机行业

计算机行业环境分析 2022.01.12 计算机行业环境分析 计算机专业就业前景 随着科技的进步和信息事业的发展&#xff0c;尤其是计算机技术的发展与网络应用的逐渐普及。计算机已成为人们工作和生活中不可缺少的东西。IT行业迅猛发展&#xff0c;就业工作岗位也比比皆是。在最近…

【机器学习】机器学习重要分支——强化学习:从理论到实践

文章目录 强化学习&#xff1a;从理论到实践引言第一章 强化学习的基本概念1.1 什么是强化学习1.2 强化学习的基本组成部分1.3 马尔可夫决策过程 第二章 强化学习的核心算法2.1 Q学习2.2 深度Q网络&#xff08;DQN&#xff09;2.3 策略梯度方法 第三章 强化学习的应用实例3.1 游…

有趣的算法题之机器人

小码哥与机器人 小码哥新买了一个机器人&#xff0c;但是这个机器人因为很便宜只能做三个动作。 三个动作: 前进 FD &#xff0c;倒退 BK 和重复 REPEAT 。 FD 后加数字表示前进多少步&#xff1b; BK 后加数字表示后退多少步&#xff1b; REPEAT 后加数字再加方括号&#xf…

【实例分享】访问后端服务超时,银河麒麟服务器操作系统分析及处理建议

1.服务器环境以及配置 【机型】 处理器&#xff1a; Intel 32核 内存&#xff1a; 128G 整机类型/架构&#xff1a; x86_64虚拟机 【内核版本】 4.19.90-25.22.v2101.kylin.x86_64 【OS镜像版本】 kylin server V10 SP2 【第三方软件】 开阳k8s 2.问题现象描述 …

探索PostgreSQL:从基础到进阶的实用教程

PostgreSQL是一种强大、开源的对象关系型数据库管理系统,广泛应用于各类数据密集型应用中。本文将带领你从基础知识到高级特性,全面了解PostgreSQL的使用和管理技巧,帮助你在工作和学习中得心应手。 一、PostgreSQL简介 PostgreSQL是什么 PostgreSQL,简称Postgres,是一个…

大众点评_token,mtgsig

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 本文章未经许可禁止转载&#xff0…

LLVM Cpu0 新后端10

想好好熟悉一下llvm开发一个新后端都要干什么&#xff0c;于是参考了老师的系列文章&#xff1a; LLVM 后端实践笔记 代码在这里&#xff08;还没来得及准备&#xff0c;先用网盘暂存一下&#xff09;&#xff1a; 链接: https://pan.baidu.com/s/1yLAtXs9XwtyEzYSlDCSlqw?…

【SCAU数据挖掘】数据挖掘期末总复习题库判断题及解析

1.离群点可以是合法的数据对象或者值。( ✓) 解析:离群点(Outliers)通常是与数据集中其他数据显著不同的数据点,但它们可以是合法的数据值。这些值可能是由于测量误差、数据录入错误、数据分布的自然属性等原因产生的。 3.关联规则挖掘过程是发现满足最小支持度的所有项集…