HTML基础

于 2023-07-12 11:02:56 发布
阅读量70 收藏
点赞数
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46372132/article/details/131677054
版权

HTML基础

阿里矢量图使用步骤

官网

https://www.iconfont.cn/search/index?

1.把所需要的图标加载到购物车

2.点击下载代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIGhVSFr-1689130902925)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711155510952.png)]

3.解压文件夹,并打开demo-index.html网页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-adWSvZIC-1689130902927)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711155529799.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IsQ5eB2P-1689130902928)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711155629367.png)]

4.把文件夹复制到项目的img文件下面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xfl8lZNV-1689130902928)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711155555150.png)]

5.三种引入方式

  1. Unicode引入

    把下面代码放入页面中的style里面

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocBK6hSX-1689130902929)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711155752933.png)]

     		//注意:这个URL地址是根据自己所放的目录地址
     src: url('img/font/iconfont.ttf') format('truetype');

     @font-face {

​            font-family: 'iconfont';

				//注意:这个URL地址是根据自己所放的地址
​            src: url('img/font/iconfont.ttf') format('truetype');

​        }

​        

​        .iconfont {

​            font-family: "iconfont" !important;

​            font-size: 16px;

​            font-style: normal;

​            -webkit-font-smoothing: antialiased;

​            -moz-osx-font-smoothing: grayscale;

​        }

    将所需要的图片应用到页面

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-noOGksnP-1689130902930)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711160006702.png)]

    <span class="iconfont">&#x33;</span>  //&#x33;这个是根据每个图片来变化
  2. symbol引入

    引入js文件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IZ01tIga-1689130902931)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711160033654.png)]

    加入通用 CSS 代码（引入一次就行）：
    <style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
挑选相应图标并获取类名，应用于页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W0ieLNNq-1689130902932)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711160122621.png)]

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

day02-html基础

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gkDEmSvf-1689130902936)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711094146819.png)]

1、editplus编辑器的使用：

  • 改变title文字：工具-首选项-文件-模板-打开-确定，然后到文件中修改title的文字即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DY29wTgC-1689130902938)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711095148229.png)]

2、w3c官网,初学者查询地方

https://www.w3cschool.cn/htmltags/tag-div.html

3、基础标签(标题,加粗,倾斜)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffNvDWIM-1689130902940)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711113910214.png)]

em,i :倾斜标签,文本切斜,在一行显示

b/strong :加粗字体,文本加粗,在一行显示

4、超链接(a)

a:超链接,实现页面与页面之间的跳转,文本颜色默认是蓝色带有下划线,在一行显示

href=“跳转地址” #空地址

target=“跳转方式”

_self 默认在当前窗口刷新

_blank 不断打开新窗口

_new 在新窗口刷新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9U7lOIrn-1689130902942)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711120020846.png)]

5、盒子标签

div:盒子标签,独自占一行,用来搭建页面结构

span:文本节点标签,在一行显示,没有特殊的视觉效果,通常配合css展示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZIUU64jh-1689130902945)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711141119702.png)]

6、图片标签

注:如果图片只设置宽或者高,则对应的宽或高,成比例缩放.,所以一般来说,只写一个即可.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7RqCswgA-1689130902948)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711144745397.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dDSSS7EQ-1689130902948)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711144802192.png)]

图片:

格式:

​ .jpg 普通格式

​ .png 背景透明格式

​ .gif 动态图

img:图片标签,在网页中插入图片

​ src=“图片路径”

​ 相对路径

​ src=“1.jpg”

​ src=“img/1.jpg”

​ src=“…/img/1.jpg”

​ src=“./img/1.jpg”

​ …/ 返回上级目录

​ ./ 强调在当前目录下

绝对路径:

​ 从盘符出发

​ 域名地址出发(就是网站上的链接)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8bmpXYD-1689130902951)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711153848902.png)]

alt=“文本提示(替换)”

图片加载成功时不显示

图片加载失败时显示

主要是给搜索引擎查看

尽可能精准的描述

title=“文本提示”

鼠标移动时显示,移出不显示

主要给用户看得

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6MEF1c18-1689130902954)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711154253040.png)]

7、列表标签

ul>li :无序列表标签

ol>li:有序列表标签()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8mHj1B0Z-1689130902955)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711160914429.png)]

ol的属性:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PqievIgk-1689130902956)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711161810179.png)]

8、HTML特殊字符符号大全

&nbsp: 空格 &lt 小于号 &gt 大于号 &copy 版权号 (注意:后面都要加分号)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6JrxHnPT-1689130902957)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711163011670.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-78xPj2kU-1689130902958)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711163022545.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JhYiHa3K-1689130902959)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711162250699.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-euRiNZgv-1689130902960)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711162405744.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttN4W5Sc-1689130902960)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230711162428264.png)]

9、ps快捷键

ctrl+d 取消选区 v 移动 ctrl+t 图层旋转 前景色 alt+delete 后景色 ctrl+delete 椭圆工具按住shift键可变为圆形 ctrl+j复制

day03-css基础

css:样式表,修饰页面结构

语法规则:

​ 选择器{属性:值;}

样式书写方式:

​ 外部样式:

  1. 创建一个独立的HTML文件,后缀为.HTML

  2. 创建一个独立的css文件,后缀为.css

  3. 关联

    关联方式一:

    在页面的head中添加

    rel=“stylesheet” 关联="层叠样式表 "

    type=“text/css” 类型=“文本的/css样式”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PK8wE5He-1689130902961)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230712103136761.png)]

1.常用选择器(标签选择器)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b7UoEDYa-1689130902962)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230712105916413.png)]

类型选择器(标签选择器):div a span img…

​ 标签关键字{属性:值;}

类选择器(class选择器)

<标签 class=“name”></标签>

.name{属性:值;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GeSJarxf-1689130902962)(C:\Users\易玲\AppData\Roaming\Typora\typora-user-images\image-20230712105953706.png)]

{注}

在同一个页面中可以多次出现相同的值

在一个class中可以有多个值

具有重要性,通常用来写css样式

1.常用选择器(标签选择器)

[外链图片转存中…(img-b7UoEDYa-1689130902962)]

类型选择器(标签选择器):div a span img…

​ 标签关键字{属性:值;}

类选择器(class选择器)

<标签 class=“name”></标签>

.name{属性:值;}

[外链图片转存中…(img-GeSJarxf-1689130902962)]

{注}

在同一个页面中可以多次出现相同的值

在一个class中可以有多个值

具有重要性,通常用来写css样式

qq_46372132
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML基础知识点
qq_40046544的博客
07-27 8224
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6036
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
全网最全HTML基础
a1085653724的博客
04-20 4903
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
头歌-HTML基础
somewon的博客
03-06 8980
四川师范大学 头歌 web应用开发
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
HTML基础之表单制作
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
html基础
02-20
html基础
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
Html基础文档
09-13
HTML 免费
HTML基础.xmind
12-07
HTML基础.xmind
html基础整理
04-19
整理一些html常用的基础的标签作用与其网页的展示效果非常基础，简单易懂
HTML基础题目.rar
04-08
文件为HTML基础题目，题目如下，欢迎下载，3-1《七步诗》3-2制作Google Logo效果3-3《关山月》3-4通配符选择器3-5CSS字体样式属性3-6春天3-7你若安好便是晴天3-8CSS层叠性3-9CSS优先级3-10制作新浪博客效果
html基础手册下载
最新发布
12-31
你可以在网上找到很多关于HTML基础手册的下载资源。可以在搜索引擎上输入关键词“HTML基础手册下载”，然后浏览搜索结果找到适合自己的下载链接。同时，你也可以在一些知名的学术网站或者技术论坛上寻找HTML基础手册的下载资源，通常这些网站提供的资源更加权威和可靠。 另外，一些在线教育平台也会提供HTML基础手册的下载服务，如果你愿意在线学习，可以考虑在这些平台上搜索相关资源。此外，你还可以直接访问一些技术社区或者开发者论坛，这些地方通常都会有人分享HTML基础手册的下载链接。 当然，如果你更喜欢实体书籍，可以考虑购买一本关于HTML基础的书籍，这样不仅可以得到手册的内容，还可以拥有实体书的收藏价值。总的来说，无论是在线资源还是实体书籍，都有很多途径可以获取到HTML基础手册的下载或购买信息，希望你能找到适合自己的方式获取这份资料，加油！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值