html基础学习

最新推荐文章于 2024-09-12 18:02:32 发布

小鱼明天见

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量77

点赞数 1

文章标签： html html5 前端

本文链接：https://blog.csdn.net/m0_56631295/article/details/121343130

版权

本文详细介绍了HTML的基础概念，包括结构、表现和行为的构成，以及常用的标签和属性。内容涵盖标题、段落、换行、文本格式化、图像、超链接、注释、表格、列表和表单等元素的使用方法。此外，还讲解了表单控件如input、select和textarea的用法，以及如何创建和理解超链接的多种类型。

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

一.概念：

1.web标准由结构；表现；行为构成

2.标签都成对出现，少部分单个出现

3.书写框架：

<!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>

三者必须写

二 .标签:（合适的地方存放合适的标签）

1.标题标签：<h1>-<h6> (大小，重要性依次降低，做标题使用或者文字重要）成对出现

2.段落标签：<p>我是一个段落</p> 网页中空格只显示一个段落之间保持空隙

3.换行标签：<br /> 单个标签；硬性换行段落之间无缝隙

4.文本格式化标签：

粗体，斜体，下划线等

语义：突出重要性，比普通文字重要。

加粗：<strong></strong> ; <b></b>

倾斜：<em></em> ; <i></i>

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

下划线：<ins><ins>或者<u></u>

5.<div>和<span> 无语义，只是一个盒子用来布局网页

div：分割区；一行只能放一个，大盒子

span：跨度；一行可放多个，小盒子

6.图像标签：单标签

（1）. src必须要写：用于指定图像文字的·路径和文件名。

注：图片储存与网页在同一个文件夹里

（2）.alt 替换文本（用于在图片显示不出时）

（3）.title 提示文本。鼠标在图片上时，显示文字

（4）像素：

a..width:宽度

b.height:高度

c.border：图像边框 css:改变边框的颜色

注：宽度和高度只用一个改变一个，另一个等比例自动改变

所有的均写在<img src="url">标签里每个标签之间要有空格。

属性=“值” 各个标签之间无顺序。

（5）.路径

A.目录文件夹和根目录：将所有的文件放在一个文件夹中

根目录：双击打开第一层

B.相对路径：图片相对于HTML的位置作参考。

分三级：同一路径（同一根目录）；

下一级路径：图片储存在目录文件夹的·另一个文件夹中 <img src="images/图像名“ />；

上一级路径：图像位于HTML文件上一级

C.绝对路径：在电脑中的位置：C:\Users\杨小雨\Desktop\前端学习

6.超链接标签：

<a>：从一个页面连接到另一个面

语法规范:

1.<a href="跳转目标" target="目标窗口的弹出方式">文本图像</a>

Href:指定连接目标地址

target：链接页面的打开方式，_self为默认页面，_blank为新窗口打开。

2.链接分类：

A.外部链接，列如：<a href="http://www.qq.com" target="_blank">腾讯</a>

B.内部链接：例如：<a href="公司简介.html">公司简介</a> 创建的HTML文件在同一根目录下

C.空链接：未确定连接时 <a href="#">首页</a>.

D.下载链接：href中的地址是一个文件或者压缩包，会下载这个文件

<h4>下载链接：地址链接的是文件 .exe 或者是zip等</h4>

E.网页元素链接：在网页中的文本，图像，表格，音频，视屏等超链接

F.锚点链接：链接可快速定位到当前页面某个位置。

<a Href="#two">XXX</a>; 找到目标位置标签，里面添加一个ID属性=刚才的名字，如：<h3 id="two">XXX</h3>

例：<a href="#life">个人生活</a>

7.注释标签：做出标识

特殊字符：

8.表格标签：

1.基本语法：

<table>

<tr>

<td>单元格内的文字</td>

...

</tr>

</table>

tr定义表格中的行

td定义单元格。

2.主要作用：布局页面，显示数据

9.表头单元格标签：

<th>姓名</th> 加粗居中显示

10.表格属性（加边框) 在CSS中显示。

写在<table>里面去。

Cellpadding 为文字与边框之间的距离。 cellspacing单元格与单元格之间 align对齐

11.表格结构标签：

<thead>头部标签（区域）

<tbody>主题标签

12.合并单元格：将多个单元格合并为一个

1.跨行合并：rowspan="合并单元格的个数“

2.跨列合并：colspan=“合并单元格的个数”

3.目标单元格：跨行则：最上侧单元格为目标；跨列：最左侧单元格为目标

4.合并单元格的方式：

首先确定跨行还是跨列；找到目标单元格.写上合并方式=合并的单元格数量。

例如： <td colspan="2"></td>

最后删掉多余的单元格。

13.列表标签

1，无序列表（重点）

语法格式：<ul>

</ul>

<ul>只能嵌套<li>;无顺序；<li>里面可放任何；带有自己的样式属性

2.有序列表

语法规范：<ol>

</ol>

有一定顺序。

3.自定义列表

语法规范：<dl>

</dl>

2.dl中只能放dt dd标签。dt和dd里面可放任何标签。

14.表单标签：（注册页面）

表单域；表单控件；提示信息构成

1.表单域：form会将表单信息送到后台

语法：<form action="url地址" method="提交方式" name="表单域名称">

各种表单控件

</form>

2.表单控件：

a.input输入表单元素单标签

元素属性：

<input type="属性值"  />
<!-- 按钮组 提交数据 -->
        <input type="submit" value="免费注册">
        <!--重置按钮可以还原默认状态    -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 点击按钮 -->
        <input type="button" value="获取短信验证码">
        <!--  文件域 上传文件使用-->
        <input type="file">

name是表单元素的名字；区别表单元素的不同；以实现多选一的作用。选择按钮name值相同。

value表单的值（默认属性）只在文本框显示。

注：<lable>标签当点击标签内的文件时，浏览器就会自动将焦点转到选择对应的表单元素上。

语法：

 <label for="sex">男</label>

        <input type="radio" name="sex" id="sex" />

b.select下拉表单元素语法：

  <!-- 下拉表单 有很多选项的控件 -->

        <select>

            <option>

                ....

            </option>

        </select>

在<option>中写selected="selected" 该选项为默认选项

c.textarea文本域元素

Cols 一行多少个字；rows可以显示多少行

大量输入时：语法：

请输入反馈：

</textarea>