前端---HTML基础知识（详细）---基本常用标签

我爱布朗熊

已于 2022-07-13 23:41:20 修改

阅读量712

点赞数 2

分类专栏： # HTML 文章标签：大数据

于 2022-07-07 22:58:56 首次发布

本文链接：https://blog.csdn.net/weixin_51351637/article/details/125630015

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML简介

1.系统架构

B/S架构： Browser/Server 浏览器/服务器交互形式

Browser支持HTML、css、JS

Server支持C、C++、Java

优点：升级方便，只升级服务器代码即可；维护成本低

缺点：速度慢；体验不好；界面不炫酷

例如：百度页面，各种网站

C/S架构： Client/Server 客户端/服务器端交互形式

优点：虚度快，体验好，界面炫酷

缺点：升级麻烦，维护成本高

例如：QQ、WeChat

2.HTML简介

Hyper Text Markup Language（超文本标记语言）简写：HTML

HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件。

通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（文字如何处理，画面如何安排、图片如何显示等）

3.创建web工程

4.html书写规范及介绍

<!DOCTYPE html>           <!--约束，声明-->
<html lang="en">          <!--HTML标签表示html的开始   lang=“zh_CN”表示中文 lang="en" 表示英文-->

<head>                    <!--表示头部信息，一般包含三部分：title标签，css样式，js代码-->
    <meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集-->
    <title>标题</title>    <!--表示标题-->
</head>
<body>                    <!--body标签是整个html页面显示的主体内容-->
  hello
</body>                   <!--表示body主体的结束-->

</html>                   <!--表示html页面的结束-->

二、常用标签介绍

1.font字体标签

在 HTML 5 中，不支持 <font> 标签。请用 CSS 代替它。

<font> 标签规定文本的字体、大小和颜色

事例：

<body>                    <!--body标签是整个html页面显示的主体内容-->
  hello

<font color="red" face="宋体" size="6">我是初学者</font>
</body>                   <!--表示body主体的结束-->

2.HTML中的特殊字符

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个（连续空白字符只保留一个）。

如需在页面中增加空格的数量，您需要使用   字符实体。

3.标题标签

题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的、<h6> 定义最小的标

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

让标题左右中对齐

align="left" align="center" align="right"

4.超链接标签

<a> 标签定义超链接用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

<a href="http://www.w3school.com.cn">W3School</a>

5.无序列表和有序列表

无序列表

type="none" 的话，会取消前面的小点点（小图形）

有序列表

6.img标签

g img元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src 属性和 alt 属性。

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

alt属性设置当指定路径找不到图片的时候，用来代替显示文本的内容

7.table标签

<b> 这是一个加粗标签</b>

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

表格跨行跨列

colspan 属性设置跨列 rowspan属性设置跨行

8.iframe框架标签（内嵌窗口）

在一个区域显示一个窗口

iframe标签和a标签的结合

9.表单标签

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

<form>
    用户名称：<input type="text"     value="默认值"/> <br/>
    用户密码：<input type="password" value="abc" />  <br/>
    确认密码：<input type="password" value="abc" />  <br/>
    性别：    <input type="radio" name="sex"/>男
            <input  type="radio" name="sex" checked="checked"> 女 <br/>
    兴趣爱好： <input type="checkbox" checked="checked"/>java
             <input type="checkbox"/> javaScript
             <input type="checkbox"/>c++
    <br/>
    国籍：<select>
            <option selected="selected">---请选择国籍---</option>
            <option>中国</option>
            <option>美国</option>
             <option>日本</option>
         </select>
    <br/>

    自我评价：<textarea rows="10" cols="20" >我才是默认值</textarea>
    <input type="reset" value="重置" />
    <input type="submit" value="提交"/>
    <input type="hidden" name="abc" value="abcValue"/>


</form>

表单格式化


<form action="http://www.baidu.com" method="get">
    <table>
        <tr>
           <td>用户名称：</td>
            <td><input type="text"  name="username"   value="默认值"/></td>
        </tr>

        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="password" value="abc" />  </td>
        </tr>

        <tr>
            <td>确认密码：</td>
            <td><input type="password"  name="repassword" value="abc" /> </td>
        </tr>

        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex" value="boy"/>男<input  type="radio" name="sex" value="girl" checked="checked"> 女 </td>
        </tr>

        <tr>
            <td>兴趣爱好：</td>
            <td>     <input type="checkbox" name="hobby" value="java" checked="checked"/>java
                <input type="checkbox" name="hobby" value="javaScript"/> javaScript
                <input type="checkbox" name="hobby" value="c++"/>c++
            </td>
        </tr>

        <tr>
            <td>
                国籍：
            </td>
            <td>
                <select name="country">
                    <option value="none" selected="selected">---请选择国籍---</option>
                    <option value="China">中国</option>
                    <option value="US">美国</option>
                    <option value="Japan">日本</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="10" cols="20" >我才是默认值</textarea></td>
        </tr>

        <tr>
            <td align="center"><input type="reset" value="重置" /></td>
            <td  align="center"><input type="submit" value="提交"/></td>
        </tr>
    </table>
</form>

10.div、span、p标签

我爱布朗熊

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端---HTML基础知识（详细）---基本常用标签

B/S架构： Browser/Server 浏览器/服务器交互形式 Browser支持HTML、css、JS Server支持C、C++、Java 优点：升级方便，只升级服务器代码即可；维护成本低缺点：速度慢；体验不好；界面不炫酷例如：百度页面，各种网站C/S架构： Client/Server 客户端/服务器端交互形式优点：虚度快，体验好，界面炫酷缺点：升级麻烦，维护成本高例如：
复制链接

扫一扫