【HTML】构建网页的基石

简介: 本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。

HTML 是一种超文本标记语言,不仅有文本,还能包含图片,音频等

1. HTML 的文件基本结构

html 标签是整个 html  文件的最顶层标签,head 标签中写页面的属性,body 标签是页面中显示的内容,title 标签是页面的标题,当把上面的代码在浏览器中运行一下可以看到:

在 VS code 中输入一个 !就可以直接生成一个整体的框架

2. HTML 的常见标签

2.1. 标题标签

h1 - h6 分别表示 1 级标题到 6 级标题

<body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
</body>

2.2. 段落标签

在 HTML 中,段落,换行符,空格都不会生效,如果需要分成段落,就需要使用专门的段落标签

<body>
    <h1>我是一级标题</h1>
    <p>我是一个段落</p>
</body>

p 标签描述的段落没有缩进,会根据浏览器宽度来进行自动排版

<body>
    <p>我是一个段落
        我换行了
        我有     空格
    </p>
</body>

html 内容首尾处的换行空格均无效,在 html 中文字之间加入多个空格只相当于一个空格,换行也是不会直接换行,相当于一个空格

2.3. 换行标签

如果想实现换行的话可以通过 <br/> 标签来实现,br 是一个单标签,不像上面的几个标签一样需要首尾配合使用

<body>
    你好<br />
    你好<br />
</body>

p 标签的段落换行和 br 标签的换行中间的行距也有点不一样

2.4. 图片标签

img 标签表示图片,必须带有 src 属性,表示图片的路径,同级目录下可以直接写文件名,可以写绝对路径,也可以写相对路径,还可以写网络路径,一般建议写 / ,不写 \

./ 表示当前目录, ../ 表示上一级目录

<body>
    <img src="E:/截图/图片/壁纸.png" alt="">
    <img src="壁纸.png" alt="">
</body>

还可以设置图片的宽度和高度

<img src="壁纸.png" height="200px">

一般宽高指定一个就可以了,另一个会等比例缩放

2.5. 超链接标签

a 标签就表示超链接, href 表示要跳转的位置

<a href="https://www.baidu.com/">百度</a>

除了可以跳转外部的链接,内部的链接也可以跳转,写相对路径即可

<a href="Test.html" target="_blank">跳转</a>

target 表示跳转的方式,_blank 表示在新的页面中打开,默认是在本页面打开的

还可以使用一个空连接,用 # 来进行占位,如果此时还不确定要跳转的路径是什么就可以使用 # 进行占位

<a href="#" target="_blank">占位链接</a>

3. 表格和表单

3.1. 表格标签

table:表示整个表格

tr:表示表格的一行

td:表示一个单元格

也就是 table 包含 tr,tr 包含 td

vs code 中提供了快捷输入:

还可以直接指定行和列

<table>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>d</td>
            <td>e</td>
            <td>f</td>
        </tr>
        <tr>
            <td>g</td>
            <td>h</td>
            <td>i</td>
        </tr>
    </table>

这样就可以构建一个 3 * 3 的表格了

还可以加上边框,在 table 里加上 border 并设置大小

<table border="1px">

再加上 cellspacing 来设置内边框和外边框的间距

<table border="1px" cellspacing="0">

还可以设置边框的宽度和文字距离边框的距离

<table border="1px" cellspacing="0" width="300px" cellpadding="20">

单元格之间还可以合并,下面是按照行合并,指定合并两列,那么就多了一个字母 c ,为了保持表格形状,把 c 列删了就行

<td colspan="2">a</td>

同理,还可以合并行

<td rowspan="2">d</td>

然后发现多了 i 的单元格,把 i 删了就行了

还可以再加入 align 设置对齐方式,这里设置为居中

<table border="1px" cellspacing="0" width="300px" cellpadding="20" align="center">

表格就显示到浏览器的中间位置了

表格中的内容也可以设置居中

<td colspan="2" align="center">a</td>

3.2. 表单标签

表单是让用户输入信息的一种途径,这些输入框就是一个表单,表单分成表单域和表单控件两个部分

3.2.1. input 标签

可以输入各种组件,如单行文本框,密码框,按钮,单选框,复选框等,type 就可以指定这些控件类型

<input type="date">

date 就是一个简单的日历

文本框:

文本框 <input type="text"><br/>

密码框:密码框的输入是看不见的

文件:

文件 <input type="file"><br/>

单选按钮:

单选按钮 <input type="radio">
    <input type="radio">
    <input type="radio"><br />

按道理说单选按钮是只能选一个的,但是上面创建的三个按钮都可以选择,是因为上面的三个按钮没有关联,需要具有相同的 name 属性才能实现多选一的效果

单选按钮 <input type="radio" name="gender">    <input type="radio" name="gender"><br />

还可以加上一个 checked 来默认勾选一个选项

<input type="radio" name="gender" checked="checked">女<br />

复选框:可以勾选多个

复选框 <input type="checkbox">篮球 <input type="checkbox"> 足球<br />

普通按钮:

普通按钮<input type="button" value="按钮">

提交按钮:代码中没有写 value 按钮上也是有提交字样的

提交按钮<input type="submit">

下拉框:

下拉框
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

文本域:

文本域<textarea rows="5" cols="20"></textarea>

可以点右下角拖动

3.2.2. 表单域

表单域就是包含表单元素的区域,也就是可以包含上面控件的区域,用 form 标签表示,表单控件中的内容最终都会通过表单域提交

<form action="" method="get"></form>

action 中填的就是最终要提交的路径,method 表示提交数据的方式

4. 无语义标签

div 和 span

div 是独占一行的,span 只占一块

<div>
        <span>你好</span>
        <span>你好</span>
        <span>你好</span>
    </div>
    <div>
        <span>你好</span>
        <span>你好</span>
        <span>你好</span>
    </div>

相关文章
|
1月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
65 0
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
|
2月前
|
C++
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
2月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
3月前
|
数据安全/隐私保护
新年快乐鞭炮祝福html网页源码
新年快乐鞭炮祝福html网页源码,动态点燃鞭炮动画祝福新年快乐,带新年背景音乐,无加密完整可用,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。
42 0
新年快乐鞭炮祝福html网页源码
|
3月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
53 0
|
5月前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
103 3

热门文章

最新文章