html基础

最新推荐文章于 2024-06-13 08:00:48 发布

托马斯，成

最新推荐文章于 2024-06-13 08:00:48 发布

阅读量216

点赞数

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

本文链接：https://blog.csdn.net/ZXCNIUBI/article/details/99703951

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

html基础

html基础

1.初识html的内容

首先html是一种超文本语言，主要是用来写网页，比如你想最直接的感受html是什么就打开随便一个网页然后F12这样就能进入管理器，其中的的整体格式就能看出来了在这里插入图片描述
这个就是我写这个博客的实例可能看不太懂每个地方都是干什么的，但是我具体演示一下就会清楚很多。

这个就是具体格式，其中每个部位的大致作用我也详细的展示了。然后接下来就说具体环境，我是用的python解释器来写的，就说pycharm，这个解释器的代码提示功能很强，你新建一个html文件就可以直接的把格式具体展示出来了，但是不是说就这一种方式可以写，包括你用txt文件都可以写，然后直接改后缀就可以展示出来了。

2.标签

2.1常用标签

2.1.1 块级标签

块级标签，说明这个标签中的内容是独占一行的。
在这里插入图片描述

这里主要演示了块级标签是h和p，h的后面的数代表的是字体大小，如果数小代表字大，数大代表字小。
当然还有几种也是非常重要的块级标签，ol,ul,form,div.这都是很有用的标签。所以这也是一种分类方式，就是把块级标签分为标题标签，段落标签，列表标签，div标签。

2.1.1.1标题标签

标题标签主要指的就是h1到h6.字体大小依次递减。

2.1.1.2段落标签

主要就是p。

2.1.1.3列表标签

有序列表，无序列表，和定义列表
这三种我主要以代码的形式给出，简单易懂

<ul>
    <li>老大</li>
    <li>老二</li>
    <li>老三</li>
</ul>
<ol>
    <li>老大</li>
    <li>老二</li>
    <li>老三</li>
</ol>
<dl>
    <dt>黑龙江省</dt>
    <dd>哈尔滨市</dd>
    <dd>佳木斯市</dd>
    <dt>吉林省</dt>
    <dd>长春市</dd>
    <dd>松原市</dd>
</dl>

在这里插入图片描述
这是运行结果。
当然在这里有快捷键的使用方法

2.1.1.4div标签

就是div主要是分化一个个的区，下面展示的代码中，用到的方法中对应的改变style的方法后面会讲到，div主要就是给网页分格子。

<!DOCTYPE html>                <!--文档类型-->
<html lang="en">               <!--跟标签-->
<head>                         <!--网页头部-->
    <meta charset="UTF-8">     <!--国际编码-->
    <title>div的用法</title>   <!--网页标题-->
    <style>
        #top{
            height: 100px;
            background:gold;
        }
        #content{
            height: 440px;
            background: wheat;
        }
        #bottom{
            height: 120px;
            background: green;
        }
    </style>
</head>
<body>      
<div id="top">top</div>
<div id="content">content</div>
<div id="bottom">bottom</div>
</body>
</html>

在这里插入图片描述

/*
而其实我们看的小说网站上面的章节就说通过这几种格式写的，就比如我小时候看的斗罗大陆的小说为例吧
在这里插入图片描述
这里展示了三种h1,h2,p,其中h1比h2字体大一截，而p只是代表普通字头当然这个可以自动换行，小说就是这么弄的。*/

2.1.2 行内标签

行内标签说明标签中的内容是不独占一行的，也就是说可以和其他的标签的在一行排列的，比如这里的strong,b,i,em,其中strong是加粗。

2.1.2.1 导入图片

<img src = "one.png" ait="下载失败"title="这是图片">

这就是图片的最基本的使用方式，其中的src就是本地图片的位置链接，ait是如果图片导入失败或者没有这个图片的话，出现的提示文字，而第三个title是当你的鼠标放在图片上时会出现的提示文字。接下来演示一个成功的和一个失败的例子。
在这里插入图片描述
这是成功的例子，由于反应不过来，所以我的title没有展示出来，这都是有的，大家也可以试试去。

这是失败的例子。

2.1.2.2 导入超链接

首先说明一下超链接是什么，其实不用理解那么官方，就是知道通过导入超链接可以让我们实现网页跳转还有从前到后的移动就可以，举个例子，咱们csdn的目录就是超链接实现了从前到后的移动，接下来就先演示简单一点的就是页面的跳转

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

代码很简单，就是短短的一行，href是代表的是导入的连接，当然如果连接不正确的话，那就直接网页报错，title也是当你把鼠标放在那个标题上时出现的提示方法。target是如果是_blank代表页面转换后跳转一个空白窗口，如果不写就是原窗口跳转。
第二种就是页内跳转，这种方式其实会用到css中的选择器，其中涉猎的部分我会在css选择器那里补充。
在这里插入图片描述
这是代码。
这是网页的图片。
首先解释一下为什么会从上往下跳转，因为一个标签选择器，因为下面的章节中有id=“test1”，这样的话如果在href中加入#就会从前向下识别，发现第一个就可以之间移动到那里，同时在下面的章节也可以直接返回上面，这样就很方便，看小说就会发现很多小说就会显示回到底部或者顶部。从下面往上返回就是一个嵌套。当然你可能也会发现，你按完之后会变颜色这个标题，但是你又不想跳转，有个固定的用法。

<a href="javascript:void(0)">hhhhhhhhhhh</a>

就是这个代码。
这里的a标签默认都是带有下划线的，如果你不想要下划线的话，那就用，text-decoration:none;

2.1.2.3 span标签

span标签其实用处很大，主要是他可以区别对待不同的东西，举个例子就知道了。
在这里插入图片描述

就是这个样子了，也就是说他可以使文字区别对待。

3.特殊符号

主要就是<>,因为在html中<>是特殊符号，正常不能输出，当然还有&emsp和&nbsp，前者是使行对齐，后者也是使行对齐，但是可能间距小点。
在这里插入图片描述

这是运行结果。

4.表格标签

<!DOCTYPE html>                <!--文档类型-->
<html lang="en">               <!--跟标签-->
<head>                         <!--网页头部-->
    <meta charset="UTF-8">     <!--国际编码-->
    <title>表格</title>   <!--网页标题-->
    <style>
        td,th{
            border: 1px solid black;
            width: 50px;
        }
    </style>
  </head>
<body>                         <!--网页可视化内容-->
   <table style="border-collapse:collapse">  <!--这个是为了让他们的线连起来-->
       <caption>表格名</caption>
       <thead>
       <tr>
           <th>姓名</th>
           <th>性别</th>
           <th>年龄</th>
       </tr>
       </thead>
       <tbody>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <td>4</td>
           <td>5</td>
           <td>6</td>
       </tr>
       <tr>
           <td>7</td>
           <td>8</td>
           <td>9</td>
       </tr>
       </tbody>
   </table>
</body>
</html>

主要讲解几个点，首先，如果想用他table，其实他是分成两个部分的，也就是说相当于在table 中有两个部分，一个是thead，一个是tbody，thead相当于table中的头，而tbody相当于table中的body，风格可以在table中控制，caption是表格名，整体的风格包括线条什么的也可以在head中控制，这里有个快捷打法，就是thead>tr>td3,其中tr代表行，td代表列，这里的3就是代表三列的意思，如果你想让字体加黑居中，th就换成td。
在这里插入图片描述
这个就是运行结果图。

当然如果想实现行或者列的合并，就是用colspan和rowspan加上几行或者几列就可以了。

5.form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的操作符</title>

</head>
<body>
    <form action ="" method="get" enctype="multipart/form-data">
        <p><label for = "1">用户名:<input type="text" name="user" id = "1"></p>
        <p>密&emsp;码:<input type="password" name="psw"></p>

        <p>
            性&emsp;别:
            <input type="radio" name="lalal1" value="male"> 男
            <input type="radio" name="lalal2" value="female"> 女
            <input type="radio" name="lalal3" value="secret"> 保密
        </p>
        <p>
            爱&emsp;好:
            <input type="checkbox" name="hobby" value="singing"> 唱歌
            <input type="checkbox" name="hobby" value="dance"> 跳舞
            <input type="checkbox" name = "hobby" value="rap"> rap

        </p>
        <p>
            上传文件：<input type="file">
        </p>
        <p>
            地&emsp;址:
            <select name="attr" id="">
                <optgroup label="黑龙江省">
                    <option value="jms" selected>佳木斯</option>
                    <option value="hr">哈尔滨</option>
                </optgroup>
                <optgroup label="吉林省">
                    <option value="cc">长春</option>
                    <option value="sy">松原</option>
                </optgroup>
            </select>
        </p>
        <p>
            个人简介：
            <textarea name="profile" rows = "10" cols = "20"></textarea>
        <p>
             <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

在这里插入图片描述
form: 总结一下各种操作，首先如果要使用form表单，我们当然要先建立一个form表单，就是通过这个语句来写，action是网页将要跳转的下个网页的地址，第二个主要有两种，一个是post,一个是get，而接下来主要都是通过p标签来写，这里解释下那个label标签是干什么的，这个是你在填写一个框的时候会在前面就可以填写，而不需要点击空格处，所以，label就是这个用处的，使用方法也很简单，就是label for =一个字符串，而这个字符串对应一个id，就是你想让那个变成这样就在那个语句，就在上面加上id = 字符串就可以使用了。而第三个就记住，如果你想导入文件就在这里加入这个就可以了。

input: 接下来解释下input标签，先输入input,主要就是在type中选择，输入名字就是用text,name就是为了当你提交的时候能传入一个键值对，不然账号登录就没有什么意义了，密码的type是"password",如果是单选的，例如性别的选择就是通过radio，多选就是cheakbox，文件就是"file"，前面记得加上那个enctype。

select：这个就是下拉线，这些都是固定的，主要强调的是selected这个是默认的选项。

textarea : 这个就是那个自我介绍,rows和cols就是控制长和宽限制的条件。

托马斯，成

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础

文章目录html基础1.初识html的内容2.标签2.1常用标签2.1.1 块级标签2.1.1.1标题标签2.1.1.2段落标签2.1.1.3列表标签2.1.1.4div标签2.1.2 行内标签2.1.2.1 导入图片2.1.2.2 导入超链接2.1.2.3 span标签html基础1.初识html的内容首先html是一种超文本语言，主要是用来写网页，比如你想最直接的感受html是什么就打开...
复制链接

扫一扫