HTML入门

朵朵宝

已于 2022-11-16 11:07:56 修改

阅读量353

点赞数 4

分类专栏： HTML 文章标签： html 前端 javascript

于 2022-11-03 10:26:47 首次发布

本文链接：https://blog.csdn.net/magic_818/article/details/127663804

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
    <head></head>
    <body>
        
    </body>
</html>

1.什么是HTML

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

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

2.固定格式

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

如上面代码所示,每个HTML,都会有固定格式(Visual Studio Code可以通过shifrt+!键进行快捷生成),否则无法出现运行内容,同时,HTML自身及其编译工具除过少括号或者多标点这些以外会报错,语法错误已经多空格少空格这类错误不会提示,所以敲打代码时务必要认真细心,否则就会打完无法显示结果,面临一点一点找的麻烦.

3.第一个HTML

新建一个csdn.html文件,内容如下:

<!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>
    <h1>我的第一个标题</h1>
    <h2>我的第一个标题</h2>
    <h3>我的第一个标题</h3>
    <h4>我的第一个标题</h4>
    <h5>我的第一个标题</h5>
    <h6>我的第一个标题</h6>
    <p>我的第一个段落.</p>
</body>

</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）<meta http-equiv="X-UA-Compatible" content="IE=edge">是识别为IE浏览器,<meta name="viewport" content="width=device-width, initial-scale=1.0">为安卓系统识别,我们这里不做细致考究
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题(标题等级分为六级,即h1-h6)
<p> 元素定义一个段落

保存后运行,可在浏览器中显示如下界面

3.各部分细节详解

3.1 标题

HTML的标题通过<h1>~<h6>标签来定义,标签等级一共分为六级

<body>
    <h1>我的第一个标题</h1>
    <h2>我的第一个标题</h2>
    <h3>我的第一个标题</h3>
    <h4>我的第一个标题</h4>
    <h5>我的第一个标题</h5>
    <h6>我的第一个标题</h6>
</body>

3.2 段落

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

<body>
    
    <p>我的第一个段落.</p>
    <p>我的第二个段落.</p>
    <p>我的第三个段落.</p>
</body>

3.3 链接

HTML 链接是通过标签 <a> 来定义的,下图运行之后就可直达百度主页

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<a href="https://www.baidu.com">这是一个链接使用了 href 属性</a>
 
</body>
</html>

3.4 图像

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<img src="zongxp.jpg" width="640" height="640" />//前面为图片的路径,后面为图片长和宽
 
</body>
</html>

3.5 表格

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

           <table border="1">
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$80</td>
            </tr>
          </table>

上段代码table为表格,table内的内容都为表格内的内容tr里面放数据,th作为列名,td作为表内数据

3.6 排序

3.6.1 有序排序

          <ol>
          <li>Coffee</li>
          <li>Milk</li>
          </ol>

3.6.2 无序排序

          <ul>
            <li>Coffee</li>
            <li>Milk</li>
          </ul>

3.6.3 自定义排序

        <dl>
            <dt>Coffee</dt>
                <dd>- black hot drink</dd>
            <dt>Milk</dt>
                <dd>- white cold drink</dd>
        </dl>

3.7 表单

<html>
<body>
    <!--这是一个登录表单-->
    <form>
        用户名:<input type="next" /><br />
        密码:<input type="passwd"><br <input type="button" value="登录" />
        <input type="reset" value="重置" />
    </form>
</body>

</html>

form在HTML中是"表单的意思",它是一个为用户输入创建HTML表单的标签

3.8 文本输入框

<html>
    <head>
    </head>
    <body>
            用户名:<input type="next"/><br/>
            密码:<input type="passwd"><br
    </body>
</html>

<input type="类型"> input在这里是作为输入,type后的类型,文本类型即为text

3.9 按钮控件

<html>
    <head>
    </head>
    <body>
        <!--这是一个登录表单-->
        <form>
            用户名:<input type="next"/><br/>
            密码:<input type="passwd"><br
            <input type="button" value="登录"/>
            <input type="reset" value="重置"/>
        </form>
    </body>
</html>

<input type="button" value="登录"/>

上述代码中,当input中的类型为button时,意味着这是一个按钮,当按钮需要生效操作时需要在页面中加入form

3.10 radio单选按钮

                    
<html>
    <head></head>
    <body>
          性别:
          <input type="radio" name="sex" />男
          <input type="radio" name="sex" />女 
    </body>
</html>

radio用法常用在性别单选上,在单选时需要两个元素的name为同一个,才会实现单选

3.11 checkbox

                
<html>
    <head></head>
    <body>
        爱好:
                <input type="checkbox" name="hoby" />男
                <input type="checkbox" name="hoby" />女 
                <input type="checkbox" name="hoby" />登山 
    </body>
</html>

checkbox用法用在多选上面

3.12 下选框

                
<html>
    <head></head>
    <body>
      课程:
                <select>
                    <option>JAVA基础</option>
                    <option>JAVA进阶</option>
                    <option>JAVA高级</option>
                    <option>JAVA骨灰级</option>
                </select>  
    </body>
</html>

下选框即为将数据放入select的option标签中即可