HTML极速入门

news2024/9/23 13:24:50

HTML基础

什么是HTML

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

超文本:比文本更强大.通过链接和交互式方式来组织和呈现信息的文本形式.不仅仅有文本,还可能包括图片,音频,或者自己经审阅过它的学者所加的评注,补充或脚注等.

标记语言:由标签构成的语言

HTML的标签都是提前定义好的,使用不同的标签以表示不同的内容.

类似于飞书文档,Word文档.

如果选中文本,点击标题1,就会使用标题1的样式来显示文本,上述标题1就是一个标签.

比如下方代码(编译器使用的是vscode):

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

经过浏览器的解析如下:

 

上面代码中<h1><h2><h3>就是标签.

学习HTML主要就是学习标签.

认识HTML标签

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

标签名(body)放到<>中

大部分标签成对出现. eg.<h1>为起始标签, </h2>为结束标签.

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

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

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

<h3 id="myId">我是三级标题</h3>

 HTML文件基本结构

<html>
    <head>
        <title>第⼀个⻚⾯</title>
    </head>
    <body>
        hello world
    </body>
</html>

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

head标签写页面的属性.

body标签写的是页面上的内容.

title标签写的是页面的标题.

标签层次结构

父子关系

兄弟关系

<html>
    <head>
        <title>第⼀个⻚⾯</title>
    </head>
    <body>
        hello world
    </body>
</html>

其中:
head和body是html的子标签(html就是head和body的父标签).

title是head的子标签.head是title的父标签.

head和body之间是兄弟关系. 

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

HTML快速入门

开发工具

HTML可以使用系统自带的记事本来编写,但是非常不方便,作者使用的是:Visual Studio Code.

快速开发

在VS Code中创建文件 xxx.html(需要提前下载插件:open in 和 auto rename),直接输入!,按Enter或Tab键,此时能自动生成代码的主题框架.

<!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>
    
</body>
</html>

 在<body></body>标签中,书写任意文字,按Crtl+s保持文件,通过浏览器访问即可(通过右击文件然后这么做(前提是你下好了open in):).

 HTML常见标签

标题标签h1-h6

有6个,从h1到h6,数字越大则字体越小.

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

 段落标签:p

在HTML中,段落,换行符,空格都会失效,如果需要分成段落,需要使用专门的标签.

p标识表示一个段落.

<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>

p标签描述的段落,前面没有缩进(未来CSS会学)

自动根据浏览器宽度来进行排版.

html内容首位处的换行,空格均无效.

在html中文字之间输入的多个空格只相当于一个空格.

html中直接输入换行不会真的换行,只是相当于一个空格 

换行标签:br 

想要完成换行的话,也可以通过<br/>标签来实现.(br是break的缩写,表示换行).

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

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

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

 

图片标签:img

 img标签必须带有src属性,表示图片的路径.

<img src="rose.jpg">

此时要把rose.jpg这个图片文件放到和html中的同级目录中.

img标签的其它属性

width/height:控制宽度高度.高度和宽度一般改一个就行,另外一个会等比例缩放.否则就会图片失衡.

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

上面两个的单位:px.

注意:

1.属性可以有多个,不能写到标签之前.

2.属性之间用空格分割,可以是多个空格,也可以是换行.

3.属性之间不分先后顺序.

4.属性使用"键值对"的格式来表示.

超链接:a

href:必须具备,表示点击后会跳转到哪个页面.

target:打开方式.默认是_self.如果是_blank则用新的标签页打开.

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

链接的几种形式:

外部链接:href引用其它网站的网址.

内部链接:网站内部页面的链接,先创建一个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> 

空链接:使用#进行占位.

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

表格标签

table标签:表示整个表格

tr:表示表格中的一行

td:表示一个单元格

thead:表格的头部区域

tbody:表格的主体区域.

table包含tr, tr包含td.

表格标签中有一些属性,可以用于设置大小边框等.但是一般使用CSS方法来设置 .

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

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

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

cellpadding:内容举例边框的距离,默认是1像素.

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

width/height:设置尺寸.

表单标签

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

分成两个部分:

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

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

form标签

<form action="test.html">
... [form 的内容]
</form>

描述了要把数据按照什么样的方式,提交到哪个页面中.

input标签

各种输入控件,单行文本框,按钮,复选框.

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

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

value:input中的默认值.

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

下面介绍一些常用的类型:

1.文本框

<input type="text">

2.密码框

<input type="password">

3.单选框

性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="chkecked">女

注意:单选框之间必须具备相同的name属性,才能实现多选1的效果.

4.复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打豆豆

 5.普通按钮

<input type="button" value="我是个按钮">

当前点击没有反应,需要搭配JS使用.

<input type="button" value="我是个按钮" onclick="alert('原神启动')">

 6.提交按钮

<from action="示例.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</from>

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

 select标签

下拉菜单

option中定义selected="selected"表示默认选中.

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

textarea标签

<textarea rows="3" cols="50">

</textarea>

 文本域中的内容,都是默认内容,注意:空格也有影响.

rows和cols也都不会直接使用,都是使用CSS来改的.

无语义标签:div&span

div标签,division的缩写,含义是分割

span标签,含义是跨度.

就是两个盒子,用于网页布局.

div是独占一行的,是一个大盒子.

span不独占一行,是一个小盒子.

综合练习:用户注册

用户注册页面

提示:

使用表格进行整体布局.

使用各种input标签实现页面中的输入控件. 

 

<h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input text="password" placeholder="请输入密码"></td>
        </tr>
    </table>
    <div>
        <input type="button" value="注册">
        <span>已有帐号?</span><a href="#">登录</a></br>
    </div>

 

 

 

 

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

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

相关文章

【JavaEE进阶】部署Web项目到Linux服务器

【JavaEE进阶】部署Web项目到Linux服务器

文章目录 &#x1f343;前言&#x1f340;什么是部署&#x1f332;环境配置&#x1f6a9;数据准备&#x1f6a9;程序配置⽂件修改 &#x1f384;构建项目并打包&#x1f38b;上传Jar包到服务器,并运行&#x1f6a9;上传Jar包&#x1f6a9;运行程序&#x1f6a9;开放端口号 &…
阅读更多...
Material UI 5 学习02-其它按钮组件

Material UI 5 学习02-其它按钮组件

Material UI 5 学习02-其它按钮组件 一、IconButton按钮二、 ButtonGroup按钮组1、最基本的实例2、垂直按钮组 一、IconButton按钮 图标按钮通常适用于切换按钮&#xff0c;允许选择或选择单个选项 取消选择&#xff0c;例如在项目中添加或删除星号。 <IconButton aria-lab…
阅读更多...
Java多线程卖包子问题（附多种实现方式）

Java多线程卖包子问题（附多种实现方式）

前提条件&#xff1a;生产者生产包子&#xff0c;但是包子总数不得超过10个&#xff0c;消费者有包子就购买 第一种&#xff1a;通过wait()和notify()来实现 在这个实例中&#xff0c;生产者和消费者通过wait()和notify()来进行通讯&#xff0c;再通过synchronized 块来确保线…
阅读更多...
Java中文件的相关知识及文件IO操作

Java中文件的相关知识及文件IO操作

在我们日常生活中&#xff0c;会把许多东西都称之为文件。比如&#xff0c;一份纸质报告&#xff0c;或u盘中的一些文档&#xff0c;都会把它们称为文件。那么&#xff0c;这里说的文件是以操作系统的角度出发的。在操作系统中&#xff0c;会把许多硬件设备和软件资源都抽象成“…
阅读更多...
【STM32】STM32学习笔记-读写内部FLASH 读取芯片ID(49)

【STM32】STM32学习笔记-读写内部FLASH 读取芯片ID(49)

00. 目录 文章目录 00. 目录01. FLASH概述02. 读写内部FLASH接线图03. 读写内部FLASH相关API04. 读写内部FLASH程序示例05. 读写芯片ID接线图06. 读写芯片ID程序示例07. 程序示例下载08. 附录 01. FLASH概述 STM32F10xxx内嵌的闪存存储器可以用于在线编程(ICP)或在程序中编程(…
阅读更多...
yolov9训练

yolov9训练

目录 说明 1、下载代码安装新的python环境 2、准备数据 3、修改代码 说明 本文参考该博主的文章&#xff0c;在已经有数据的情况&#xff0c;进行简单总结。需要详细版见原文链接如下&#xff1a;YOLOV9保姆级教程-CSDN博客 1、下载代码安装新的python环境 代码下载&…
阅读更多...
【数据结构和算法初阶(C语言)】带环链表问题详解（快慢指针的烧脑应用）

【数据结构和算法初阶(C语言)】带环链表问题详解（快慢指针的烧脑应用）

目录 1.铺垫-----带环链表基本了解 2. 题目&#xff1a;环形链表 3.环形链表|| ​编辑 3.1题解1 3.2 题解2 4.总结 1.铺垫-----带环链表基本了解 环形链表题目启迪&#xff1a; 环形链表特点&#xff1a;遍历链表会出现一模一样的地址 2. 题目&#xff1a;环形链表 给…
阅读更多...
如何使用 ArcGIS Pro 制作三维地形图

如何使用 ArcGIS Pro 制作三维地形图

伴随硬件性能的提高和软件算法的优化&#xff0c;三维地图的应用场景会越来越多&#xff0c;这里为大家介绍一下在ArcGIS Pro怎么制作三维地形图&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的DEM和影像数据&#xff0c;除了DEM和影像数据…
阅读更多...
笨办法学 Python3 第五版（预览）（二）

笨办法学 Python3 第五版（预览）（二）

原文&#xff1a;Learn Python the Hard Way, 5th Edition (Early Release) 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 练习 19&#xff1a;函数和变量 现在你将把函数与你从之前练习中了解到的变量结合起来。如你所知&#xff0c;变量给数据片段一个名称&#x…
阅读更多...
Spring Boot项目中不使用@RequestMapping相关注解，如何动态发布自定义URL路径

Spring Boot项目中不使用@RequestMapping相关注解，如何动态发布自定义URL路径

一、前言 在Spring Boot项目开发过程中&#xff0c;对于接口API发布URL访问路径&#xff0c;一般都是在类上标识RestController或者Controller注解&#xff0c;然后在方法上标识RequestMapping相关注解&#xff0c;比如&#xff1a;PostMapping、GetMapping注解&#xff0c;通…
阅读更多...
⭐每天一道leetcode：21.合并两个有序链表（简单；双指针）

⭐每天一道leetcode：21.合并两个有序链表（简单；双指针）

⭐今日份题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例2 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[] 示例3 输入…
阅读更多...
【机器学习】包裹式特征选择之递归特征添加法

【机器学习】包裹式特征选择之递归特征添加法

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…
阅读更多...
Unity 摄像机的深度切换与摄像机画面投影

Unity 摄像机的深度切换与摄像机画面投影

摄像机可选&#xff1a;透视、正交 正交类似投影&#xff0c;1比1 透视类似人眼&#xff0c;近大远小 摄像机投影 在项目中新建&#xff1a;渲染器纹理 将新建纹理拖动到相机的目标纹理中 新建一个平面&#xff0c;将新建材质组件放到平面中即可。 相机深度切换 使用代…
阅读更多...
探索Java开发面试笔记：以听为目的，助力编程技术提升与面试准备

探索Java开发面试笔记：以听为目的，助力编程技术提升与面试准备

文章目录 一、制作背景介绍二、 Java开发面试笔记&#xff1a;为你的编程之路加速2.1 公众号主题和目标读者群体2.2 为什么面试笔记对于提高编程视野和技术至关重要2.3 親測效率 三、形式案例3.1 文章形式3.2 手机案例3.3 电脑案例 一、制作背景介绍 做公众号的背景&#xff1a…
阅读更多...
十九 超级数据查看器 讲解稿 分栏功能

十九 超级数据查看器 讲解稿 分栏功能

十九 超级数据查看器 讲解稿 分栏功能 点击此处观看视频教程 讲解稿全文: 大家好&#xff0c;这讲介绍一下 &#xff0c;超级数据查看器的分栏功能。 分栏功能设计的初衷是为了让用户同时同地查询两个表格的数据&#xff0c;方便比较&#xff0c;获得更清晰的查询结果 分栏功…
阅读更多...
模型优化_XGBOOST学习曲线及改进，泛化误差

模型优化_XGBOOST学习曲线及改进，泛化误差

代码 from xgboost import XGBRegressor as XGBR from sklearn.ensemble import RandomForestRegressor as RFR from sklearn.linear_model import LinearRegression as LR from sklearn.datasets import load_boston from sklearn.model_selection import train_test_split,c…
阅读更多...
如何添加极狐GitLab Runner 信任域名证书

如何添加极狐GitLab Runner 信任域名证书

本文作者 徐晓伟 极狐Gitlab Runner 信任实例域名证书&#xff0c;用于注册注册极狐 GitLab Runner。 问题 参见 极狐gitlab-runner-host.md 说明 解决方案是使用颁发给域名 gitlab.test.helm.xuxiaowei.cn 的证书&#xff0c;可以使用自己的域名去各大云厂商免费申请&#…
阅读更多...
重学SpringBoot3-yaml文件配置

重学SpringBoot3-yaml文件配置

重学SpringBoot3-yaml文件配置 引言YAML 基本语法YAML 数据类型YAML 对象YAML 数组复合结构标量引用 YAML 文件结构Spring Boot 中的 YAML 配置注意事项总结参考 引言 YAML&#xff08;YAML Ain’t Markup Language&#xff09;是一种常用于配置文件的数据序列化格式&#xff…
阅读更多...
Unity3D

Unity3D

一、C# 输入输出 二、三维数学
阅读更多...
CSS变量和@property

CSS变量和@property

CSS变量 var() CSS 变量是由CSS作者定义的实体&#xff0c;其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名&#xff0c;并使用特定的 var() 来访问。&#xff08;比如 color: var(--main-color);&#xff09;。 基本用法 CSS变量定义的作用域只在定义该…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023