HTML基础

最新推荐文章于 2024-03-31 19:45:30 发布

编程使我头冷

最新推荐文章于 2024-03-31 19:45:30 发布

阅读量757

点赞数

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

本文链接：https://blog.csdn.net/weixin_51330175/article/details/125751316

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、前言

制作网页有多种编程语言实现，各编程语言具备各自独特的作用，其中典型的组合是HTML+CSS+JavaScript。以下是三者的简介：

编程语言	属性	类比
HTML（超文本标记语言）	结构	大楼
CSS（重叠样式表）	样式	墙漆（美化）
JavaScript	行为	内部人的行为（动态渲染）

二、HTML基础

1. HTML认识

在HTML中，一个尖括号 < 称为标记，两个尖括号 <> 则称为标签，标签成对出现 <><> ，称为标签对，标签内的 / 称为闭合，如<head></head>，<head>是开始标签，</head>是闭合标签。

标签的特点

（1）一个尖括号叫做标记，两个尖括号叫做标签；

（2）每个标签都是由一对尖括号包裹单词组成的；

（3）一般标签都是成对出现，一般称第一个标签为开始标签，第二个标签为结束标签；

（4）包含开放标签和闭合标签（/）；

（5）单个出现的标签叫做自闭合标签，例如<meta>标签；

（6）标签不区分大小写，推荐小写，规范。

HTML的基本结构如下：

<!--  !:声明  doc:document(文档)  type:类型 -->
<!DOCTYPE html>  <!--声明文档类型为HTML，浏览器会自动解析html文件和代码-->
<!-- 象征一个文档的开始 -->
<html lang="en">    <!-- lang:language  en:English -->
    <!-- 网页的头部 -->
    <head>
        <!-- meta确定网页所使用的字符编码 -->
        <meta charset="UTF-8">
        <!-- 页面的标题 -->
        <title>Title</title>
    </head>
    
    <!-- 页面的主体 -->
    <body>
        
    </body>
</html>

页面整体分为两部分：

一部分是head部分，主要是页面的整体信息和配置，内容不会出现在浏览器内部。

一部分是body部分，这部分内容则会在浏览器中展示出来。

2. HTML常用标签

2.1 br标签

对于形如<br>的标签，我们称之为br标签，<br>是换行标签，起到换行作用。

2.2 块级标签

2.2.1 block块级标签的特点

总是在新行上开始，且独占一行，如<div></div>；

宽和高以及外边距和内边距都可控制；

宽度缺省，则是它容器的100%；高度缺省，则是其文字本身所撑起的高度；

可以容纳内联元素和其他块级元素。

2.2.2 常见的块级元素

1）标题标签 <h>

<!--  标题标签h h1-h6 默认加粗 --><!-- 我是一个注释代码，在运行时不会被执行 -->
<h1>1级标题</h1>  <!-- 一个文章，一般只有一个一级标题 -->
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>  <!-- 四级标题和网页文档的文字大小一致 -->
<h5>5级标题</h5>
<h6>6级标题</h6>  <!-- 最小的就是六级标题 -->

<!-- 在body标签内写入上述代码即可得到运行结果，即<body>内容</body> -->

2）段落标签 <p> ：用于一个文章的段落

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

3）列表标签

① 有序列表 <ol>

<!-- 有序列表ol --><!-- type属性定义有序类型：1、i、I、a、A -->
<ol type="1" start="4">    <!-- start="4"表示从4开始计数 -->
    <li>python</li>
    <li>Java</li>
    <li>web</li>
    <li>C++</li>
</ol>

运行结果：

② 无序列表 <ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
</head>
<body>
    <!-- 无序列表ul，没有序号的列表 -->
    <ul type="disc">    <!-- type属性定义有序类型：disc（实心圆）、circle（空心圆）、square（正方形）-->
        <li>python</li>
        <li>Java</li>
        <li>web</li>
        <li>C++</li>
    </ul>
</body>
</html>

运行结果：

③ 定义列表 <dl>

<!-- 定义列表dl  显示时为缩进排列，类似于题目大纲 -->
<dl>
    <dt>学科：</dt>  <!-- 定义列表的标题 -->
    <dd>Python</dd>  <!-- 定义列表的列表 -->
    <dd>Java</dd>
    <dd>C++</dd>
</dl>

运行结果：

4）块级标签 <div>

<div style="background-color: yellow">块级标签</div>

运行结果：

2.3 内联标签

2.3.1 Inline内联标签的特点

和其他元素在同一行上，不独占一整行，直到内容撑满时才会换行；

宽高以及内外边距都不可改变；

宽度就是其文字或图片高度，不能改变。即：宽和高都是内容所撑起的高度；

内联元素只能容纳文本或者其他内联元素。

2.3.2 常见的内联标签

1）文本标签 <span>

<span style="background-color: red">文本标签1</span>
<span style="background-color: pink">文本标签2</span>
<span style="background-color: orange">文本标签3</span>
<span style="color:blue">这是span文本标签</span>

运行结果：

2）超链接标签 <a>

超链接标签<a>用于链接其他资源，可以用来跳转或者锚点。a标签在创建时会自带一个href属性，属性值即为所要跳转的链接，也可以是自己写的网页文件。

这是百度链接，点击这里：
<span style="color:blue">
    <!-- a标签-->
    <a href="https://www.baidu.com">百度</a>
</span>

运行结果：

3）图片标签 <img>

<img src="网页图片路径" alt="图片取名">

<!-- 图片标签img，自闭合标签
src属性：图片的路径  alt属性：为图片取名
相对路径：当前路径出发去找图片
绝对路径：从根目录出发
-->
<img src="https://i01piccdn.sogoucdn.com/e39e15c93878109a" alt="我是佩奇">

运行结果：

4）粗体标签 <b> 和斜体标签 <i>

<b>粗体标签</b>
<i>斜体标签</i>

3. 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
</head>
<body>
    <!-- 表格table标签 -->
    <!-- 行列合并操作 colspan：合并列  rowspan：合并行 -->
    <table border="1px" cellspacing="0">    <!-- border属性加上线边框   cellspacing取消表格边框之间的间隔(设置边框的间隔) -->
        <caption>表格总标题</caption>

        <tr>  <!-- 行标签 -->
            <th>1行1列</th>    <!-- th表头标签，默认加粗，默认居中对齐 -->
            <th>1行2列</th>
            <th>1行3列</th>
        </tr>

        <!-- align设置居中对齐center，left为左对齐，right为右对齐 -->
        <tr align="center">
            <td colspan="3">2行1列</td>  <!-- colspan="3"为合并3列 -->
            <td>2行2列</td>
            <td>2行3列</td>
        </tr>
        
        <tr align="center">
            <td rowspan="2">3行1列</td>   <!-- rowspan="2"为合并2行 -->
            <td>3行2列</td>
            <td>3行3列</td>
        </tr>
    </table>
</body>
</html>

运行结果：

4. 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
</head>
<body>
    <form method="post">
        <!-- 表单里，最重要的还是input标签，里面的type属性决定它是一个什么样的框 -->
        <input type="text"><br>    <!-- type="text"是文本框 -->

        <!-- placeholder提示语 -->
        <!-- 文本框text -->
        用户名：<input type="text" name="username" placeholder="请输入用户名"><br>    <!-- <br>换行 -->

        <!-- 密码框password -->
        密码：<input type="password" name="password" placeholder="请输入密码"><br>

        <!-- 单选框radio -->  <!-- name应当一致，否则都可以勾选，而不是单选 -->
        性别：
        男 <input type="radio" name="sex" value="nan">
        女 <input type="radio" name="sex" value="nv">
        保密 <input type="radio" name="sex" value="baomi"><br>

        <!-- 复选框checkbox -->
        <!-- disabled：禁止选择  checked：默认选择 -->
        学科：
        <input type="checkbox" name="subject" value="en" disabled>  英语
        <input type="checkbox" name="subject" value="zn" checked>  语文
        <input type="checkbox" name="subject" value="math">  数学
        <br>

        <!-- 文件框file -->
        <input type="file" name="file"><br>

        <!-- 下拉框 -->
        籍贯：<select name="sel" id="sel">
        <option value="1">上海</option>
        <option value="2" selected>广东</option>  selected属性可以设置首个展示的值，此处默认为广东
        <option value="3">北京</option>
        </select>
        <br>

        <!-- 文本框textarea 评论 -->
        <!--cols=宽 rows=高-->
        文本域：<textarea name="text" id="text" cols="30" rows="10"></textarea>
        <br>

        <!--提交框submit--><!-- 提交后数据会出现在搜索框，此时应在form里加入method="post" -->
        提交：<input type="submit">

        <!--重置框reset-->
        重置框：<input type="reset">

        <!--普通按钮-->
        <input type="button" value="普通按钮">
    </form>
</body>
</html>

运行结果：