html笔记-CSDN博客

本文链接：https://blog.csdn.net/Roseanne_Park0/article/details/127699744

HTML基础

web标准组成

web标准：由**结构（html）、表现（css）、行为(js)**组成

1．结构层 - HTML - 用来搭建网页的基本结构的

2．表现（样式）层 - CSS - 就是美化网页的

3．行为（交互）层 - javascript - 网站的交互
W3C (制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的。)
ECMA制定了行为(DOM(文档对象模型)，ECMAScript)标准
HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

HTML基本结构和HTML基本语法

HTML基本结构

<!-- 声明文档类型 -->
<!DOCTYPE html>
<!-- 说明写的是html标记语言 -->
<html lang="en">
<!-- 文件头部 -->

<head>
    <!-- 声明编码格式有UTF-8 -->
    <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>

HTML基本语法

1.常规标记（双标记、双标签）

<标记属性=“属性值” 属性=“属性值”></标记>

标记也可叫标签或叫元素

常见的双标签

<html></html>、<head></head>、<title></title>、<body></body>、<table></table>、<tr></tr>、<tr></tr>、<span></span>、<p></p>、<form></form>、<h1></h1>~<h6></h6>、<style></style>、<b></b>、<u></u>、<strong></strong>、<i></i>、<div></div>、<a></a>、<script></script>

例如：

2.空标记（单标记、但标签）

<标记属性=“属性值” />

常见的但标签

<br/>、<hr/>、<img/>、<input/>、<param/>、<meta/>、<link/>

例如：

写在<>中的第一个单词叫做标记，标签，元素。
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。
一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
空标记没有结束标签，用“/”代替。

HTML常用标记

1.文本标题（h1~h6）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

注：a. 标题标签都是双标签

b. 从一级到六级逐渐的变小

c. 每一个都独占一行

d. 每一个之间都会有个缝隙

强调的：一个网页中h1标题只能用一次，其余的可以随意使用次数

2.段落文本（p）

<p>段落文本内容</p>

标识一个段落(段落与段落之间有段间距)

注：a. 是双标签

b. 每一个都独占一行

d. 每一个段落之间都会有个缝隙

3.字符实体

例如：

&nbsp;  空格
&lt;  小于号
&gt; 大于号

4、换行(br)

<br />
换行是一个空标记(强制换行)

5、水平线

  <hr />空标记

6、加粗有两个标记

<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本

7、倾斜

<em>强调文本</em>

<i>倾斜文本</i>

8、扩展

<u>文本</u>下划线

<s>文本</s>删除线

<del>文本</del>删除线

<sub></sub>下标

<sup></sup>上标

9、列表

无序列表

<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

有序列表

<ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

自定义列表

 <dl>
    <dt>名词</dt>
    <dd>解释</dd>
    <dd>解释</dd>
    <dd>解释</dd>
   </dl>

ul和li要同时出现

ul后面只能写li，li里面可以写任意

列表是可以嵌套使用的

有序列表属性：

type 项目符号类型 start 从几开始

10、插入图片

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" width="宽度" height="高度"/>

title的作用:图片的标题： 在你鼠标悬停在该图片上时显示的提示文本，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的
**alt的作用:**提示文本必写；alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。（第二个功能，优化图片的）

11、超链接

<a href="目标文件路径及全称/连接地址" title="链接的标题" target="_blank">链接文本/图片</a>

网页中能点击跳转的就是超链接（跳转到指定的网址或者页面之间跳转）

其他属性 title和target==(target:页面打开方式，默认属性值_self _blank 新窗口打开)==

特点：有自己的颜色；自带下划线；在一行显示；鼠标划上去有小手状；

12、路径

相对路径

/下一级

…/上一级
绝对路径

具体地址

13、注释

Html的注释语法
```

```
Css的注释语法
```
/* 中间写css注释内容 */
```

表单的作用及组成

表单组成

表单域（表单框）
```
<form></form>
```

表单控件

<input type="类型" value="默认值"/>