HTML 基础

眉似远山长

于 2023-02-24 11:59:14 发布

阅读量98

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/kaiwawah/article/details/129196520

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本格式，包括<head>、<body>和<title>标签。讲解了常见的HTML标签，如注释、标题<h1>-<h6>、段落<p>、换行<br>、格式化标签（如<strong>、<em>）以及图片<img>、超链接<a>的使用。此外，还提到了表格<table>、列表<ul>、<ol>、<li>，input字段和无语义标签<div>、<span>的应用。

摘要由CSDN通过智能技术生成

1.HTML的基本格式

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

head：就是表示页面中的属性

body：表明页面中有哪些元素

tittl：这个网页叫啥

这样的形式构成层级树结构，当然这个框架的话也是有快捷方式的~~ 输入 ！并且再按一下TAB键就ok了

2.HTML常见标签

1.注释标签

形如的注释是HTML专用的注释，快捷键是 ctrl+/

2.标题标签

h1...h6 不同的标题区分（一级标题....）

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

3.段落标签

如果在HTML直接输入字体，会发现没有段落，因此使用段落标签来实现

<p>hello</p>

4.换行标签

br 就是break的简称

5.格式化标签

<strong>strong 加粗</strong>
<b>b 加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

6.图片标签

图片得需要路径才能实现有俩种方式一个是相对路径一个是绝对路径

相对路径就是以html所在位置以基准开始找，绝对路径就是具体位置~~ 对于相对路径来说：

同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: ../image/1.jpg

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">

src描述的是路径 alt表示的是替换文本，如果图片无法正常显示显示的是这个文字，tittl是鼠标放在图片上面的时候，显示出来的文字。border就是边框~~

7.超链接标签

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
链接的几种形式:

<img src="image/rose2.jpg" alt="">
<img src="../rose.jpg" alt="">
<img src="D:/rose.jpg" alt="">
<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt="">
<a href="http://www.baidu.com">百度</a>

8.表格

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th.
表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.
align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.
注意, 这几个属性, vscode 都提示不出来.
合并单元格
跨行合并: rowspan="n"
跨列合并: colspan="n"
步骤
1. 先确定跨行还是跨列
2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
3. 删除的多余的单元格

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
<tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
</tr>
<tr>
    <td>张三</td>
    <td>男</td>
    <td>10</td>
</tr>
<tr>
    <td>李四</td>
    <td>女</td>
    <td>11</td>
</tr>
</table>

9.列表标签

ul代表无序列表 ol代表有序列表，列表的内容用li包起来

10.input标签

用于各种输入控件

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
<form action="test.html">
... [form 的内容]
</form>
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.