关于HTML的一些基础学习（1）

最新推荐文章于 2024-06-15 11:46:27 发布

zb404

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量219

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zb404/article/details/126676292

版权

刚开始学习前端，做一个记录；菜鸟一个，大神勿喷

HTML标签学习

超链接
前端的代码是通过浏览器的转化成用户看到的网页：IE、火狐、谷歌、Safari、Opera
浏览器内部都有一个渲染引擎，主要是对代码进行解析渲染的部分，不同浏览器渲染引擎不同，加载代码速度、性能和效果也不一样
如果想让代码在所有网页上都能打开，效果一样，需要用web标准来写
Web标准：HTML：结构—页面元素和内容；CSS：表现—网页元素的外观和位置等页面样式；JavaScript：行为—网页模型的定义与页面交互
Web要求页面实现：结构、表现、行为三层分离

HTML

文字变粗：<strong></strong>
主题的结构：<html><head><title>网页标题</title></head><body></body></html>
开发工具用VScode（速度快、体积小、插件多）
用vscode首先新建html文档然后输入！加TAb键骨架就出来了
注释
<开始标签></注释标签>
双标签和单标签（<br><hr>）
父子关系（嵌套）<html><head></head></html> 兄弟关系（并列）<head><body>
排版、文本格式化、媒体、链接标签
标题系列：<h1></h1><h2></h2>…….一直持续到h6：先选择要选的东西然后ctrl+d+d 能够选中该行的和选中元素一样的元素并进行修改
段落标签<p></p>
段落默认就是段与段之间有间隙，后期可以用css调试
换行标签是<br> 需要空格几下才能显示出来
水平线标签<hr> 一般都加在标签的外面
文本格式化标签：加粗，下划线，倾斜，删除
<strong>加粗<ins>下划线<em>倾斜<del>删除线 (主要是突出重要的语境) b u i s
图片标签：代码 <img src=”” alt=””> 单标签需要添加必要的标签属性（src属性名+引号里面是属性值 alt）一个标签可以写多个属性（用空格隔开） alt文本就是当图片加在失败的时候才显示alt的文本
./是当前的意思如果图片位置和所写代码所存储的位置在一起的话就可以直接写文件名字
图片中的title标签：当鼠标悬停的时候才显示的文本不仅仅能在图片上用还能在其他标签上使用
width标签和height标签如果只设置一个的话，另外一个位置会自动等比例缩放
路径：绝对路径（了解）：目录下的绝对位置，可以达到目标位置，通常从盘符出发或者完整的网络地址缺点：如果我只有c盘别人发给我的d盘的路径我打不开
相对路径（常用）：从当前文件开始找目标文件的过程：同级、下级（文件夹+/+该文件）、上级(用“../”进行查找)
音频标签的介绍：<audio sr=”./music.mp3” controls></audio> 他是播放的音乐不是超链接形式的音频。而且在网页中平执行起来没有声音，因为有些网页设定了不能自动播放
可以添加controls 即<audio src= “” controls ></audio>就可以显示播放音乐的插件了
autoplay 是自动播放（部分浏览器不支持）； loop 是循环播放注意：以上三个功能可以合并
音频标签支持：MP3 Wav ogg
视频标签<vidio src=”” controls></vidio>: controls、autoplay、loop和音频一样
谷歌浏览器需要将视频静音才能自动播放需要配合 muted才能自动播放
支持MP4、webM、Ogg
链接标签：<a href=”网页网址”>超链接</a> 注意：需要将网页地址输入全例如：百度一下，你就知道
开发网站初期，不知道跳转地址 href写一个#号 href是一个跳转地址
可以用一个target的属性来控制网页的打开形式：1.target=”_blank”是在新网页进行跳转打开
列表标签：无序列表（无排序）、有序列表（有排序）、自定义列表; ul：无序列表的整体，用于包裹li标签； li标签用于无序列表的每一项，包含每一行的任务；
无序列表：<ul>只能放li<li>随意嵌套</li></ul>
有序列表：把ul换成ol
自定义列表：有一个标题，标题下有好多内容的：dl 表示列表整体；dt表示主题；dd表示每一项内容 dd会默认显示缩进效果，dl标签只能包含dt和dd dt和dd能够包含任意内容 <dl><dt></dt><dd></dd></dl>
表格标签:table表示表格的整体，用于包裹tr；tr表示行，包裹td；td表示单元格，用于表示包裹内容；注意：tr是行不能根据列进行输入
表格的一些属性：boder：边框宽度；width：表格宽度；height：表格高度； 但是实际开发中样式效果一般用CSS进行设置；（宽高不提示）：<table border=”” width=”” height=””></table>
表格的一些其他标签：**caption：**表格大标题，表示表格整体大标题，默认在表格整体顶部居中位置显示 th是表头单元格，表示一列小标题，一般用于第一行，默认内部文字加粗并居中显示——注意：caption标签书写在table内部，th标签卸写在tr内部，替换td标签
表格的结构标签（了解）：thead：表格头部；tbody：表主体；tfoot：表格底部；
合并单元格：将水平或者垂直的多个单元格合并成一个单元格：跨行（垂直）合并和跨列（水平）合并：左上原则，保留最上方和最左边的单元格 —--—-————跨行合并（rowspan）或者跨列合并（colspan）注意：不能跨标签合并 head不能和body合并
```
<tr>
            <td>小哥哥</td>
            <td rowspan="2">100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>小姐姐真牛逼</td>
```
以上的步骤是：首先删除要合并的单元格，留出左上原则的单元格，然后确定是跨行还是跨列合并—-使用rowspan还是colspan 输入到左上原则的单元格 td中，然后确定要删除几个单元格就在里面填数字几，最终查看效果。