• HTML基础入门

    HTML基础入门

    1、什么是HTML

    HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

    • HTML 指的是超文本标记语言: HyperText Markup Language
    • HTML 不是一种编程语言，而是一种标记语言
    • 标记语言是一套标记标签 (markup tag)
    • HTML 使用标记标签来描述网页
    • HTML 文档包含了HTML 标签及文本内容
    • HTML文档也叫做 web 页面

    2、VScode

    编写HTML建议在Vscode上进行编写，VScode不用创建项目直接打开相应的文件即可启动html，首先下载Vscode，打开Vscode，再创建一个文件，在文件中创建一个文档再编写后缀为.html右键选择打开方式选择浏览器打开（建议使用Google Chrome），如下
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    3、标签详解

    标签可以简单分为三种：块级标签，行内标签，行内块标签

    • 块级标签：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
    • 行内标签：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！其中还有一种结合两种模式有点的显示模式。
    • 行内块标签：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示。

    3.1标题

    HTML 标题（Heading）是通过标签 < h1>-< h6>来定义的.

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题title>
head>
<body>
 
<h1>这是标题 1h1>
<h2>这是标题 2h2>
<h3>这是标题 3h3>
<h4>这是标题 4h4>
<h5>这是标题 5h5>
<h6>这是标题 6h6>
 
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    3.2 段落

    HTML 段落是通过标签 < p> 来定义的。

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题title>
head>
<body>
 
<p>这是一个段落p>
<p>这是一个段落p>
<p>这是一个段落p>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    3.3 链接

    HTML 链接是通过标签 < a> 来定义的。

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>
 
<a href="https://editor.csdn.net/md?not_checkout=1&articleId=126843176">这是一个链接使用了 href 属性a>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    3.4 图像

    HTML 图像是通过标签 < img> 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>

   <img src="KID.jpg" alt=""  width="200" height="300">

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    3.5 表格

    表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 < th> 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>

   <table>
    <tr>                  //表格若干行          
        <th>姓名th>     //表头
        <th>电话th>
    tr>
    <tr>
        <td>小李td>    //表格数据
        <td>123td>
    tr>
    <tr>
        <td>小仝td>
        <td>456td>
    tr>
table>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述
    （1）给表格加个边框：

       <table border="1px">


    • 1
    • 2

    在这里插入图片描述
    （2）设置尺寸：

      <table border="1px" width = "300px" height = "200px">

    • 1

    在这里插入图片描述
    （3）边框变单层：
    根据上图我们会发现边框是双层的，所以我们可以设置为单层的。

       <table border="1px" width = "300px" height = "200px" cellspacing = "0">


    • 1
    • 2

    在这里插入图片描述
    （4）表格内容居中：
    这里简单使用了CSS。

       <table border="1px" width = "300px" height = "200px" cellspacing = "0">
    <style>
        td{
            text-align: center;         //文字居中
        }
    style>
    <tr>
        <th>姓名th>
        <th>电话th>
    tr>
    <tr>
        <td>小李td>
        <td>123td>
    tr>
    <tr>
        <td>小仝td>
        <td>456td>
    tr>
table>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述

    3.6列标签

    （1）有序标签：

        <ol>
        <li>列表li>
        <li>列表li>
    ol>


    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述
    （2）无序列表：

      <ul>
        <li>列表li>
        <li>列表li>
    ul>

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    3.7表单标签

    3.7.1单行输入框：

    DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>

<input type="text">       //单行输入框

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    3.7.2密码框：

    <input type="password">   


    • 1
    • 2

    在这里插入图片描述

    3.7.3单选框：

        <input type="radio">男
    <input type="radio">女

    • 1
    • 2

    在这里插入图片描述

    但是我们会发现，它会出现两者都可的现象

    在这里插入图片描述

    所以我们给给它设置一个name，只要把name设成相同的值，此时就是“排它”的。这样就不会出现同时可以选择两个的情况。

        <input type="radio"name = "gender">男
    <input type="radio"name = "gender">女

    • 1
    • 2

    在这里插入图片描述

    还有有时候网页打开的时候，单选按钮的圈太小了，不好点击，所以可以通过特殊手段，让点击文字也能达到选中的效果，最后我们还可以在实现加载页面时自动选择一个选项。

        <input type="radio"name = "gender"id = "male">
    <label for="male">男label>
    
    <input type="radio"name = "gender"id = "female">
    <label for="female">女label>

    • 1
    • 2
    • 3
    • 4
    • 5
        <input type="radio"name = "gender"id = "male"checked = "checked">

    • 1

    3.7.4复选框：

    <input type="checkbox">数学
<input type="checkbox">语文
<input type="checkbox">英语



    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    3.7.5下拉菜单：

    <select>
    
    <option value="">上海option>
    <option value="">北京option>
    <option value="">深圳option>
    <option value="">广州option>

select>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述

  • 相关阅读:
    重新认识 IP地址
    Spring对事务的实现
    Mysql存储过程示例以及说明
    磷酸化甘露糖苷修饰白蛋白纳米粒/卵白蛋白-葡聚糖纳米凝胶的
    k8s1.19使用ceph14
    NLP标注工具Brat的简单使用
    Flutter实现局部刷新的几种方式
    SpringCloud微服务实战——搭建企业级开发框架（五十）：集成移动端推送功能的系统通知公告数据库设计
    bootstrap fileinput组件 选择文件自动上传
    第二章 基于模型的系统工程 P2｜系统建模语言SysML实用指南学习
  • 原文地址：https://blog.csdn.net/Lirene_/article/details/126843176