HTML基础知识点总结

news2024/11/18 14:57:26

1.HTML简介

2.HTML基础结构

主要字符：

3.基础知识

（一）p标签

（二）hr标签

（三）尖角号

（四）版权号

(五)div和span

div

span

(六)列表

（1）无序列表

（2）有序列表

（3）自定义列表

（七）img

（八）超链接

（九） table表格

（2）tr和td属性

（3）合并表格

（十）表单标签

总结

1.HTML简介

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
HTML是一种标记语言，而不是编程语言

2.HTML基础结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

主要字符：

<!DOCTYPE html>	特殊且固定的文档声明标签
<html lang="en">	告诉浏览器写的代码是英文的，也可改为别的语言
<meta charset="UTF-8">	字符集
<head>和<body>	头部信息和主题部分
<title></title>	标题用于更改名字

3.基础知识

p标签

<p>	p 标签是段落标签可以主动换行
<hr>	换行标签，可以用于任何地方
<strong>	加粗文本
<del>	文本删除线
<u>	下划线
<sub>和<sup>	sub为下标签 sup为上标签

hr标签

可以用于画线

<hr color="green">
<hr color="green" width="300" align="left">

1.第一句是设置线条颜色为绿色2

2.第二句不仅设置了颜色，并且可以支持修改宽度，align可将该线条左对齐

尖角号

左尖角号：&lt;
右尖角号：&gt;
空格：
	第一种是&nbsp;
	该空格所占宽度受字体影响明显，宽度较随机
	第二种是&emsp;
	该空格所占宽度正好是一个中文宽度，基本不受字体影响，更推荐
<p>hello  &lt;world&gt;</p>
<p>&emsp13;&emsp13;hello</p>

版权号

版权©：&copy;
商标：已申请商标TM为&trade;
	  法定注册商标®为&reg;
    <p>&copy;</p>    ©
    <p>&trade;</p>    ™
    <p>&reg;<p>    ®

div和span

div

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

span

HTML 中的<span>标签被视为内联元素,它类似于 div 标记，但 div 标记特意用于块级元素，而 span 用于内联元素.

它适用于 <i>, <b>, <u>, <color>, <font family>, <background-color> 等等.

也可以使用 span 标记更改文本的字体。它将有助于负责更改字体大小，颜色，背景颜色，字体样式等

<center><h3>hello world<span style="color:aqua">sports</span></h3></center> 
<!-- 文本独立修饰作用 -->

列表

列表有3种：有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表

（1）无序列表

<ul  type="列表项符号">
 
    <li>无序列表项</li>
 
    <li>无序列表项</li>
 
    <li>无序列表项</li>
 
</ul>

注意：

1. ul里面只能放li

2.前面是实心圆

3.type中可以写disc（实心圆）,circle（空心圆）,square（实体正方行）,none

（2）有序列表

<ol>
 
    <li>有序列表项</li>
 
    <li>有序列表项</li>
 
    <li>有序列表项</li>
 
</ol>

注意：

1.ol 后面只能跟 li 不能跟其他的标签

2.数字是自动生成的

3.type中可以写：1,a,A,I,i 可以修改前面序号的类型

start:取值只能是一个数字

ype属性值	列表项的序号类型
1	数字1、2、3……
a	小写英文字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

<ol type="a" start="3">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
    </ol>

（3）自定义列表

可用于图文混排的情况，css对此处有优化，所以用的不多

<dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd> 
        
</dl>

img

<img src="图片路径">

同级目录

1. code.jpg

2. ./code.jpg

例：<img src="code.jpg" >

不同级目录

上级目录,先跳出当前文件夹再找到图片

src	文件路径
alt	无法显示图片时出现的提示文字
title	将鼠标移至图片上会出现提示信息

相对路径：指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。（多数用相对路径）

绝对路径：指的是文件的完整路径。

超链接

1.HTML用<a>来设置超文本链接

2.在标签 <a>中使用了href属性来描述链接的地址。

<a href="https://www.baidu.com/" target="_blank" title="百度查询">百度</a>

此时页面会跳转到浏览器，并出现“百度”的字样，点击此字段会跳转到百度官网

<a href="https://www.baidu.com/"><img src="图片地址" width="300" height="300">

通过设置图片也可进行超链接操作，更加的直观明了

target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接

table表格

<body>
    <table  border="1" width="50%" height="500" align="center"
    bordercolor="red" bgcolor="yellow" cellspacing="0"
    cellpadding="10">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

border	设置边框宽度
bgcolor	背景色
cellspacing="0"	单元缝隙
cellpadding	单元格与内容的缝隙

tr和td属性

tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格

合并表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="200" height="200">
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- get 方法从服务器获取数据 post方法向服务器发送数据-->
    <form action="https://www.baidu.com/" method="GET">
        用户信息:<input type="text" placeholder="请输入用户名" name="uesrname" >
        <br>
        密码：<input type="password" placeholder="请输入密码" name="password">
        <br>
        <input type="submit" value="登录">
        <br>
        <!-- 提交action信息到指定的地址-->
        <input type="reset" value="重置">
    </form>
</body>
</html>

（1）input标签

大部分表单都是用input标签完成的。

语法：<input type="表单类型"/>

（2）botton标签可以和input标签互换

（3）placeholder

placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码。