HTML基础入门

小奕vi

已于 2022-09-14 18:25:59 修改

阅读量292

点赞数 1

分类专栏： JavaEE初阶文章标签： html

于 2022-09-14 18:21:36 首次发布

本文链接：https://blog.csdn.net/Lirene_/article/details/126843176

版权

JavaEE初阶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础入门

1、什么是HTML
2、VScode
3、标签详解

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>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
 
</body>
</html>

在这里插入图片描述

3.2 段落

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

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

</body>
</html>

在这里插入图片描述

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>

在这里插入图片描述

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>

在这里插入图片描述

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>123</td>
    </tr>
    <tr>
        <td>小仝</td>
        <td>456</td>
    </tr>
</table>

</body>
</html>

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

   <table border="1px">

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

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

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

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

在这里插入图片描述
（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>123</td>
    </tr>
    <tr>
        <td>小仝</td>
        <td>456</td>
    </tr>
</table>

在这里插入图片描述

3.6列标签

（1）有序标签：

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

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

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

在这里插入图片描述

3.7表单标签

3.7.1单行输入框：

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

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

</body>
</html>

在这里插入图片描述

3.7.2密码框：

<input type="password">   
<!-- 输入在密码框的内容都是*** -->

在这里插入图片描述

3.7.3单选框：

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

    <input type="radio"name = "gender"id = "male">
    <label for="male">男</label>
    <!-- 使用label把文字和选项绑定在一起，媒介 id -->
    <input type="radio"name = "gender"id = "female">
    <label for="female">女</label>

    <input type="radio"name = "gender"id = "male"checked = "checked">

3.7.4复选框：

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

在这里插入图片描述

3.7.5下拉菜单：

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

</select>

在这里插入图片描述

小奕vi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML基础入门

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面。
复制链接

扫一扫