HTML第一天笔记

HTML标签(上)

  • 1.标签关系 标签关系:
  • 双标签可以分为两类,包含关系和并列关系
  • 包含关系:<head> <title></title> </head> 相当于父子关系
  • 并列关系: <head></head> <body></body> 相当于兄弟关系
  • 2.HTML基本结构标签 每个网页都会有一个基本的结构标签(也称为骨架标签)页面内容也是在这些基本标签上书写
  • <html></html> HTML标签 页面中最大的标签,我们称为根标签
  • <head></head> 文档头部标签注意在head标签中我们必须要设置的标签是title
  • <title></title> 文档的标题 让页面拥有一个属于自己的网页标题
  • <body></body> 文档的主体 元素包含文档的所有内容,页面内容基本都是放在body里的
  • lang语言种类:
    1. en定义语言为英语
    2. zh-CN定义语言为中文
    3. 简单来说定义为en就是英文网页,定义为zh-CN就是中文网页
    4. 其实对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

HTML常用标签

标签语义:
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。
根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
标题标签:
标题标签 <h1> - <h6>(重要)
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题,即<h1> - <h6>
具体实现:
<h1> 我是一级标题 </h1>
特点:
1.加了标题的文字会变的加粗,字号也会依次变大。
2. 一个标题独占一行。

   <body>
    <h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重道轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
</body>

段落标签:
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在 HTML 标签中,

标签用于定义段落,它可以将整个网页分为若干个段落。
具体实现:
<p> 我是一个段落标签 </p>
特点:
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
换行标签:
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 <br />
单词 break 的缩写,意为打断、换行。 标签语义:强制换行。
特点:
1. <br /> 是个单标签。
2. <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
文本格式化标签:
在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使 文字以特殊的方式显示。 标签语义: 突出重要性, 比普通文字更重要.

语义标签说明
加粗<strong></strong>或者<b></b>更推荐使用<strong>标签加粗语义更强烈
倾斜<em></em>或者<i></i>更推荐使用<em>标签加粗语义更强烈
删除线<del></del>或者<s></s>更推荐使用<del>标签加粗语义更强烈
下划线<ins></ins>或者<u></u>更推荐使用<ins>标签加粗语义更强烈
<body>
    我是<strong>加粗</strong>的文字<br />
    我是<b>加粗</b>的文字<br />
    我是<em>倾斜</em>的文字<br />
    我是<i>倾斜</i>的文字<br />
    我是<del>删除线</del>的文字<br />
    我是<s>删除线</s>的文字<br />
    我是<ins>下划线</ins>的文字<br />
    我是<u>下划线</u>的文字<br />
</body>
  • <div><span>标签: <div><span> 是没有语义的,它们就是一个盒子,用来装内容的。 具体实现:。
    <div> 这是头部 </div>
    <span> 今日价格 </span>
    特点:
    1. <div> 标签用来布局,但是现在一行只能放一个<div>。 大盒子
    2. <span> 标签用来布局,一行上可以多个 <span>。小盒子 图片标签:
    在 HTML 标签中,<img> 标签用于定义 HTML 页面中的图像。
    具体实现:
    <img src=“图像URL” />
    解释:
    src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
    所谓属性:简单理解就是属于这个图像标签的特性。
    图像标签的其他属性:
属性属性值说明
src图片路径必须属性
alt文本替换文本,图片不能显示的文字
title文本提示文本。鼠标放到图像上,显示文字
width像素设置图片的宽度
height像素设置图片的高度
border像素设置图片的边框粗细
<body>
    <h4>图像标签的使用:</h4>
    <img src="1.jpg"/>
    <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
    <img src="11.jpg" alt="图片不显示"/>
    <h4> title 提示文本 鼠标放到图像上面显示的文字:</h4>
    <img src="1.jpg" alt="图片不显示" title="图片可以显示"/>
    <h4> width 给图像设定宽度:</h4>
    <img src="1.jpg" alt="图片不显示" title="图片可以显示" width="500"/>
    <h4> height 给图像设定高度:</h4>
    <img src="1.jpg" alt="图片不显示" title="图片可以显示" height="100"/>
    <h4> border 给图像设定边框:</h4>
    <img src="1.jpg" alt="图片不显示" title="图片可以显示" height="100" border="15"/>
</body>
  
  • 图像标签注意点:
    1.图像标签可以拥有多个属性,必须写在标签名的后面。
    2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
    3.属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。 重点掌握: 图像标签那个属性是必须要写的 图像标签中alt和title属性区别

路径:

  • 页面中的图片会非常多, 通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需
    要采用“路径”的方式来指定图像文件的位置。 路径可以分为:

    1. 相对路径
    2. 绝对路径

    路径之相对路径: 相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。 这里简单来说,图片相对于 HTML 页面的位置

相对路径分类符号说明
同一级路径图像文件夹位于HTML文件同一级 如<img src=“baldu.gif”/>
下一级路径/图像文件夹位于HTML文件下一级 如<img src=“img/baldu.gif”/>
上一级路径…/图像文件夹位于HTML文件上一级 如<img src=“../baldu.gif”/>

相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。
路径之绝对路径:

  • 绝对路径: 是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
    例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。
    在 HTML 标签中, 标签用于定义超链接,作用是从一个页面链接到另一个页面。
<body>
    <img src="https://i2.hdslb.com/bfs/archive/8a334edc5a07afef88d62e8c938682a03e2f695d.jpg@336w_190h.webp"  />

    <img src="https://i2.hdslb.com/bfs/archive/8a334edc5a07afef88d62e8c938682a03e2f695d.jpg@336w_190h.webp"  />

</body>

链接的语法格式 :
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像`
两个属性的作用如下:
href:用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它具有了超链接的功能
target:用于指定链接页面打开方式,其中_self为默认值,_blank为在新窗口打开方式
2.链接分类:

  1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
  2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 。
  3. 空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 。
  4. 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
  5. 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
  6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
    在链接文本的 href 属性中,设置属性值为 #名字 的形式,如:<a href=“#two”>第2级</a>
    找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id=“tow”>第2级介绍<h3>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com"  target="_self"> 腾讯</a> 
    <a href="http://www.qq.com"  target="_blank"> 腾讯</a> 

    <h4>2.內部链接:网站内部页面之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>

    <h4>3.空链接:#</h4>
    <a href="#">公司地址</a>

    <h4>4.下载链接:地址连接的是文件 .exe 或者是 zip 等压缩包形式</h4> 
    <a href="img.zip">下载文件</a>

    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg" /></a>
</body>

HTML 中的注释和特殊字符

  • 如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
    HTML中的注释以“<!--”开头,以”-->”结束。 <!-- 注释语句 --> 快捷键: ctrl + / 一句话:
    注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的
    添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的。 特殊字符: 在 HTML
    页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
特殊字符描述字符代码
“ ”空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
人民币&yen;
©版权&copy;
®注册商标&reg;
摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方2(上标2)&sup2
³立方3(上标3)&sup3

重点记住:空格 、大于号、 小于号 这三个, 其余的使用很少,如果需要回头查阅即可
例题:体育新闻

<body>
    <h1>水花61分伊戈达拉制胜抢断西决秀士再胜开拓者总分2-0</h1>
    <h4>数据统计:水花兄弟合砍61分</h4>
    <p>库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。</p>

    <p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蔡德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼
    得到14分7篮板2助攻,今天勇士有7名蝉补出场。</p>
    <h4>兄弟对决升级:小库里给哥哥造成压力</h4>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遥的兄弟。在西决第1场中,小库里没有给奘哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
    <p>但在知决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥
    哥库里,在防守端给库里造成了极大的困扰。</p>
    <p>作者:pink老师<br />
        <strong>2019-8-8</strong></p>
        <b>2019-8-8</b>
</body>

热门文章

暂无图片
编程学习 ·

Java输出数组的内容

Java输出数组的内容_一万个小时-CSDN博客_java打印数组内容1. 输出内容最常见的方式// List<String>类型的列表List<String> list new ArrayList<String>();list.add("First");list.add("Second");list.add("Third");list.ad…
暂无图片
编程学习 ·

母螳螂的“魅惑之术”

在它们对大蝗虫发起进攻的时候&#xff0c;我认认真真地观察了一次&#xff0c;因为它们突然像触电一样浑身痉挛起来&#xff0c;警觉地面对限前这个大家伙&#xff0c;然后放下自己优雅的身段和祈祷的双手&#xff0c;摆出了一个可怕的姿势。我被眼前的一幕吓到了&#xff0c;…
暂无图片
编程学习 ·

疯狂填词 mad_libs 第9章9.9.2

#win7 python3.7.0 import os,reos.chdir(d:\documents\program_language) file1open(.\疯狂填词_d9z9d2_r.txt) file2open(.\疯狂填词_d9z9d2_w.txt,w) words[ADJECTIVE,NOUN,VERB,NOUN] str1file1.read()#方法1 for word in words :word_replaceinput(fEnter a {word} :)str1…
暂无图片
编程学习 ·

HBASE 高可用

为了保证HBASE是高可用的,所依赖的HDFS和zookeeper也要是高可用的. 通过参数hbase.rootdir指定了连接到Hadoop的地址,mycluster表示为Hadoop的集群. HBASE本身的高可用很简单,只要在一个健康的集群其他节点通过命令 hbase-daemon.sh start master启动一个Hmaster进程,这个Hmast…
暂无图片
编程学习 ·

js事件操作语法

一、事件的绑定语法 语法形式1 事件监听 标签对象.addEventListener(click,function(){}); 语法形式2 on语法绑定 标签对象.onclick function(){} on语法是通过 等于赋值绑定的事件处理函数 , 等于赋值本质上执行的是覆盖赋值,后赋值的数据会覆盖之前存储的数据,也就是on…
暂无图片
编程学习 ·

Photoshop插件--晕影动态--选区--脚本开发--PS插件

文章目录1.插件界面2.关键代码2.1 选区2.2 动态晕影3.作者寄语PS是一款栅格图像编辑软件&#xff0c;具有许多强大的功能&#xff0c;本文演示如何通过脚本实现晕影动态和选区相关功能&#xff0c;展示从互联网收集而来的一个小插件&#xff0c;供大家学习交流&#xff0c;请勿…
暂无图片
编程学习 ·

vs LNK1104 无法打开文件“xxx.obj”

写在前面&#xff1a; 向大家推荐两本新书&#xff0c;《深度学习计算机视觉实战》和《学习OpenCV4&#xff1a;基于Python的算法实战》。 《深度学习计算机视觉实战》讲了计算机视觉理论基础&#xff0c;讲了案例项目&#xff0c;讲了模型部署&#xff0c;这些项目学会之后可以…
暂无图片
编程学习 ·

工业元宇宙的定义与实施路线图

工业元宇宙的定义与实施路线图 李正海 1 工业元宇宙 给大家做一个关于工业元宇宙的定义。对于工业&#xff0c;从设计的角度来讲&#xff0c;现在的设计人员已经做到了普遍的三维设计&#xff0c;但是进入元宇宙时代&#xff0c;就不仅仅只是三维设计了&#xff0c;我们的目…
暂无图片
编程学习 ·

【leectode 2022.1.15】完成一半题目

有 N 位扣友参加了微软与力扣举办了「以扣会友」线下活动。主办方提供了 2*N 道题目&#xff0c;整型数组 questions 中每个数字对应了每道题目所涉及的知识点类型。 若每位扣友选择不同的一题&#xff0c;请返回被选的 N 道题目至少包含多少种知识点类型。 示例 1&#xff1a…
暂无图片
编程学习 ·

js 面试题总结

一、js原型与原型链 1. prototype 每个函数都有一个prototype属性&#xff0c;被称为显示原型 2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 3. constructor 每个prot…
暂无图片
编程学习 ·

java练习代码

打印自定义行数的空心菱形练习代码如下 import java.util.Scanner; public class daYinLengXing{public static void main(String[] args) {System.out.println("请输入行数");Scanner myScanner new Scanner(System.in);int g myScanner.nextInt();int num g%2;//…
暂无图片
编程学习 ·

RocketMQ-什么是死信队列?怎么解决

目录 什么是死信队列 死信队列的特征 死信消息的处理 什么是死信队列 当一条消息初次消费失败&#xff0c;消息队列会自动进行消费重试&#xff1b;达到最大重试次数后&#xff0c;若消费依然失败&#xff0c;则表明消费者在正常情况下无法正确地消费该消息&#xff0c;此时…
暂无图片
编程学习 ·

项目 cg day04

第4章 lua、Canal实现广告缓存 学习目标 Lua介绍 Lua语法 输出、变量定义、数据类型、流程控制(if..)、循环操作、函数、表(数组)、模块OpenResty介绍(理解配置) 封装了Nginx&#xff0c;并且提供了Lua扩展&#xff0c;大大提升了Nginx对并发处理的能&#xff0c;10K-1000K Lu…
暂无图片
编程学习 ·

输出三角形

#include <stdio.h> int main() { int i,j; for(i0;i<5;i) { for(j0;j<i;j) { printf("*"); } printf("\n"); } }
暂无图片
编程学习 ·

stm32的BOOTLOADER学习1

序言 最近计划学习stm32的BOOTLOADER学习,把学习过程记录下来 因为现在网上STM32C8T6还是比较贵的,根据我的需求flash空间小一些也可以,所以我决定使用stm32c6t6.这个芯片的空间是32kb的。 #熟悉芯片内部的空间地址 1、flash ROM&#xff1a; 大小32KB&#xff0c;范围&#xf…
暂无图片
编程学习 ·

通过awk和shell来限制IP多次访问之学不会你打死我

学不会你打死我 今天我们用shell脚本&#xff0c;awk工具来分析日志来判断是否存在扫描器来进行破解网站密码——限制访问次数过多的IP地址&#xff0c;通过Iptables来进行限制。代码在末尾 首先我们要先查看日志的格式&#xff0c;分析出我们需要筛选的内容&#xff0c;日志…
暂无图片
编程学习 ·

Python - 如何像程序员一样思考

在为计算机编写程序之前&#xff0c;您必须学会如何像程序员一样思考。学习像程序员一样思考对任何学生都很有价值。以下步骤可帮助任何人学习编码并了解计算机科学的价值——即使他们不打算成为计算机科学家。 顾名思义&#xff0c;Python经常被想要学习编程的人用作第一语言…
暂无图片
编程学习 ·

蓝桥杯python-数字三角形

问题描述 虽然我前后用了三种做法&#xff0c;但是我发现只有“优化思路_1”可以通过蓝桥杯官网中的测评&#xff0c;但是如果用c/c的话&#xff0c;每个都通得过&#xff0c;足以可见python的效率之低&#xff08;但耐不住人家好用啊&#xff08;哭笑&#xff09;&#xff09…