html笔记

html

  1. html：超文本标记语言

  2. W3C：万维网联盟

  3. W3C包括

    • 结构化标准语言（HTML、XML）

    • 表现标准语言（CSS）

    • 行为标准语言（DOM）

<html>
     <head> 这里面的在网页看不见，是给浏览器看的
          <title></title>
     </head>
     <body> 给用户看的内容写在这里
     </body>
</html>

标签

  1. 注释：Ctrl+/

  2. 设置属性（可以设置在开始标签或者自结束标签中，结束标签不能，空格隔开）

    <h1>你好<font color="red">好好</font>好好</h1>

  3. 文档声明

    <!DOCTYPE html>

  4. 无法直接打出大于、小于符号

     &lt;    小于号
     &gt;    大于号

源标签

meta：主要用于设置网页中的一些元数据，这些数据是给用户看的

        1. charset：指定用户的字符集
        2. name：指定的数据的名称
        3. content：指定的数据的内容

 

<meta name="viewport" content="width=device-width,initial-scale=1.0">

content属性值 :

 width:可视区域的宽度，值可为数字或关键词device-width
​
 height:同width
​
 intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
​
 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
​
 maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
​
 user-scalable:是否可对页面进行缩放，no 禁止缩放

标签

自结束标签：

img

块元素：

在网页中独占一行的元素称为块元素（block element）

  1. p标签中的内容就表示一个段落，它也是块元素

  2. hgroup 标题组

  3. blockquote：也可以做引用，没引号

  4. div

 

行内元素：

不会独占一行的元素（inline element）

  1. em标签：表示语音的加重（斜体）

  2. strong：加粗

  3. q：加引号，做引用

  4. br：换行

  5. span

  6. 超链接，a标签中可以嵌套任何元素，除了它自身

布局标签：

  1. header：头部

  2. main：主体（一个页面就一个）

  3. footer：网页底部

  4. nav：表示页面的一部分，用于导航

  5. aside：网页中的侧边栏之类

  6. artical：网页中的独立文章

语义化标签

span、div

列表标签

  1. 有序ol+li

  2. 无需ul+li

  3. 定义：d1+dt+dd

超链接

使用标签a来定义

属性：href——用于指定跳转的目标路径

当需要跳转到一个服务器内部时，一般使用相对路径

  • 相对路径一般./或者../开头

  • ./可以省略不写，代表当前文件所在的目录

  • ../表示当前文件所在目录的上一级目录

target属性：用来指定超链接打开的位置

  • _self 默认值，在当前页面中打开超链接

  • _blank 在一个新的页面打开超链接

回到顶部：直接将该超连接的href属性设置为#，页面不会跳转

id属性：唯一不重复的

  • 用于跳转到某处 href=“#该处的id”

在开发中可以用#作为超连接路径的占位符，但是也会跳转

JavaScript不会跳转href=“javascript：；”

图片标签

img标签（自结束）来引入：

<img src="./img/1.gif">

四个属性

  • src 指定图片路径

  • alt 对图片描述，默认不显示，这个描述是给搜索引擎看的

  • width

  • height

图片的格式：

  • jpeg（jpg）：支持的颜色丰富、不支持透明效果、不支持动图，一般用于显示照片

  • gif：支持颜色少，支持简单透明、不支持透明

  • png：支持颜色丰富、支持复杂透明、不支持动图

  • webp：具有所有优点，但是兼容性不好

  • base64编码形式，加载速度快，一般使用少

内联框架

iframe：用于向当前页面中引入一个其他页面

ifameborder：0/1，引入的页面与本页面的距离，只有0和1

音视频

audio src：引入外部音频文件 +属性controls（无值）

属性autoplay：自动播放，但是目前大部分浏览器不自动播放

属性loop：音乐是否循环播放

source src：也可以引入音频文件

embed：老式浏览器也能用，但是会自动播放

video ：引入视频

<video controls>
   <source src="./source/flower.webm">

 

posted @   小宁子xx  阅读(41)  评论(0)  编辑  收藏  举报
相关博文：
· 汉诺塔问题-vs2019
· HTML初步了解
· html学习笔记
· HTML学习笔记
· HTML(Hyper Text Markup Language)超文本标记语言
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示