HTML极速入门

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.mzph.cn/news/720815.shtml

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

相关文章

es6 相关面试题

es6 相关面试题

1 var, let ,const 区别&#xff1f; 2 手写将对象进行合并 手写合并对象 3 普通函数和箭头函数区别&#xff1f; 4 find 和 filter的区别&#xff1f; 5 some和every区别&#xff1f;
阅读更多...
ES核心概念（45-48）（56-62）（101-103）

ES核心概念（45-48）（56-62）（101-103）

ES集群 ES集群&#xff08;Cluster&#xff09;包含多个节点&#xff08;服务器&#xff09;&#xff0c;整体提供服务 核心概念 索引Index&#xff1a;类似于mysql中的表 映射Mapping:数据的结构信息 文档&#xff1a;相当于表中的一条记录 分片&#xff1a; 将数据分成多片…
阅读更多...
Transformer、BERT和GPT 自然语言处理领域的重要模型

Transformer、BERT和GPT 自然语言处理领域的重要模型

Transformer、BERT和GPT都是自然语言处理领域的重要模型&#xff0c;它们之间有一些区别和联系。 区别&#xff1a; 架构&#xff1a;Transformer是一种基于自注意力机制的神经网络架构&#xff0c;用于编码输入序列和解码输出序列。BERT&#xff08;Bidirectional Encoder R…
阅读更多...
java 面试题总结

java 面试题总结

1锁粗化和锁消除&#xff0c;锁膨胀和锁升级的区别。 https://www.cnblogs.com/xuxinstyle/p/13387778.html .无锁 < 偏向锁 < 轻量级锁 < 重量级锁 &#xff0c;说的时候不要忘记说无锁状态 2.Map 的实现&#xff0c;线程安全的实现 1、ConcurrentHashMap在JDK 1.7…
阅读更多...
第五套CCF信息学奥赛c++练习题 CSP-J认证初级组 中小学信奥赛入门组初赛考前模拟冲刺题（阅读程序题）

第五套CCF信息学奥赛c++练习题 CSP-J认证初级组 中小学信奥赛入门组初赛考前模拟冲刺题（阅读程序题）

第五套中小学信息学奥赛CSP-J考前冲刺题 二、阅读程序题 (程序输入不超过数组或字符串定义的范围&#xff0c;判断题正确填√错误填X;除特殊说明外&#xff0c;判断题 1.5分&#xff0c;选择题3分&#xff0c;共计40分) 第一题 递归函数 1 #include<iostream> 2 usin…
阅读更多...
git常用命令集合

git常用命令集合

1.差异对比 显示出branch1和branch2中差异的部分 git diff branch1 branch2 --stat显示出所有有差异的文件的详细差异 git diff branch1 branch2查看branch1分支有&#xff0c;而branch2中没有的log git log branch1 ^branch22.分支 列出所有本地分支 git branch列出所有远…
阅读更多...
学生管理系统（python实现）

学生管理系统（python实现）

新增学生显示学生查找学生删除学生存档到文件 约定好数据的存储格式&#xff1a; 约定把数据保存在和py文件同级目录中&#xff0c;文件名为record.txt 文件内容按照行文本的方式来表示 首先这是一个文本文件&#xff0c;里面包含了很多行&#xff0c;每一行代表一个学生 …
阅读更多...
主要用于工控主板、工业控制器、程序烧录下载器、仿真器、新能源充电桩等众多涉及RS232通讯的产品——D3232

主要用于工控主板、工业控制器、程序烧录下载器、仿真器、新能源充电桩等众多涉及RS232通讯的产品——D3232

一、应用领域 D3232芯片主要用于工控主板、工业控制器、程序烧录下载器、仿真器、新能源充电桩等众多涉及RS232通讯的产品。 二、基本特性 D3232芯片由两个线路驱动器、两个线路接收器和双电荷泵电路组成&#xff0c;具有HBM>15kV、CDM>2kV的ESD保护能力&#xff0c;并且…
阅读更多...
NLP_文本张量表示方法_2（代码示例)

NLP_文本张量表示方法_2（代码示例)

目标 了解什么是文本张量表示及其作用.文本张量表示的几种方法及其实现. 1 文本张量表示 将一段文本使用张量进行表示&#xff0c;其中一般将词汇为表示成向量&#xff0c;称作词向量&#xff0c;再由各个词向量按顺序组成矩阵形成文本表示. ["人生", "该&q…
阅读更多...
【力扣 - 盛最多水的容器】

【力扣 - 盛最多水的容器】

题目描述 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容…
阅读更多...
LeetCode 0232.用栈实现队列：基础数据结构的学习

LeetCode 0232.用栈实现队列：基础数据结构的学习

【LetMeFly】232.用栈实现队列&#xff1a;基础数据结构的学习 力扣题目链接&#xff1a;https://leetcode.cn/problems/implement-queue-using-stacks/ 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff0…
阅读更多...
【源码】imx6ull实现触摸屏单点实验-移植tslib和qt

【源码】imx6ull实现触摸屏单点实验-移植tslib和qt

一、本实验实验的器材&#xff1a; 1.正点原子imx6ull的阿尔法开发板v2.2 2.屏幕ALIENTEK 4.3 RGBLCD 二、实验已经移植好的文件&#xff1a; 仓库代码&#xff1a;https://gitee.com/wangyoujie11/atkboard_-linux_-driver.git 1.文件说明 arm-qt.tar.bz2&#xff1a;移植好的…
阅读更多...
笔记本电脑里回收站删除的文件怎么找回来？这几招帮你恢复

笔记本电脑里回收站删除的文件怎么找回来？这几招帮你恢复

在日常使用笔记本电脑的过程中&#xff0c;我们可能会因为不小心或者误操作&#xff0c;将一些重要的文件删除到回收站&#xff0c;甚至可能直接从回收站中清空。面对这种情况&#xff0c;很多人会感到惊慌失措&#xff0c;不知道如何是好。但其实&#xff0c;即使文件从回收站…
阅读更多...
通过SDKMAN安装各种版本JDK

通过SDKMAN安装各种版本JDK

文章目录 1. 安装SDKMAN管理器2. 通过SDK管理器安装JDK3. 参考链接 1. 安装SDKMAN管理器 安装SDKMAN的脚本为: # 1.1 安装: 如果没有权限可以考虑sudo用户执行; curl -s "https://get.sdkman.io" | bash# 1.2 安装完成后查看版本号 sdk version# 1.3 查看帮助信息 …
阅读更多...
4 款用文本生成视频（text-to-video）的 AIGC 工具推荐

4 款用文本生成视频（text-to-video）的 AIGC 工具推荐

多模态大模型MiniGPT4和LLaVA开源&#xff08;GPT4图文对话平替&#xff09;&#xff1b;MOSS等模型放出权重 - 哔哩哔哩 Runway Gen2 Video-LLaVA: 论文地址:https://arxiv.org/pdf/2311.10122.pdfGitHub 地址:https://github.com/PKU-YuanGroup/Video-LLaVAHuggingface demo…
阅读更多...
TQ15EG开发板教程：创建运行petalinux2019.1

TQ15EG开发板教程：创建运行petalinux2019.1

工程网盘链接&#xff1a;https://pan.baidu.com/s/1vFRpzmbifXt7GypU9aKjeg 提取码&#xff1a;0ylh 首先需要使用与petalinux相同版本的vivado创建工程&#xff0c;与之前不同的是在创建硬件设计时需要勾选上添加bit文件&#xff0c;所以要在生成bit文件之后再创建硬件设计…
阅读更多...
如何搭建Nacos集群

如何搭建Nacos集群

1.搭建Nacos集群 众所周知&#xff0c;在实际的工作中&#xff0c;Nacos的生成环境下一定要部署为集群状态 其中包含3个nacos节点&#xff0c;然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx。 我们计划的集群结构&#xff1a; 我就直接在本机上开三个Nacos来搭…
阅读更多...
【swift】struct与class 的区别

【swift】struct与class 的区别

数据类型&#xff1a;struct是值类型&#xff0c;class是引用类型。 值类型变量直接包含数据&#xff0c;赋值时也是值拷贝&#xff0c;或者叫深拷贝&#xff0c;所以多个变量的操作不会相互影响。 引用类型变量存储的是对数据的引用地址&#xff0c;后者称为对象&#xff0c;…
阅读更多...
Spring(22) Spring中的9种设计模式

Spring(22) Spring中的9种设计模式

目录 一、简单工厂模式&#xff08;Simple Factory&#xff09;二、工厂方法模式&#xff08;Factory Method&#xff09;三、单例模式&#xff08;Singleton&#xff09;四、适配器模式&#xff08;Adapter&#xff09;五、代理模式&#xff08;Proxy&#xff09;七、观察者模…
阅读更多...
【StarryCoding P101】排水管道 题解（单调栈+贪心算法）

【StarryCoding P101】排水管道 题解（单调栈+贪心算法）

[P101] 排水管道 问题描述 给定一个长度为 n n n 的数组 a a a &#xff0c;请问至少修改多少个元素&#xff0c;可以使得数组成为一个严格上升的序列。 数组中需要时刻保持 a i > 0 a_i > 0 ai​>0。 输入描述 第一行一个整数 T T T 表示测试用例个数。 ( …
阅读更多...
最新文章

Copyright @ 2022~2023