前端HTML

最新推荐文章于 2024-09-28 19:02:04 发布

蛋糕味的板栗

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量31

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_58203855/article/details/130926656

版权

本文介绍了HTML的基础知识，包括网页结构、常用标签如div和span的用途，以及文本样式、换行、列表、图片和超链接的使用。还讲解了VSCode中编写HTML的便利性和表单元素在收集用户信息中的作用。

摘要由CSDN通过智能技术生成

1. 网页是前端开发人员写的，通过浏览器转成普通人眼中的美丽页面。
2. 网页的拓展名是.html
3. Html使用标签来描述网页，包含视频，音频，图片，等等。
4. div标签，没有具体含义，用来划分页面的区域，独占一行。
5. span，没有实际意义，主要应用在对于文本独立修饰的时候，内容多宽就占多宽的空间距离。

##html的基本语法
* <常规标记>也叫双标记

<标记></标记>

<标记属性= "属性值"></标记>

标记也可叫标签或叫元素

例如：`<head></head>`

* 空标记也叫单标记

<标记/>

<标记属性="属性值" />

例如`<br />`

>这是一个引用

    <html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <center>锣声一响，<br/>黄金万两。</center>
    </body>
    </html>
##vscode使用
* 利用！号可以直接写出HTML的基本内容。

        <head>
            <title>我在vscode创建的页面</title>
        </head>
        <body>
            <center>锣声一响，黄金万两。</center>
        </body>

* 文本标签（h1-h6）

一般6级就可以了

    <!DOCTYPE html>
    <html>
    <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>
    </body>
    </html>
* 段落文本
><p>段落文本内容</p>
标识一个段落（段落与段落之间有段间距）

* 换行
>换行`<br/>`
换行是一个空标记（强制换行）

* 水平线
>`<hr/>`空标记

* 加粗有两个标记（推荐strong）
>`<b>`加粗内容`</b>`只显示加粗

>`<strong>`强调内容`</strong>`突出文本

* 倾斜有两个标记（推荐em）
>`<em>`强调文本`</em>`

>`i`倾斜文本`</i>`

* 删除线有两个标记（推荐del）
>`<s>`文本`</s>`删除线

>`<del>`文本`</del>`删除线

* 拓展
>`<u>`文本`</u>`下划线

>`<sub></sub>`下标

>`<sup></sup>`上标

    <!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>你好<br>你好</h1>

        <p><strong>你好世界</strong></p>
        <hr>
        <p>你好<em>地球</em></p>
        <p>门票不要<s>999</s>,不要<del>99</del>,只要<u><b>9.9</b></u></p>
    </body>
* 不一般的hr
>`<hr color="red" width="300px" align="right" >`

>color-颜色 width-宽度 align-对齐方式 noshade-取消阴影（hr原本是有阴影的）

* 特殊符号
> 尖角号：<左尖角号  >右尖角号

    用法是这样的<hr noshade>

>空格： 该空格占据宽度受字体影响明显而强烈  &emsp;占据的宽度正好是1个中文宽度，且基本不受字体影响

    <p>  赵钱孙李，周吴郑王</p>
    <p>&emsp;&emsp;赵钱孙李，周吴郑王</p>

>版权：`©`为©

>商标：`™`为™   ` ®`为 ®

>div标签：
    <div>1111111</div>
    <div>2222222</div>

>span标签：

    <h3>体育<span style="color:gray">sports</span> </h3>
<h3>体育<span style="color:gray">sports</span> </h3>

* 列表
>有序列表：

    <ol type="A" start="4">
        <li>有序列表</li>
        <li>有序列表</li>
    <ol>
type类型（1，a,A,i,I）    start开始(取值只能是数字)

li里面可以随意放标签，但是ol里面只能放置li，数字是自动生成的。
>无序列表

    <ul type="disc">
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
type默认的是disc(实心园),还有circle（空心圆），square(正方形实心)，none（什么都不显示）

ul里面只能放li,li里面可以放其他标签；

默认的是黑色的实心圆
>自定义列表

    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dt>
    </dl>
* 图片标签的路径

    <img src=""/>

>同级目录：写法：code.gif;./code.gif;图片所在路径

>html与图片文件夹同级：写法：文件夹名/图片名；./文件夹名/图片名

>html在文件夹下，需要先返回上一级。写法：../图片名；../文件夹名/图片名

* 图片标签的属性

>`<img src="图片路径" title="鼠标悬停上去之后的提示信息" alt="图片不显示之后（加载失败）的提示信息" width="200px" height="200px"`

* 超链接标签

>能够实现不同页面的跳转

>`<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>`

>target属性：规定在何处打开文档 A.target="_self"默认值 B.target="_blank"新窗口打开

* 数据表格的创建
>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        </table>

* 表格属性

>宽度 width 单位px,%(相对于父元素)

>高度 height 单位px,%(相对于父元素)

>边框 border

>边框颜色 bordercolor

>背景颜色 bgcolor

>水平对齐 align="left"或"right"或"center"

>cellspacing="单元格与单元格之间的间距"

>cellpadding="单元格与内容之间的空隙"

* 行tr属性

>高度 height

>背景颜色 bgcolor

>文字水平对齐 align="left/right/center"

>文字垂直对齐 valign="top/middle/bottom"

* 单元格td属性

>宽度 width（影响的是整列）

>高度 height（影响的是整行）

>背景颜色 bgcolor

>文字水平对齐 align="left/right/center"

>文字垂直对齐 valign="top/middle/bottom"

* 表格合并

>表格合并列：Colspan=“所要合并的单元格的列数”，必须给td

>表格合并行：Rowspan=“所要合并的单元格的行数”，必须给td

* 表单标签

>表单的作用：收集用户信息。

    <from method="get或者post" action="向何处发送表单数据">
        <input/>
            A.属性type定义输入框类型
                a)文本框 type="text"  密码框 type="password"
                b)提交框 type="sumbit"和<button>提交按钮</button>一样
                c)按钮框 type="button"单纯的按钮
                d)重置框 type="reset"清空的效果
            B.属性placeholder描述输入字段预期值的简短的提示信息。兼容到IE8以上。
            C.属性name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器。
            D.属性value
    </from>

>Form当中method的post和get的区别：

>get是从服务器上获取数据，post是向服务器传送数据。

>get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程。

>对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

>get传送的数据量较小，不能大于2KB.post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Infornation Service互联网信息服务）中最大量为80KB，IIS5中为100KB.

    <!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>
        <form action="http://www.baidu.com" method="POST">
            用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写。" name="username"><br>
            密码：<input type="password" placeholder="请输入你的密码。" name="password"><br>
            
            <button type="submit">登录</button>
            
            
            <button type="reset">请重新输入一下吧</button>
        </form>
    </body>
    </html>