HTML入门

前端系列文章

`

基本标签

什么是标签？

标签是由：小于号+中间字符+大于号组成的代码（注:代码的所有字符都由英文字符组成）作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息

标签的格式

• 单标签
• 双标签

常用标签

h1-h6 标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

网页中间有部分内容重要程度明显高于其他区域：比如网页标题，网页logo，新闻标题等，这些重要区域就使用h系列的标签来划分
h系列标签重要度按以下顺序： h1>h2>h3>h4>h5>h6

p 段落标签

<p>我是段落标签</p>

p标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域,其作用就是完成换行显示的功能

img 图片标签

<img src="" alt="" width="" height="">

src=“图片地址”:src是sourse的缩写，表示我们需要显示的图片文件所在的位置（见文件路劲）

alt=“图片名称”：每个图片都是为了展示某些内容，alt里面的文字则是为了描述图片内容的

width=“图片文件的实际宽度”：用以标注图文文件的实际高度，此处高度数据不可修改，不可因为布局需要改成其他非实际尺寸

height=“图片文件的实际高度”：同上

video 视频标签

<video src="" controls></video>

video标签的作用就是在网页上展示一个视频文件，这个标签也是HTML5时代的一个代表性存在

src=“视频地址”:src是sourse的缩写，表示我们需要显示的视频文件所在的位置

controls：这是视频文件的控制按钮区域,默认是不显示的所有要加这个属性

div 盒模型

<div>我是一个盒子</div>

目前网页布局技术总体而言可以分成三个步骤：
1：分区域
2：排位置
3：塞内容

div标签的作用就在网页内容中间划分出若干个矩形区域，用以存放不一样的内容

ul 无序列表标签

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

网页中间还有一些内容相似、结构相仿、布局接近的区域，像这一类区域我们就使用无序列表来进行区域划分

li 列表项

存在于ul或者ol标签中，也只能存在于列表标签中

ol 有序列表标签

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域，像这一类区域我们就使用有序列表来进行区域划分，这一类区域大多用在详细法律条文、政府公告、产品说明等内容上

span

<p>
    我是<span>育盛</span>
</p>

没有特殊样式，只是用来包裹文字，用于设置一些特殊的样式，例如一段文字中有文字需要设置单独的样式

strong

strong标签的作用就是在网页内容中的某段文字中间标注出特别重要的文字（语义）

注：
标签的效果与strong类似，区别在于em标签包裹的文字重要性比strong标签低，但是em标签内的文字会产生倾斜效果

标签的效果则是包裹一段文字，使被包裹的文字产生倾斜效果，但是被包裹文字的重要性不会有什么变化(淘汰的 没有语义的标签尽量不要使用)

a 超链接

href=“网页地址”: href是Hypertext Reference的缩写，意思是超文本引用，作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去

target=“页面打开方式”： ‘_blank’新页面打开; _self 默认打开方式,当前页打开

文件路径

相对路径

• 网页与文件在同一个文件夹中
  • 直接喊文件名字即可 1.jpg
• 网页与文件夹在同一个文件夹中
  • 先找到对应的文件夹打开再喊文件名字 img/1.jpg 斜杆可以理解为打开
• 网页在文件夹里面文件与文件夹在同一个文件夹中
  • 先退出当前文件夹然后再喊文件文字 …/1.jpg …/ 返回上一级

绝对路径

• 本地绝对路径
  • 直接右击选择属性找到位置复制然后加上文件名字即可 D:\Users\Desktop\1.jpg(仅限于自己测试 玩)
• 网络绝对路径
  • 右击选择复制图片地址 https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFNQLALwWiAI1Y38Q6ZET388XzuGulXAEE4Q&usqp=CAU
  • 网址直接复制