02-Html学习

最新推荐文章于 2022-12-16 23:43:52 发布
最新推荐文章于 2022-12-16 23:43:52 发布
阅读量219 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38178755/article/details/78675002
版权

使用绝对路径和相对路径的使用格式


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    使用图片的绝对路径
    <img src="C:\Users\RAY\Pictures\Saved Pictures\timg.jpg" alt="绝对路径图片" title="这是什么呢" /><br />
    使用图片的相对路径
    <img src="3.jpg" alt="同一级" />
    <img src="img/1.jpg" alt="图片在文件的下一级" />
    <img src="../4.jpg" alt="图片在文件的上一级" />
</body>
</html>

发现了一个问题就是：在路径里面\和/好像都可以用。
标签的跳转
a标签的用法：1 跳转 一共四种：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
<p id="id名">这里是定义的id名处</p>
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
我是夏园园
你也可以叫我小圆圆
大家都觉得我可爱
可是我有很对烦恼<br />
<a href="02目标页面.html">我要跳到02目标页面</a><br />
<a href="#">这个是调到当前页面哦</a><br />
<a href="#id名">当前页面进行定位调到id名处</a><br />
<a href="02目标页面.html#id名">这个跳到别的页面里面的id名</a>
<a href="02目标页面.html" target="_blank">点击跳转到目标页面,新建一个窗口</a>
<a href="02目标页面.html" target="_self">点击跳转到目标页面,覆盖原来的窗口</a>
</body>
</html>

base属性：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <base href="_blank" />
</head>

就是使得所有的页面都是新建窗口
练习题：
给页面加条线：

<hr \>

用的补全是：html：xt
HTML结构讲解：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

DTD遵循w3c
DTD文档类型定义
doctype:申明位于文档的最前面
HTML 和Xhtml
XHTML相当于html2.0版本
w3c制定了一个规则：
html：结构
css：样式
jS：行为
在实际的操作之中我们用的最多的会是HTML5
但是必须要设置doctype，如果不设置就会默认一个怪异模式。
现在开始用html：5 +TAB
其他结构标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

lang=en代表
1：主要使用语言的类型
2：将来做SEO的时候在权重上起到一定的作用
3：用于特殊设备上的设置
head标签
作用：用于存放：title meta base script link
其中title标签是我们必须设置的
Body标签
作用：页面的主体部分用来存放我们所有的Html标签：p h a b u i s em del ins strong img
Title标签：给页面设置一个标题
设置一个Title中的文本在seo上占有很大的权重
SEO标签的语义化：叫做搜索引擎优化
网站在搜索页面上的排名靠前
点击量 访问量 流量
搜索引擎的优化：
花钱买排名
将页面作为静态页面
发外链
页面友好化规范 在合适的地方使用合适的标签 就是合理的使用标签的语义化
网络爬虫： 就是搜索引擎 就是访问页面给页面进行排序，从而在用户搜索的时候可以有一个先后的排名。
meta标签：上面所以的内容都不会显示
常用的用法：
1：Descripation可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此来提高页面的排名
2：keywords:关键词，可以用来提高页面的关键词比重
3：字符集：设置字符的编码格式
电脑不能直接存储文本 只能存储编码文件的编码是什么文件保存的就是什么
GB2312 是国标2312是国际标准
UTF-8和GBK之间的区别：

相同点：都是字符的编码格式（字库）
区别：UTF-8收录全世界所有语言的文字
GB2313收录了汉字 片假名 以及英文字母

<head>
    <meta name="description" content="描述行语言">
    <meta name="keywords" content="描述词">
    <meta charset="UTF-8">
    <title>Document</title>
</head>

列表：
列表在HTML里面主要有三种：
无序列表：没有顺序的数据 ul一般配合li标签
ul中只能放li标签不能放其他的标签
但是li标签可以放其他的标签

<li><a href="01.html"></a>香蕉</li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
         <li>香蕉</li>
         <li>苹果</li>
         <li>西瓜</li>
         <li>榴莲</li>
         <li>芒果</li>
         <li>橘子</li>
    </ul>
</body>
</html>

有序列表：一般情况下无序用的比较多 有序用的比较少 ol里面还是只能放li标签 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ol>
         <li>香蕉</li>
         <li>苹果</li>
         <li>西瓜</li>
         <li>榴莲</li>
         <li>芒果</li>
         <li>橘子</li>
    </ol>
</body>
</html>

自定义列表：显示一段数据 但是格式自己定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <dl>
    <dt>有机蔬菜</dt>
    <dd>白菜</dd>
    <dd>青菜</dd>
    <dd>大白菜</dd>
    <dd>小白菜</dd>
    <dt>无机蔬菜</dt>
    <dd>中白菜</dd>
    </dl>
</body>

练习题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ol>
    <li> <h3>名著1</h3>
    <p>这个是名著1的秒速</p>
    </li> 
    <li><h3>名著2</h3>
    <p>这个是名著2的秒速</p>
    </li> 
    <li><h3>名著3</h3>
    <p>这个是名著3的秒速</p>
    </li>
    </ol>
</body>
</html>

列表的嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
  <body>
    <ul>
    <li>吃的</li>
       <ul>
       <li>饼干</li>
       <li>巧克力</li>
         <ul>
          <li>德芙</li>
          <li>费列罗</li>
         </ul>
       <li>薯片</li>
       <li>面包</li>
       </ul>
    <li>玩的</li>
    <li>用的</li>

  </ul>
  </body>
</html>

**

表格：

**
表格：table
行：tr
列：td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
       <tr>
       <td>排名</td>
       <td>名称</td>
       <td>涨幅</td>
       </tr>
        <tr>
       <td>1</td>
       <td>中国石油</td>
       <td>100</td>
       </tr>
        <tr>
       <td>2</td>
       <td>深圳</td>
       <td>30</td>
       </tr>
        <tr>
       <td>3</td>
       <td>长达</td>
       <td>20</td>
       </tr>
    </table>
</body>
</html>

给表格加边框：

<table border="1">

<table  border="1" width="300" height="200" cellspacing="5" cellpadding="5">

cellspacing是表格间隔
cellpadding是设置内容和边距之间的距离
th表头：默认会把表格中的数据加粗居中
caption：是给表格设置表题
tbody用来存放页面的主体内容如果不加会自动加进去
thead：用来存放表格的表头
tfoot：用来做一个总结可以放在thead下面 但是算是一行要放一个tr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table  border="1" width="300" height="200" cellspacing="5" cellpadding="5">
      <tbody>
       <caption><h2>这是一个表格啊</h2></caption>
       <thead>
        <tr>
       <th>排名</th>>
       <th>名称</th>
       <th>涨幅</th>
       </tr>
       </thead>
       <tfoot>
       <tr>
        <td></td>
        <td>统计</td>
        <td>结果</td>
       </tr>
       </tfoot>
        <tr>
       <td>1</td>
       <td>中国石油</td>
       <td>100</td>
       </tr>
        <tr>
       <td>2</td>
       <td>深圳</td>
       <td>30</td>
       </tr>
        <tr>
       <td>3</td>
       <td>长达</td>
       <td>20</td>
       </tr></tbody>
    </table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table  border="1" width="300" height="200" cellspacing="5" cellpadding="5">
  <tbody>
   <caption><h2>这是一个表格啊</h2></caption>
   <thead>
    <tr>
       <th>排名</th>>
       <th>名称</th>
       <th>涨幅</th>
       </tr>
   </thead>
   <tfoot>
   <tr>
        <td></td>
        <td>统计</td>
        <td>结果</td>
   </tr>
   </tfoot>
        <tr>
       <td>1</td>
       <td>中国石油</td>
       <td>100</td>
       </tr>
        <tr>
       <td>2</td>
       <td>深圳</td>
       <td>30</td>
       </tr>
        <tr>
       <td>3</td>
       <td>长达</td>
       <td>20</td>
       </tr></tbody>
</table>
</body>
</html>

表单元素：

用来搜集信息的
输入框：input标签
默认值设置用value
type属性
hidde是放置用户看不到的数据
radio在设置的时候要设置一个name属性相当于id 一刷新两个都没选中 设置一下默认加一个checked属性
radio是单选
checkbox是多选
多选框设置默认和单选一样用checked
button按钮
四种种按钮：reset 有默认值 是重置
但是要配合form使用 form是表单的意思
image是设置图片按钮
submit是提交
select和option一起使用
给下拉框设置默认属性 用selected
textarea：多行输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <form action="">
    用户名：<input type="text" value="张飞"><br>
    密码：<input type="password"><br>
    <hr>
    <input type="hidden" value="很隐秘的数据">
    <hr>
    性别：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <br>
    爱好：<input type="checkbox" name="aihao" checked="checked">打游戏 <input type="checkbox" name="aihao">逛街<input type="checkbox" name="aihao">美食<br>
    出生日期：<select >
        <option >1990</option>
        <option selected="selected">1991</option>
        <option >1992</option>
    </select>年 
    <select></select>月
    <select ></select>日<br>
   自我评价：<textarea  cols="30" rows="10"></textarea><br>
    <input type="button" value="提交"> <input type="reset"> <br>
    <input type="image" src="img/5.png"><br>
    <input type="submit">
    </form>
</body>
</html>

html空格合并现象
html中的对空格缩进不敏感，不管将来在页面的统一位置写多少空格缩进 换行 浏览器解析的时候只会解析一个空格，如果需要多个空格就要用到转义符。比如空格&nbsp加一个这个相当一一个汉字的空格，要多个空格就加多个&nbsp，普通凡的空格相当于半个汉字的间隔
html中的特殊字符
1标签之间的关系：
双标签
单标签
嵌套
并列
将来写代码要分清关系
**转移字符**
注意写特殊字符的时候后面加个；比如&lt;

没有语义的标签
span和div
1span标签一行可以放多个
2宽和高由内容决定
div：
1单独占一行
2默认占一整行 将来我们在进行页面布局的时候用div用的最多就是div+css布局
w3c三层分离的标准：
html ：从语义的角度描述页面页面的结构
css：从样式上修饰页面
js：负责让页面的动起来

Sarrykiss
关注
专栏目录
[Python从零到壹] 十三.机器学习之聚类算法四万字总结全网首发（K-Means、BIRCH、树状聚类、MeanShift）
杨秀璋的专栏
07-06 1万+
欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家，希望对您有所帮助，文章中不足之处也请海涵。Python系列整体框架包括基础语法10篇、网络爬虫30篇、可视化分析10篇、机器学习20篇、大数据分析20篇、图像识别30篇、人工智能40篇、Python安全20篇、其他技巧10篇。您的关注、点赞和转发就是对秀璋最大的支持，知识无价人有情，希望
GeoServer入门学习：02-安装部署
光脚丫思考的专栏
10-25 7677
一、系统环境 本系列博文相关演示环境采用如下操作系统环境： 这是在虚拟机中安装的Windows Server 2012 R2的操作系统，其他系统环境大家自行尝试。 二、安装JDK JDK版本：JDK 13，如下图所示： GeoServer是基于Java的软件，运行的时候需要JDK的支持，如果你的系统中没有安装配置好JDK，请按照下面的这篇文章首先安装配置好JDK。 JDK安装及环境...
【pytest-html】深度探索pytest-html测试报告的自定义使用
Flora's Zone
06-29 7568
学习pytest-html官方文档，深度探索pytest-html测试报告的自定义使用
Vue学习笔记-02-指令
欢迎访问我的主页：https://www.bookbook.cc
06-01 8039
1.1 模板语法概述 1.2 v-cloak指令 解决插值表达式闪动的问题 1.3 v-text 纯文本填充 1.4 v-html 填充HTML片段 1.5 v-pre 填充原始信息 1.6 数据响应式 1.6 v-once 只渲染一次 1.7 v-model 数据双向绑定
Python爬虫技术系列-02HTML解析-BS4
IT从业者的成长历程
09-26 4294
关于爬虫的HTML解析案例
Vue-学习笔记-02 指令详解
欢迎访问我的主页：https://www.bookbook.cc
07-23 8186
文章目录一、mustache语法 插值表达式v-once 一、mustache语法 插值表达式 <body> <div id='app'> {{firstName}}{{LastName}} <!-- mustache不仅可以下变量 还可以写简单的表达式 --> {{firstName+LastName}} {{counter*2}} </div> <scr
深度学习-环境配置
m0_37826094的博客
05-23 3302
转自：江南小赣 链接：https://blog.csdn.net/qq_26412763/article/details/90272491 win10深度学习环境搭建 前言：之前安装各种软件查各种网站弄得特别麻烦，所以写下一篇完整的文章来记录整个操作流程。在anaconda下，搭建的环境是python3.6+cuda9.0+opencv3.3+tensorflow_gpu1.11+pytorc
LIO-SAM学习与运行测试数据集
热门推荐
biter0088的博客
10-08 1万+
LIO-SAM学习与运行作者提供的数据集
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
12-16 10万+
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)。一款非常简洁，亮丽的个人简介模板，适用于个人主页，个人简历等相关主题，界面分为个人信息，基本资料，专业技能，教育经历，工作经验等五个版块，支持扩张，具体效果见下面的原文链接，里面有视频和代码讲解。代码容易上手，下载后直接运行。
el-dialog(对话框)入门学习
qq_40765784的博客
06-24 4万+
el-dialog的入门学习
-ICS2O-Unit3-02-HTML
03-12
这个压缩包文件名“-ICS2O-Unit3-02-HTML-master”暗示了这是一个关于HTML学习的项目或课程资料，可能包含了一系列的示例、练习和教程。 HTML的基本结构由一系列的标签组成，这些标签定义了网页内容的结构和样式。...
ICS2O-Unit5-02-html
02-18
在"ICS2O-Unit5-02-html"的学习单元中，你将学习如何编写和理解HTML代码，创建基本的静态网页，并逐渐掌握更高级的概念，如表格、图像、链接、框架以及与CSS和JavaScript的整合。通过实践，你将能够构建功能丰富的...
ICS2O-Unit3-02-HTML
03-13
这个压缩包文件"ICS2O-Unit3-02-HTML"很显然是针对学习HTML的一个教学单元，可能包含了相关的学习材料、示例代码、练习题等资源，旨在帮助初学者掌握HTML的基本概念和语法。 HTML的核心在于通过一系列标签来构建...
ICS2O-Unit3-02-HTML:初次尝试
03-13
HTML，全称HyperText Markup Language，是...总之，“ICS2O-Unit3-02-HTML:初次尝试”这个学习单元将带你步入HTML的大门，掌握基本的网页构建技能。通过不断的实践和探索，你将能够创建出更加复杂和功能丰富的网页。
day02（HTML02-基础）.rar
12-01
在"day02（HTML02-基础）.rar"这个压缩包中，我们可以深入学习HTML的基础知识，包括但不限于HTML的结构、元素、属性以及如何编写有效的HTML文档。 01-大纲：通常会列出课程或学习材料的主要部分，可能包含以下几个...
06-作业练习盒子模型
Sarrykiss学术天地
12-04 1551
表格的练习！有关padding与border很重要 第一个金牌练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>金牌top5</title> <style> *{ margin: 0px; padding: 0px; } t
17-CSS3 高级技巧 精灵图 字体图标 滑动门
Sarrykiss学术天地
12-13 975
CSS高级技巧CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | move 移动 | text 文
16-CSS3重点定位和display
Sarrykiss学术天地
12-13 893
定位(position)如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！
14-CSS3提高 重点部分 盒模型 浮动
Sarrykiss学术天地
12-11 482
CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按
"JavaWeb02-JavaScript学习笔记及语法总结
JavaWeb02-JavaScript学习笔记 JavaScript是一种脚本语言，可以直接由浏览器解析，不需要编译。本篇学习笔记主要介绍了JavaScript的基本语法和常用的语句、流程控制以及数组和对象的使用方法。 JavaScript的引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值