前端——HTML基础学习【part 1】

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量190 收藏 1
点赞数 3
分类专栏： HTML基础学习 文章标签： 前端 html 学习 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73958269/article/details/129752867
版权

语法规范

1.所有的标签都必须包含在“< >”中间；
2.绝大部分HTML标签都是成对出现（双标签），例如： 。个别的HTML标签是单个出现（单标签）;
在这里插入图片描述

标签关系

  1. 包含关系（父子关系）

在这里插入图片描述
2.并列关系（兄弟关系）
在这里插入图片描述

HTML基本结构标签

  • <html> </html>是页面中最大的标签（根标签）
  • <head> </head>标签的头部
  • <title> </title>网页的标题
  • <body> </body>网页的所有内容
    在这里插入图片描述

VScode的常用快捷键

1.复制某一行；
shift+alt+下箭头
2.选定多个一样的单词；
ctrl+d（先双击选择一个单词，按下快捷键）
3.全局替换某一个单词；
ctrl+h

!DOCTYPE和lang以及字符集的作用

1.文档类型声明标签<！DOCTYPR html>
采取的是HTML5版本来显示网页
2.lang语言种类<html lang="en">
定义当前网页显示的语言（“en”是英文网页，“zh-CN”是中文网页）
3.字符集< meta charset="UTF-8">
在<head>标签里，通过<meta>标签的charest属性来规定HTML网页应该使用哪种字符编码（这个代码一定要写!!!）
在这里插入图片描述

HTML的标签【上】

1.标题标题标签<h1>——<h6>（是双标签</h1>——</h6>）
在这里插入图片描述
在这里插入图片描述
2.段落标签<p>——</p>
定义段落，将网页分成若干段落
3.换行标签<br>（单标签）
4.文本格式化标签（设置文字加粗，斜体，删除线 等表现）
（1）加粗 <strong>——</strong>``````<b>——</b>
（2）倾斜<em>——</em>``````<i>——</i>
（3）删除线<del>——</del>``````<s>——</s>
（3）下划线<ins>——</ins>``````<u>——</u>
在这里插入图片描述
在这里插入图片描述
5.

和 标签（用来布局网页）
（1）<div>——</div>（大盒子：一个div独占一行）
（2）<span>——</span>（小盒子：一行可以放多个span）

6.图像标签和路径
（1）图像标签<img src=“图像URL”/>（单标签）
src是<img>标签中的必须属性，它用于指定图像文件的路径和文件名![在这里插入图片描述](https://img-blog.csdnimg.cn/92adc70363e04430ac6e76294cf984d6.png#pic_center
在这里插入图片描述
在这里插入图片描述
补充：
<img>的其他属性
【1】 alt替换文本，图像显示不出来的时候用文字替换
![在这里插入图片描述](https://img-blog.csdnimg.cn/d6a32494278f4aa39a8a46f693355a8a.png#pic_center
在这里插入图片描述
在这里插入图片描述
【2】 title提示文本，鼠标移动到图像上，显示的文字
在这里插入图片描述
【3】 width宽度
【4】 height高度
【5】 border边框粗细
在这里插入图片描述
（2）路径
【1】目录文件夹：包含了做网页所需要的各种素材的一个普通文件夹
【2】根目录：打开目录文件夹的第一层就是根目录
【3】相对路径：
同一级路径
下一级路径 /
在这里插入图片描述
上一级路径 …/
在这里插入图片描述
【4】绝对路径：
<img src="C:\Users\lenovo\Desktop\前端学习\高数（1）.jpg" />

7.超链接标签
<a href="跳转目标"（地址）target="目标窗口的弹出方式">文本或者图像</a>
（1）href后接目标地址（http://+地址）
（2）指定链接的打开方式_self是在当前页面打开，_blank是在新窗口中打开
（3）链接分类
外部链接：
在这里插入图片描述
内部链接：网站内部页面之间的相互链接
空链接：
在这里插入图片描述
下载链接：href后面是文件或者压缩包

网页元素链接：很多网页元素，文本，图像，表格都可以添加超链接
锚点链接：点击链接后快速定位到该页面的某个位置
<a href="#live"> 生活</a>
<h4 id="live"> 我的生活很累</h4>
8.注释
<!--内容-->（不会显示在页面内）
快捷键：ctrl+/
9. 特殊字符

  • 空格: &nbsp；
  • 小于号: &lt；
  • 大于号: &gt；
  • 和号: &amp；
  • 人民币: &yen；
  • 版权: &copy；
  • 注册商标: &reg；
  • 摄氏度: &deg；
  • 正负号: &plusmn；
  • 乘号: &times；
  • 除号: divide；
  • 平方2: &sup2；
  • 立方3: &sup3；

HTML的标签【下】

1.表格标签：
（1）表格的基本语法：
在这里插入图片描述
（2）表头单元格标签：
位于表格的第一行或者第一列，表格单元格里面的文本内容加粗居中显示
在这里插入图片描述
（3）表格属性：
属性需要写到表格标签<table>里面去
在这里插入图片描述
在这里插入图片描述
（4）表格结构标签：

  • <thead></thead>定义表格的头部，必须包含<tr></tr>标签
  • <tbody></tbody>定义表格的主题
    （5）合并单元格：
  • 方式：
    跨行合并：rowspan=“合并单元格的个数”
    跨列合并：colspan=“合并单元格的个数”
  • 目标单元格：
    跨行：最上侧单元格（写合并代码）
    跨列：最左侧单元格（写合并代码）
  • 步骤：
    【1】确定跨行还是跨列合并
    【2】找到目标单元格（写上合并方式=合并的单元格数量）
    【3】删除多余的单元格
    2.列表标签：
    （1）无序列表：
  • <ul>中只能嵌套<li>，不可放入其他标签或文字
  • <li>之间，可以容纳所有元素在这里插入图片描述
    （2）有序列表：
  • <ol>中只能嵌套<li>，不可放入其他标签或文字
  • <li>之间，可以容纳所有元素
    在这里插入图片描述
    (3）自定义列表：
  • <dl>中只能包含<dt>,<dd>，不可输入其他标签或文字
  • <dt><dd>个数没有限制
  • <dt><dd>之间，可以容纳所有元素
    在这里插入图片描述
    3.表单标签
    （1）表单的组成：
  • 表单域
  • 表单控件（也称表单元素）
  • 提示信息
    （2）表单域：
    <form>会把它范围内的表单元素信息提交给服务器
    在这里插入图片描述
    （3）表单控件（也称表单元素）
  • <input>表单元素
    在这里插入图片描述
    除type属性外，标签还有其他很多属性，常用属性如下：
    在这里插入图片描述
    【1】name和value是每个表单元素都有的属性值，主要给后台人员使用
    【2】单选按钮和复选框要有相同的name值
    【3】checked针对单选按钮和复选框，一打开页面，默认选中某个表单元素
    代码演示：
    在这里插入图片描述
    成果展示：
    在这里插入图片描述
  • select下拉表单元素
    【1】至少要有一个<option>
    【2】在<option>中定义selected=“selected”,当前选项就是默认选中的
    在这里插入图片描述
  • textarea 文本域元素
    定义多行文本输入，常见于留言板，评论
    cols是“每行中的字符数” ，rows是“显示的行数”
    （4）<label> 标签
    <label> 标签可以绑定一个表单元素, 当点击label标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
    注意：<label>标签的for属性应当与相关元素的id属性相同
    在这里插入图片描述
帆高#
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端——css学习（一）
yangyelinmei的博客
04-27 439
css简介： CSS是一种描述HTML文本样式的语言； CSS描述应该如何显示HTML元素； CSS指的是层叠样式表，描述了如何在屏幕上显示HTML元素； CSS可以同时控制多张网页的布局； 外部样式表储存在css文件中，在使用外部样式表文件时，只需要通过更改一个文件即可修改整个网页的外观； css语法： css规则集由选择器和声明块组成： h1 {color:red;font-size:14px} h1:是选择器； color:red;是声明； color:属性； red:属性值； 选择器指向需要设置样
性能测试进阶指南——LoadRunner11实战 part1
06-14
第1章 性能测试基础 1.1 性能测试工程师的标准及挑战 1.1.1 性能测试工程师的考评指标 1.1.2 性能测试工程师的挑战 1.2 性能测试基础 1.2.1 性能定义 1.2.2 性能指标 1.2.3 单机与网络性能测试 1.2.4 性能测试的流程...
HTML基础第一天
weixin_39202130的博客
11-23 142
1.网页的形成 2.浏览器的内核 3.web标准 4.web标准的好处 5.HTML初始 6.HTML骨架标签 7.HTML标签分类 8. HTML标签关系 代码开发工具 9.HTML模板 10.HTML标签的语义化 11.HTML常用标签 12.案例：新闻页面 13.换行标签 14.div和span标签 15.文本格式化标签 16.标签属性 17.图像标签 18.链接标签 19.注释标签 20.路径 ...
html中的相同字段怎么全选,html – 是否有一个具有相同属性值的2个或更多元素的选择器？...
weixin_42521795的博客
05-31 599
是否有更优雅的方式来写这个？.standard {padding-top: 50px;padding-bottom: 50px;}.standard.color-0 + .standard.color-0,.standard.color-1 + .standard.color-1,.standard.color-2 + .standard.color-2,.standard.color-3 + ....
Web前端学习笔记——HTML
wjsn520的博客
11-30 1551
web前端开发基础 第一章——HTML 前言 HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网
web前端学习笔记——JavaScript（part 1）
wjsn520的博客
12-05 1005
web前端开发基础 第四章——Javascript 目录web前端开发基础第四章——Javascript概述一、JavaScript嵌入页面的方式二、变量1.关键字2.变量类型3.javascript语句与注释4.变量、函数、属性、函数参数命名规范5.匈牙利命名风格：三、获取元素方法四、操作元素属性操作属性的方法属性写法通过“.”操作属性：通过“[ ]”操作属性：innerHTML1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法1.css基本语法
【前端】HTML基础学习笔记
Bryant的博客
11-01 182
HTML - 笔记 1 HTML介绍 定义：html是一门标签语言，非常简单 1.1 标签 包含于一对尖括号< > 一般成对出现（双标签），第二个标签是结束标签 有些特殊标签是单个的，（较少，如换行<br/>） 1.2 关系：包含、并列 基本结构标签： <html> </html> —— 根标签 <head> </head> ——文档头部（须设置title） <title> </title> ——文档标题
web前端学习笔记——Javascript（part 2）
wjsn520的博客
12-07 478
web前端开发基础 第四章——Javascript（part 2） 目录web前端开发基础第四章——Javascript（part 2）Javascript组成一、获取元素方法二二、字符串处理方法三、类型转换四、定时器五、变量作用域六、封闭函数七、常用内置对象 Javascript组成 1、ECMAscript javascript的语法（变量、函数、循环语句等语法） 2、DOM 文档对象模型 操作html和css的方法 3、BOM 浏览器对象模型 操作浏览器的一些方法 一、获取元素方法二 可以使用内置
【前端】CSS基础学习笔记（Part1）
Bryant的博客
11-03 146
CSS - 笔记 1 CSS介绍 1.1 定义 定义：CSS也是一门标记语言 CSS是层叠样式表（简称CSS样式表或级联样式表） 作用：主要用于美化网页、布局页面（与html结合使用） 1.2 CSS组成 CSS构成：选择器 { 样式 } 如：h1 { color: red; font-size: 25px;} 注：属性和属性值以键值对出现，用冒号分隔、分号结尾 CSS位置：放在<head></head>中的<style></style>标签中 1
web前端学习笔记——html5和CSS3
wjsn520的博客
12-03 499
web前端开发基础 第三章——html5和CSS3 目录web前端开发基础第三章——html5和CSS3一、HTML5新增标签新增语义标签音频视频二.HTML5 新增表单控件三、CSS权重四、CSS3新增选择器五、CSS3圆角、rgbaCSS3圆角rgba（新的颜色值表示法）六、CSS3 transition动画七、CSS3 transform变换八、CSS3 animation动画九、CSS3 浏览器前缀浏览器样式前缀自动添加浏览器前缀Autoprefixer在Sublime text中的设置： 一、
性能测试进阶指南——LoadRunner11实战 part2
06-14
第1章 性能测试基础 1.1 性能测试工程师的标准及挑战 1.1.1 性能测试工程师的考评指标 1.1.2 性能测试工程师的挑战 1.2 性能测试基础 1.2.1 性能定义 1.2.2 性能指标 1.2.3 单机与网络性能测试 1.2.4 性能测试的流程...
性能测试进阶指南——LoadRunner11实战 part3
06-14
第1章 性能测试基础 1.1 性能测试工程师的标准及挑战 1.1.1 性能测试工程师的考评指标 1.1.2 性能测试工程师的挑战 1.2 性能测试基础 1.2.1 性能定义 1.2.2 性能指标 1.2.3 单机与网络性能测试 1.2.4 性能测试的流程...
仅使用HTML-CSS-JavaScript-Part_two的响应式个人投资组合完整的网站
02-18
这个项目重点在于利用三种基本的前端技术——HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript，来创建一个功能齐全的网页，它能在手机、平板和桌面电脑等不同设备上提供良好的用户体验。 HTML是网页内容的...
精通AngularJS part1
10-10
学习$q服务的基础知识85 promise是第一类JavaScript对象87 聚合回调88 注册回调和承诺的生命周期88 异步动作的链式调用89 关于$q的其他91 AngularJS中的$q集成93 33promiseAPI与$http94 34与RESTful端点通信...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 422
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 209
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 276
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 442
对于上云api开发学习过程中的错误教训积累总结
Windows Internals Part1第六版详解
"Windows Internals Part1 6th Edition 是一本深入探讨Windows操作系统内部机制的专业书籍，由Mark Russinovich、David A. Solomon和Alex Ionescu合著，由Microsoft Press出版。本书主要关注Windows操作系统的底层...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值