2021-09-06脚本语言---HTML（基础，基本标签，文本）

最新推荐文章于 2024-05-02 21:34:43 发布
最新推荐文章于 2024-05-02 21:34:43 发布
阅读量343 收藏
点赞数 2
分类专栏： # web前端 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51188461/article/details/120143548
版权

HTML是使用标签来描述网页的一种语言，学习心得就是实践，而且兴趣很大，网页前端，自己用代码做网页这种感觉峥不错,爽。

HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在CSS(Cascading Style Sheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。

文章目录

1.基本标签

❤创建第一个HTML标签

开始标签<>结束标签</>
h1表示HTML一个元素

<h1>这是我第一个标签<h1>

❤创建h2~h6标签

格式同h1，h1是一级标题，从h1到h6依次减小

❤创建P标签

p元素通常用来表示一个段落

<p>这是一个段落</p>

❤创建a标签

a标签通常用来定义一个链接
href属性的值就是链接的地址
点href后的网址会自动跳转这个网页

<a href="http://www.csdn.com">csdn</a>

❤创建img标签

img通常用来表示一个图片
src用来表示图片地址
alt用来表示图片未显示的内容

<img src="http://www.baidu.com/207791" alt="瞎写的地址"/>

❤创建div标签

div可以把文档分为独立的，不同的部分

<div>创建div标签</div>

❤添加注释

<!--要注释的内容-->
<!--<p>要注释的段落</p>-->

❤总体

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<h3>这是h3标题</h3>
	<p>这是一个段落</p>
	<!--注意：-->
	<a href="www.csdn.cn">csdn链接</a>
	<img src="www.tupian.cn/1279" alt="瞎编的"/>
	<div>创建了一个div标签</div>
</body>
</html>

2.基础

❤hello world

1.<html>...</html>就是一个最大的HTML元素
2.bgcolor="yellow"、align="center"都是HTML元素的属性
3.align属性值|	含义
center|	居中对齐
right|	右对齐
left|	左对齐
4.| 属性  | 值  | 含义
| ———— | ———–
| class  |  自定义的元素类名  | 元素的类名
|  id | 自定义的元素id名   | 元素的唯一的id
| style   |  元素内联样式 | 元素的样式
|  title  |   额外信息内容 | 元素的额外信息

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
  </head>  
  <body  bgcolor="F6F3D6">
    <!--用HTML语言向世界打声招呼吧！-->
    <h1 align="center">Hello World</h1>
    <p  align="center">动手改变世界</p>
  </body>
</html>

❤自我简介

1.<!DOCTYPE HTML>声明文档格式
2.根元素：HTML 元素，头元素：head 元素，
网页标题元素：title，元信息元素：meta
3.编码格式：charset，描述：description，
关键词：keywords，主体元素：body 元素
4.

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>自我简介</title>
    <meta charset="utf-8">
    <meta name="description" content="xxxx的x自我简介网站">
    <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
  </head>
  <body>
    <h2>简介</h2>
    <p>在这里简单的描述一下你自己吧。</p>
    <h2>三个与你最有关的词</h2>
    <p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
    <ul>
    <li>第一个词</li>
        <p>选择第一个词的原因</p>
        <li>第二个词</li>
        <p>选择第二个词的原因</p>
        <li>第三个词</li>
        <p>选择第三个词的原因</p>
    </ul>
</body>
</html>

3.文本

❤带超链接的网页

1.href 属性是超链接最重要的属性，
它用于指定超链接目标的 URL。
2.目标URL有三种类型：
锚 URL (anchor URL)：指向同一页面内某一位置；
相对 URL (relative URL)：指向同一网站的不同文件；
绝对 URL (absolute URL)：指向另一个网站。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML链接</title>
    <meta name="description" content="HTML链接知识讲解">
    <meta name="keywords" content="HTML, Link">
</head>
<body>
    <h1>HTML 入门</h1>
    <h2>本页目录</h2>
    <ul>
        <li><a href="#toc1">简介</a></li>
        <li><a href="#toc2">第1关</a></li>
        <li><a href="#toc3">第2关</a></li>
    </ul>
    <h2 id="toc1">简介</h2>
    <p>
        <a href="https://en.wikipedia.org/wiki/HTML"target="_blank">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        <a href="https://en.wikipedia.org/wiki/CSS"target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
        <a href="https://en.wikipedia.org/wiki/JavaScript"target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
    <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p>
    <h2 id="toc2">第1关</h2>
    <p>初识HTML：简单的Hello World网页</p>
    <h2 id="toc3">第2关</h2>
    <p>HTML链接：带超链接的网页</p>
    <hr>
    <p>若需帮助，请发送问题到<a href="mailto:someone@email.com">someone>E-Mail</a>。</p>
    <p><a href="#">回到顶部</a></p>
</body>
</html>

❤网络文章网页

1.一个段落中换行,<br>标签
2.三种列表类型组成元素如下：

| 类型  | 父元素  | 子元素|
| ———— | ———— |
|  有序列表 | ol  | li|
|  无序列表 |  ul | li|
|  描述列表 |  dl| dt， dd|
3.strong	表示内容的重要性	
em	表示内容的着重点	
mark,表示内容高亮显示
,对搜索结果页面或文章中的搜索词进行突出显示
small	表示细则一类的旁注,	
通常包括免责声明、 注意事项、法律限制、版权信息等
b	希望读者注意的文字,	
如文档摘要里的关键词、评论中的产品名、文章导语等
i	表示不同于其他文字的文字，
具有不同的语态或语气	如分类名称、技术术语、翻译的散文等
sub	定义下标	常见的下标包括化学符号等
sup	定义上标	常见的上标包括商标符号、指数和脚注编号等
4.q 元素用于短的引用，如句子里面的引用；
blockquote 元素表示单独存在的引用，它默认显示在新的一行。

在这里插入图片描述

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
<body>
    <h1>HTML</h1>
    <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
    </p>
    <h2>历史</h2>
    <h3>开发过程</h3>
    <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，
        <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
    </p>
    <h3>HTML里程碑</h3>
    <dl>
        <dt>1995年11月24日</dt>
        <dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd>
        <dt>1997年1月14日</dt>
        <dd>HTML 3.2以
            <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
                <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
        <dt>1997年12月18日</dt>
        <dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd>
        <dt>2014年10月28日</dt>
        <dd>HTML5 发布。</dd>
        <dt>2016年11月1日</dt>
        <dd>HTML 5.1发布。</dd>
    </dl>
    <h2>参考文献</h2>
        <ol>
        <small>
            <li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p.&#160;1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li>
            <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
            <li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li>
        </small>
        </ol>
</body>
</html>

❤日常消费账单表格网页

1.在HTML表中，一个表格(table)由行(tr)组成，
每一行由单元格组成，
单元格有标题单元格(th)和数据单元格(td)。
2.设置带边框的表格：指定<table>元素的border属性值。
3.值	|含义
col	|单元格是列的表头
row	|规定单元格是行的表头
colgroup	|单元格是列组的表头
rowgroup	|单元格是行组的表头
4.<thead>元素标记表格第6行到第10行为头部；
<tbody> 元素包围了第15行到第32行的所有数据行；
最后，<tfoot>元素标记表格的尾部。
5.

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML表格</title>
    <meta name="description" content="HTML表格知识讲解">
    <meta name="keywords" content="HTML,表格, Table">
    <style type="text/css">
    table {
        border-collapse: collapse;
    }

    caption {
        font-weight: bold;
        margin-bottom: .5em;
    }

    th,
    td {
        padding: .5em .75em;
        border: 1px solid #000;
    }

    tfoot {
        font-weight: bold;
    }
    </style>
</head>
<body>
    <table border="1" style="margin:auto" width="400">
        <caption>日常消费账单</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th align="left" scope="col">消费项目</th>
                <th align="right" scope="col">一月</th>
                <th align="right" scope="col">二月</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
            <th align="left" scope="row">食品烟酒</th>
                <td align="right">￥1241.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">衣物</th>
                <td align="right">￥330.00</td>
                <td align="right">￥594.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">居住</th>
                <td align="right">￥2100</td>
                <td align="right">￥2100</td>
            </tr>
            <tr>
                <th align="left" scope="row">生活用品及服务</th>
                <td align="right">￥700.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">医疗保健</th>
                <td align="right">￥150.00</td>
                <td align="right">￥50.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">教育、文化和娱乐</th>
                <td align="right">￥1030.00</td>
                <td align="right">￥1250.00</td>
                </tr>
            <tr>
                <th align="left" scope="row">交通和通信</th>
                <td align="right">￥230.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">其他用品和服务</th>
                <td align="right">￥130.40</td>
                <td align="right">￥150.00</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th align="left" scope="row">总计</th>
                <th align="right">￥5911</th>
                <th align="right">￥6694</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>
尾迹双冒号
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
X-Cart Gold 4.5.4.zip
05-27
2012年10月08日，AIM - 问题（0126812）：从右到左的文本方向的选项在管理领域的“编辑语言”一节中没有正常工作。固定的。 *表现* [*]} - 改进（0127301）：2012年10月23号，优化模块代码的Special_Offers。 [*]...
html写脚本语言,HTML与脚本语言.ppt
weixin_29817863的博客
05-30 247
HTML语言 HTML语言 HTML语言是Web页面的基础，开发的Web页面最终要转换为HTML语言显示在客户端的浏览器上。 Script语言是可以运行的脚本语言，可以弥补HTML语言不够灵活的缺点，使得页面更加丰富多彩，功能强大。 第1章 HTML基础 1.1 基本标记 1. HTML标记概述 1. HTML标记概述 ...
c 网页自动化脚本语言,自动化脚本－TCL语言使用以及个人体会
weixin_30663789的博客
05-19 601
在我还没正规接触过自动化相关的测试时,一直没有使用过脚本语言,都是偏C和C++较多,当我在第一个项目接触了TCL之后,发现这个脚本语言虽然不是太多人用,但是非常实用而且很方便.(由于刚开博，所以东西比较少，后续发技术相关的会更细节些)个人总结我工作中实用脚本语言处理的几个任务:处理文本,I/O输入输出,正则表达式,数据匹配,和内嵌html网页语言.第一个处理文本是tcl的强项,他能够通过seek关...
脚本语言与html语言的联系与区别,编程，标记和脚本语言三者有什么区别？
weixin_32234493的博客
05-31 612
编程，标记和脚本语言三者有什么区别？不同的语言用于不同的目的。由于那里有很多语言。因此，您必须确定适合您的细分市场的语言类型。对于创建Android和iOS应用或制作精美的Web模板等任务，编码人员使用多种语言。这些语言用于告诉系统它需要执行什么以及如何完成。类似地，存在三种类型的语言，例如编程语言(C++，VisualBasic，Java，C＃)，标记语言(HTML，XML，CSS)和脚本语言(...
HTML-CSS-详解资源
07-25
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 ...
其他类别网页中文本框自校验的标签-input.rar
04-28
这个资料包中的源码，主要是通过使用HTML的输入标签（input tag），结合JavaScript脚本语言，来实现文本框的自我校验功能。具体来说，它包含了多种类型的输入标签，如文本输入、密码输入、邮件输入等，每种类型的...
PT80-NEAT开发指南v1.1
06-24
V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册........................................................................................................................................ 1 简介 ......
【SpringBootWeb】-Web请求响应详解
07-25
前台负责与用户的交互显示数据，用到HTML标签布局页面,CSS样式渲染页面,JavaScript脚本(或AJAX、JQuery、Extjs)编写动态交互性强的页面；后台编写处理一些复杂业务逻辑的程序.可以用C#,JAVA,PHP等语言
nuxt3使用记录六：禁用莫名其妙的Tailwind CSS(html文件大大减小)
lsjweiyi的博客
04-29 383
平时没注意看，这时候看，猜测是nuxt的默认配置就会加载这玩意，关键我想不明白一个css，为啥要默认加载呢？下面那个style，也不是我写的，我试着删掉，发现对项目也没影响，而且也是每个html文件都有。看到是跳过了这玩意，所以nuxt3这玩意，还有很多可以琢磨的地方，50k star的成熟项目也有不成熟的地方嘛。然后我记得在官网看过它，去搜索，果然，这些nuxt自带的一个样式，不过没说为啥要引用他。发现这个问题是因为，今天我突然很好奇，我发现之前构建的自动产生的。我全局搜索我的项目，都没有引用这玩意！
【HTML】实现 pre 标签内容超出自动换行
qq_45677671的博客
04-28 325
实现 pre 标签内容超出自动换行
html如何实现按钮跳转，以及访问随机跳转
weixin_42759398的博客
04-29 351
html如何实现按钮跳转，以及访问随机跳转。需求看似很冷门，实际上这个对应我上一篇文章。
【笔记】Python3｜2024年 PDF 转 XML 或 HTML 的第三方库的使用方式、测评过程以及对比结果（汇总）
qq_46106285的博客
04-30 1447
目的是对比一下常用的 PDF 转 HTML/XML 的工具。 整个对比过程放在了 Github 仓库中， 欢迎提交 PR/Issue 补充更多工具：https://github.com/shandianchengzi/PDF2HTML_Samples。
关于HTML
2302_80283616的博客
04-28 1037
1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。1.网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)2.网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
vue页面中怎么显示多个空格-从普通空格到非断行空格与v-html的使用
qq_42816270的博客
04-27 543
v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。产生的原因是因为在浏览器进行解析的时候， 会将多个空格合并成分成一个空格。可能跟使用vue2有关吧，上述的演示的代码使用的是vue3。
基于php+mysql+html图书管理系统（含实训报告）
最新发布
Timi2019的博客
05-02 547
图书管理系统可实现账号的登录、退出、信息修改、挂失等功能，以及对图书的借阅、归还、逾期统计等。该系统主要针对对读者的借阅和图书馆的书籍管理。以达到管理员对图书的信息及读者借阅情况管理。通过该软件的操作练习，可以实时了解读者的个人信息以及图书的借阅信息，对读者的借阅情况进行管理和预览。系统的具体功能需求概述如下：1.账号管理：可以增加读者的信息，包括读者的各项个人信息，也可以编辑与删除各读者的信息，也可通过搜索关键字搜索读者的全部信息。
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
徊忆羽菲
04-28 976
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
前端科举八股文-HTML篇
星海拾遗
04-23 1613
http 是超文本传输协议,它是一个浏览器和服务器之间必须遵守的一个标准. 它是一个无状态的应用层协议所谓的无状态就是协议对于事物处理没有缓存, 在一次请求和返回数据的过程中不会缓存任何信息. 也就是说对于第二次请求获取同样的数据也需要重新发起请求,重新获取数据.由于js是单线程的特性，在执行一些高开销或者搞延迟的任务时容易造成页面渲染阻塞，webworker是一种独立于主线程的之外的独立运行js线程。可以单独去执行一些高开销的任务然后将结果传回主线程。
gbk-euc-h.bcmap html
06-22
而HTML则是一种用来制作网页的标准化语言，可以通过不同的标签和属性实现文字、图像、链接、样式、脚本等各种元素的布局和交互效果。在使用HTML制作网页时，需要使用各种编码来表示不同的文字和符号，而gbk-euc-h....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尾迹双冒号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值