自学前端第一天

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.mzph.cn/bicheng/28359.shtml

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

相关文章

探索AI创新的前沿——从零开始学习和运用SpringAI

1.SpringAI介绍 SpringAI是AI工程师的一个应用框架&#xff0c;它提供了一个友好的API和开发AI应用的抽象&#xff0c;旨在简化AI应用的开发工序。 目标是将可移植性和模块化设计等设计原则应用于AI领域的Spring生态系统&#xff0c;并将POJO作为应用程序的构建块推广到AI领域…

浅谈赚钱的四个级别,你在哪一层呢

一谈到赚钱&#xff0c;很多人都会扯到&#xff1a;智商、情商、人脉、资源、背景等等&#xff0c;类似“小钱靠勤&#xff0c;中钱靠智&#xff0c;大钱靠德”这样的经典语录都会脱口而出&#xff0c;其实从本质上来讲&#xff0c;都没有错&#xff0c;但这样的说法太缥缈&…

mysql-connector下载教程(手把手)

下载一个第三方库主要有三种途径&#xff1a; 去官方网站 Oracle 官网去github去Maven中央仓库 前两个方法比较麻烦&#xff0c;你还需要去找。 这里就只介绍maven的方法 Maven类似于手机app的应用商店。 操作步骤&#xff1a; 点击右边进入官网Maven中央仓库 在搜索框中…

k8s+pv+pvc+nas 数据持久化volumes使用

1 k8s pod申请持久化卷配置 apiVersion: v1 kind: Service metadata:name: $IMG_NAMEnamespace: rz-dtlabels:app: $IMG_NAME spec:type: NodePortports:- port: 8091nodePort: 31082 #service对外开放端口selector:app: $IMG_NAME --- apiVersion: apps/v1 kind: Deployment …

FineReport简单介绍(2)

一、报表类型 模板设计是 FineReport 学习过程中的主要难题所在&#xff0c;FineReport 模板设计主要包括普通报表、聚合报表、决策报表三种设计类型。 报表类型简介- FineReport帮助文档 - 全面的报表使用教程和学习资料 二、聚合报表 2-1 介绍 聚合报表指一个报表中包含多个…

C# —— do_while循环

基本语法 while 循环 先判断条件是否满足 再进行循环 do...while 循环 是先执行一遍 循环体里面的逻辑 再判断是否继续执行 do{// do while 循环语句块Console.WriteLine("这是一个do...while循环");} while (bool值)(循环判断条件);*//*do{Console.WriteLine(&qu…

机器学习笔记 - 用于3D点云数据分割的Point Net的训练

一、数据集简述 ​在本教程中,我们将学习如何在斯坦福 3D 室内场景数据集 ( S3DIS )上训练 Point Net 进行语义分割。S3DIS 是一个 3D 数据集,包含来自多栋建筑的室内空间点云,占地面积超过 6000 平方米。Point Net使用整个点云,能够执行分类和分割任务。如果你一直在关注 …

openstack搭建

openstack搭建 1、虚拟机部署规划 主机主机名IP规划实例通讯内部通讯控制节点controller192.168.10.144192.168.1.144实例节点compute192.168.10.145192.168.1.145 2、硬件配置 主机名内存逻辑CPU数量硬盘容量controller4G480Gcompute4G480G20G 3、安装centos7&#xff0c…

Science:如何快速完成一篇研究性论文?

我是娜姐 迪娜学姐 &#xff0c;一个SCI医学期刊编辑&#xff0c;探索用AI工具提效论文写作和发表。 完成一篇研究性论文&#xff0c;是将长时间积累的研究成果凝聚在几页纸中&#xff0c;对资深科学家而言也是一大挑战。作者们需要在充分论述科学问题和详细展示结果之间找到平…

javaweb 期末复习

1. JDBC数据库连接的实现逻辑与步骤以及JDBC连接配置&#xff08;单列模式&#xff09; public class JDBCUtil {// 这些换成自己的数据库 private static final String DB_URL "jdbc:mysql://localhost:3306/你的数据库名称";private static final String USER &q…

MySQL 保姆级教程(五):数据过滤

第 7 章 数据过滤 7.1 组合 WHERE 子句 MySQL 允许给出多个 WHERE 子句&#xff0c;这些子句可用用两种方式使用&#xff1a;AND 或 OR 操作符 7.1.1 AND 操作符 输入: SELECT server_cost.cost_name,server_cost.cost_value,server_cost.default_value FROM server_cost W…

linux中批量给文件改名

rename 需要批量将文件名前的UC-10_取消掉&#xff0c;以数字来命名文件 rename s/UC-10_// *.jpg 修改成功 要是修改为其他名字需要在单引号的第二个/后加字符即可 例如要改为li

基于 SSM 框架的二手书交易系统

基于 SSM 框架的二手书交易系统 一、项目介绍二、项目技术栈三、项目运行四、项目演示总结 大家好&#xff0c;这里是程序猿代码之路。在当今环保意识日益增强和资源节约型社会建设的背景下&#xff0c;二手交易作为一种节省资源和降低成本的消费方式越来越受到人们的欢迎。特别…

基于Java和SSM框架的多人命题系统

你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果你对多人命题系统感兴趣或者有相关开发需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java SSM框架 工具&#xff1a;Eclipse、MySQL Workbench、…

C++全栈聊天项目(22) 气泡聊天对话框

气泡聊天框设计 我们期待实现如下绿色的气泡对话框 对于我们自己发出的信息&#xff0c;我们可以实现这样一个网格布局管理 NameLabel用来显示用户的名字&#xff0c;Bubble用来显示聊天信息&#xff0c;Spacer是个弹簧&#xff0c;保证将NameLabel,IconLabel&#xff0c;Bubb…

Java小结

# Java的特点 Java是一门面向对象的编程语言。面向对象和面向过程的区别参考下一个问题。 Java具有平台独立性和移植性。 Java有一句口号&#xff1a;Write once, run anywhere&#xff0c;一次编写、到处运行。这也是Java的魅力所在。而实现这种特性的正是Java虚拟机JVM。已…

Hvv--知攻善防应急响应靶机--Linux1

HW–应急响应靶机–Linux1 所有靶机均来自 知攻善防实验室 靶机整理&#xff1a; 夸克网盘&#xff1a;https://pan.quark.cn/s/4b6dffd0c51a#/list/share百度云盘&#xff1a;https://pan.baidu.com/s/1NnrS5asrS1Pw6LUbexewuA?pwdtxmy 官方WP&#xff1a;https://mp.weixin.…

Linux,shell ,gun基本概念和关系

Linux 系统简单架构图 1、命令行界面&#xff08;CLI&#xff09;和图形用户界面 (GUI) 1、图形界面就是我们常用的windows系统这种&#xff0c;打开文件&#xff0c;双击一下。想选择哪个文件&#xff0c;就鼠标移动到哪里选择就行。 2、命令行界面就是下面这种只有黑乎乎的…

代码随想录二刷DAY1~3

Day1 704 二分查找&#xff0c;简单 我也有自己写题解的能力了&#xff0c;而且思维很清晰&#xff1a; 找什么就在if里写什么。 class Solution {public: int search(vector<int>& nums, int target) { int l0,rnums.size()-1; while(l<r){ …

算法体系-21 第二十一 暴力递归到动态规划(三)

一 最长回文子串 1.1 描述 给定一个字符串str&#xff0c;返回这个字符串的最长回文子序列长度 比如 &#xff1a; str “a12b3c43def2ghi1kpm” 最长回文子序列是“1234321”或者“123c321”&#xff0c;返回长度7 1.2 分析 1.2.1 先将原传逆序&#xff0c;求原串和反转后的…