翻译翻译什么叫HTML5（一）Hello World

你甚至不愿叫我一声掌门人

已于 2022-03-16 19:23:27 修改

阅读量665

点赞数 6

分类专栏：翻译翻译什么叫HTML5 文章标签： html5 前端 html

于 2022-02-27 15:18:51 首次发布

本文链接： https://blog.csdn.net/weixin_51349056/article/details/123164583

版权

翻译翻译什么叫HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5，一个神秘的纯文本文件，是web客户端（前端）的专业技术。当一个神秘的东方男性只用了55分13秒把一大堆我啥也记不住的东西灌进我脑子里（提壶灌顶了属于是），我就知道我需要为我自己写一个这样的web log，作为我日益稀少头发的墓志铭qwq，废话不说了，哥几个走着！

一、先来物理翻译一下什么是HTML

1.学名：规范的结构化纯文本文档，这种语言不同于之前学过的c和Python，而是一种超文本标记语言，全拼是HyperText Markup Language 5（考这个就离谱！）

2.纯文本：意味着以字符为单位

结构化：不同字符作用不同

规范化：这个技术的技术标准由Web技术领域最具权威和影响力的国际中立性技术标准机构（这头衔真滴长）——W3C制定，很好的保证了Web技术的兼容性。

3.组成：HTML（结构）+CSS（外观）+JavaScript（行为）（三位一体了属于是）

二、故事要从这里开始说起

1.元素——愿风神忽悠你

（1）元素

正如提瓦特大陆是由七位代表着不同元素的神共同执掌，html5的世界也是由元素组成的。例如：

从此，我和<code>凝光</code>过上了幸福的生活。

这里加粗的部分就是元素，<code>是开始标签，</code>是结束标签，“凝光”是内容，这三部分一起构成了我老婆（✖）code元素（✔），元素名（标签中的英文）不区分大小写（但谁没事闲的切成大写呀！）。

下面附上常见的元素名：

（2）空元素

当然有的时候元素中间是可以没有内容的，例如某些孤寡了20年的同学会突然发现自己没有老婆，这时候在这两个标签之间就可以不加内容<code> </code>（尽管人家没有老婆，你不能不让人家幻想一下呀），并且这种空元素可以缩写为<code/>。虽然有些元素为空时没有意义，但它也是有效的HTML代码。

（3）虚元素

众所周知，空虚空虚，有空必有虚。有些元素只能用一个标签标示（就像有些同学励志要当一个孤独的有钱的老太婆一样），这就是虚元素。例如<th>、<tr>、<td>、<hr>

2.元素属性——你算个什么东西呀?!

（1）元素属性

就像咱们喜欢穿各式各样的衣服（以及给老婆买各种各样的衣服~），元素也是有尊严的，也是要有“衣服”穿的（谁喜欢天天顶着个原皮呀！），这就是元素属性。

例如：

我还是很喜欢你，像<a id=”妖刀姬”>你</a>四十米的大刀，“乖乖站好！”

(2)属性有如下几个特点：

①属性只能用在开始标签或单个标签（“空虚”元素）上，不能用于结束标签。属性包括两部分，属性名（id）和属性值（“妖刀姬”）

②属性值外面挂双引号（“”）和单引号（‘’）都可以，但如果属性值本身有引号，那么两种引号都要用到（例如“我是‘单引号’~”和‘我是“双引号”~’）

③就像你不止一件衣服一样，元素也可以不止一种属性，不同属性用一个或者几个空格分开就可以，属性之间顺序无要求，随意排列就好，例如：

这是<a class=”女朋友” id=”妖刀姬” href=”妖刀姬（《永劫无间》中的人物）_百度百科 (baidu.com)" >拙荆</a>

④布尔属性

这种属性有两种，true或者disable，类似于c中1和0，java中true和false，不用赋值（如果你偏要赋值，请赋值为空字符串或者属性名称字符串），例如：

你学废了吗：<input disabled> //这里表示文本框虽然存在但你无法输入，以下两种同义

你学废了吗：<input disabled=“”>

你学废了吗：<input disabled=“disabled”>

你学废了吗：<input disabled=“true”>//这里表示文本框存在且可以输入

⑤自定义属性

用户可以自定义属性，但是必须要以data-开头。例如：

请输入你的尊姓大名：<input disabled=“true” data-creator=”lordlinan” data-purpose=”remember”>

三、欢迎来到html，敌军还有5秒钟到达战场，碾碎他们！

现在我们已经通过了新手教程，该来到html峡谷大展身手了！就像想要在王者峡谷畅游需要知道英雄、装备、兵线等，我们需要知道一些基础知识。

1.结构：

<!--html文件基本结构-->
<!DOCTYPE html> <!--告诉浏览器是html文件，快捷打开html文件的方式Alt+B-->
<html>
    <head> <!--头信息，写给浏览器看的，内部含有元数据（向浏览器提供信息）-->
        <meta charset = "utf-8"> <!--确保多语言网页不会出现乱码，这个要与右下角的编码保持一致-->
        <title>structure example</title> <!--网页的具体标题-->
    </head> <!--头信息结束-->

    <body> <!--打开浏览器用户能看到的部分，写给人看的-->
        <h1>一级标题</h1> <!--h1表示这在网页上将会显示为一个一级标题-->
        <h2>二级标题</h2> <!--h2表示这在网页上将会显示为一个二级标题，可以以此类推h3三级标题……-->

        <a href="http://www.bnu.edu.cn">当前窗口打开BNU </a> <!--a能生成超连接的元素-->
        <a href="http://www.bnu.edu.cn" target="_blank"> 新窗口打开BNU</a> <!--a能生成超连接的元素-->
        <!--html组成
            元素 element
            标签 tag： a<a>（开始标签）  ...（内容）</a>结束标签
            内容 content： BNU---浏览器用户能看到点击的
            属性 attribute href="http://www.bnu.edu.cn"  语法：属性名="属性值" 多个属性用空格分开
            （href属性值连接地址，target="_blank"如果没有设，则是在当前窗口打开，如果设置了，可以在新窗口打开）
        -->
    </body>
</html>

2.元素关系：

<!--元素关系-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>relation_example</title>
    </head>
    <body>
        <div>爸爸
            <p>儿子1</p> <!--p指一个新的段落，嵌套在div中-->
            <p>儿子2</p>
            <p>儿子3
                <span>孙子</span>
            </p>
        </div>
        <!--
            元素关系：
            1.父子关系（祖先后代，类似于数据结构中的树）：
            （1）子元素：直接子女，直系亲属，儿子之于爸爸，孙子之于儿子 span for p
            （2）后代元素：所有后代 儿子孙子都算爸爸的后代元素 span for div、span for p
            2.兄弟关系：具有同一个父元素的几个元素
            tip：元素与元素之间可以包含、嵌套，但是不能交叉
        -->
        <!--
        <div>分段</div>
        <span>不分段</span>
        -->
    </body>
</html>

3.常见通用属性：

<!--通用属性-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <!--title属性-->
        <title>common_example</title>
        
        <!--class在css中的应用-->
        <style type="text/css">
            a.class2 {
                background-color: gray;
                color: white;
                padding: 5px;  
                margin: 2px;
            } 
            a.class1 {
                font-size: x-large;
            }   
        </style> <!--px是指像素长度，是相对长度，具体请看后面写的相对长度部分-->

        <!--hidden属性例子相对应的script语句-->
        <script>
            var toggleHidden = function(){
                var elem = document.getElementById("toggle");
                if(elem.hasAttribute("hidden")){
                elem.removeAttribute("hidden");
            }else{
                elem.setAttribute("hidden","hidden");
            }
            }
        </script>
        <!--代码解读：
            body中的含有一个table元素，table元素中最下面的tr元素设置了hidden属性
            head中的script设置了toggleHidden函数，按下“点我试试看”按钮就会触发该函数
            这个函数的作用是如果设置有hidden属性的tr元素存在就将其删除，如果不存在就把它加上
        -->
    </head>
    <body>
        <!--id属性-->
        <h1 id="h11">heading_id</h1> <!--id:可以理解为变量名，在编程中常用到，便于改变其内容或外观-->
        
        <!--class属性-->
        <a class="class1 class2" href="http://liferestart.syaro.io/public/index.html">人间不值的~</h1><!--class:与css相关，类似于word中的样式-->
        <p></p>
        <a class="class2 otherclass" href="https://www.bilibili.com/video/BV1ws411q7ry?spm_id_from=333.999.0.0">嗑！都可以嗑！</a>

        <!--style属性-->
        <h2 style="color: blue;text-decoration: underline;">学废了吗</h2> <!--style:其中可以直接写css代码-->

        <!--accesskey属性-->
        <form>
            Name:<input type="text" name="name" accesskey="n"/>
            <p></p>
            Password:<input type="password" name="password" accesskey="p"/>
            <p></p>
            <input type="submit" value="Log In" accesskey="s"/>
        </form>
        <!--增加快捷键快速选中
            Alt+n——Name
            Alt+p——Password
            Alt+s——submit
        -->

        <!--contenteditable属性-->
        <p contenteditable="true">点我试试，你可以修改我哦~</p>

        <!--dir属性-->
        <p dir="ltr">我是向左对齐的！</p>
        <p dir="rtr">我是向右对齐的！</p>

        <!--hidden属性-->
        <button onclick="toggleHidden()">点我试试看</button>
        <table>
            <tr>
                <th>课上请勿对对子</th>
            </tr>
            <tr>
                <td>隆冬小桌塞北四两二，口中也无妨，替吾父从军。</td>
            </tr>
            <tr id="toggle" hidden>
                <td>新春大战越南3比1，脸都不要啦，rnm退钱。</td>
            </tr>
        </table>

        <!--title属性-->
        <a title="此时，一把利刃贯穿了你的心脏~" href="https://www.bilibili.com/video/BV1kU4y177hK?spm_id_from=333.999.0.0">打泥泥封神之作！</a>
        <br>

        <!--spellcheck属性+lang属性-->
        <textarea  lang="en" spellcheck="true">I am the most hansome person I have ever seen!</textarea>
        <!--可能需要点击一下那个拼错的单词才会显示出来效果~-->


        <!--常见通用属性（有补充）
            (1)id属性用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或者在JavaScript程序中用来选择元素
                   【plus:id与name的区别】
                   ｛1.id相当于每个人的身份证，没有相同的id
                       name相当于每个人的名字，允许重名
                     2.name属性一般只有在表单的时候采用
                       其它时候一般都是类选择器和id选择器
                     3.具体区别可以参考大佬web log：
                     https://blog.csdn.net/fw0124/article/details/49886121?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164592309016780366561417%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164592309016780366561417&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-49886121.pc_search_result_control_group&utm_term=id%E4%B8%8Ename%E5%8C%BA%E5%88%AB&spm=1018.2226.3001.4187
                   ｝
            (2)class属性用来将元素归类。这样的目的是为了能够找出文档中的某一类元素或为某一类元素应用css样式
                 一个元素可以被归入多个类别，并且class既可以在css中使用也可以在Script中使用（这个等学到Script再给例子）
                 类名可以随便取，但最好有点实际含义
            (3)style属性直接用来在元素身上定义css样式（这是在style元素或者外部样式表中定义样式之外的另一种选择）    
            (4)accesskey属性可以自主设定一个或几个用来选择页面上元素的快捷键
            (5)contenteditable属性允许用户修改页面上的内容(true)
            (6)dir属性用来规定元素中文字方向，ltr向左对齐，rtl向右对齐
            (7)hidden属性！我个人很喜欢的一个属性，感觉雀食蟀~
               这是个布尔属性，可以帮助我们隐藏一些元素，看例子要看前面head中有一部分script代码
            (8)title属性:提供元素信息，有两个用处：
               如果用在head中，则变为浏览器标题
               如果用在body中，把鼠标放上去会有说明文字出现
            (9)lang属性用于说明元素内容使用的语言：英文en 中文zh
            (10)spellcheck属性用来表明浏览器是否该对元素内容进行拼写检查，只有放在可编辑元素上才有意义~
                最好同时设置lang属性，这样能精准报错
        -->
    </body>
</html>

4.常用元素：

<!--常用元素介绍-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>element——example</title>

        <!--style:与布局相关，内部写css代码-->
        <style>
            p{
                text-indent: 2em;
                line-height: 1.5em;
            }
            
        </style>
        <!--
        text-indent首行缩进
        line-height行高
        -->

        <!--script:写js代码,如果想看运行，需要在F12，打开console中看到，将来以后用作调试-->
        <script>
            for(var i=0;i<10;i++){
                console.log("this is line ",i);
            }
        </script>

    </head>
    <body>
        <!--可以实现在html中写word的元素-->
        <h1>一级标题——讲段落（h1 h2…… p ）</h1> <!--一级标题，有另起一行作用，开启新的段落-->
        <p>苍山负雪，明烛天南</p> <!--段落元素，有另起一行作用-->
        <p>愿君多采撷，此物最相思</p> 
        
        <h2>二级标题——讲换行、分割线、强调(br hr b i em strong)</h2> <!--二级标题，有另起一行作用，开启新的段落-->
        <p>雨中百鬼夜行
            <br> <!--可以实现换行作用，有几个br就换几行，不算开启新的段落-->
            <br>
            <br>
            可有的<b>人</b>比<i>鬼</i> <em>笑的</em>还<strong>畅快</strong>……
            <!--强调文字的方法
                <b><strong>--加粗
                <i><em>--斜体
            -->
            <hr> <!--分割线，可以用来分割文本，有另起一行的作用，开启新的段落-->
        </p>

        <h3>三级标题——讲表格(th tr td)</h3> <!--三级标题，有另起一行作用，开启新的段落-->
        <table border="1"> 
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
            <tr>
                <td>1</td>
                <td>小约翰可汗</td>
                <td>60</td>
            </tr>
            <tr>
                <td>2</td>
                <td>打泥泥</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>法外狂徒张三</td>
                <td>100</td>
            </tr>
        </table>
        <!--
         table表格
         元素：
         tr = row 表格中的一行
         td = cell 表格中的单元格
         th = heading 表格中首行（表格头）的单元格，会使字体加粗
         属性：
         border="1" 可以显示网格线，如果没有则无法显示网格
        -->

        <h4>四级标题——讲声音、视频、图片(img audio video)</h4> <!--四级标题，有另起一行作用，开启新的段落-->
        <!--注意事项:
            图片、声音、视频等都是外部文件，需要在code文件同级下建立对应文件夹，再将对应文件导入
            默认在同一行，如果想在不同行的话，可以使用<br>和<hr>进行分行        
        -->
        <!--添加图片-->
        <img src="./img/jie_1.jpg" width="1000"> 
        <hr>
        <!--
            属性：
            width="1000"用于调节照片大小，设置宽度即可，高度会自动调整
            src是指向图片文件的路径
            tip:
            如果想要播放其上级目录（文件夹）的文件，则scr的值应该为："../a.mp3"
        -->

        <!--添加声音,如果没有controls属性无法显示播放器-->
        <audio controls>
             <source src="./au/The Future is Here.mp3">
        </audio>
        <hr>

        <!--添加视频-->
        <video controls>
            <source src="./vi/“他们因爱而不朽”.mp4">
       </video>
       <hr>

        
        <h5>五级标题——讲编程与布局(div span style script)</h5> <!--五级标题，有另起一行作用，开启新的段落-->
        <!--用于布局，css,javascript
        <div>分段</div>
        <span>不分段</span>
        -->
        <p>阿巴阿巴阿巴<div style="color: tomato;">阿巴</div>阿巴阿巴阿巴阿巴阿巴<span style="color: blue;">阿巴阿巴</span>阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴</p>
        <hr>

        <!--首行缩进，与head里面的style相关-->
        <p>青春不是年华，而是心境；青春不是桃面、丹唇、柔膝，而是深沉的意志、恢宏的想像、炽热的感情；青春是生命的深泉涌流。</p>
        <p>青春气贯长虹，勇锐盖过怯弱，进取压倒苟安。如此锐气，二十后生有之，六旬男子则更多见。年岁有加，并非垂老；理想丢弃，方堕暮年。</p>
        <p>岁月悠悠，衰微只及肌肤；热忱抛却，颓唐必致灵魂。忧烦、惶恐、丧失自信，定使心灵扭曲，意气如灰。</p>
        <p>无论年届花甲，抑或二八芳龄，心中皆有生命之欢乐，奇迹之诱惑，孩童般天真久盛不衰。</p>
        <p>人的心灵应如浩淼翰海，只有不断接纳美好、希望、欢乐、勇气和力量的百川，才能青春永驻、风华长存。</p>
        <p>一旦心海枯竭，锐气便被冰雪覆盖，玩世不恭、自暴自弃由然而生，即便年方二十，实已垂垂老矣；然则只要虚怀若谷，让喜悦、达观、仁爱充盈其间，你就有望在八十高龄告别尘寰时仍觉年轻。</p>
        <hr>
        <!--保留格式-->
        <pre><!--pre format-->
             *****       *****        
            *     *    *      *       
           *       *  *        *      
          *         **          *     
           *                    *     
            *                 *       
             *               *        
               *           *          
                 *       *            
                   *   *              
                    * *
                     * 
        </pre>
        <hr>

        <!--利用表格方式进行布局-->
        <table>
            <tr>
                <td><p>我的眼睛是一部相机，它像素不高也没有滤镜，我一生用它收集了太多的风景，到了最后我才发现，原来记忆就是我的滤镜</p>
                </td>
                <td>
                    <img src="./img/photograph.jfif" width="300"> 
                </td>
            </tr>
        </table>
        
        <h6>六级标题——讲列表、序号、实体</h6> <!--六级标题，有另起一行作用，开启新的段落-->
        <!--
            ul - unordered list 无序列表，默认为实心黑点
                 消除黑点：在style中加入li { list-style:none; }
                 圆圈：list-style:circle；
                 方块：list-style:square
            ol - ordered list   有序列表
            li - list item      列表元素
        -->
        <ol>
            <li>黄药师</li>
            <li>欧阳锋</li>
            <li>一灯大师</li>
            <li>洪七公</li>
        </ol>

        <ul>
            <li>邓百川</li>
            <li>公冶乾</li>
            <li>包不同</li>
            <li>风波恶</li>
        </ul>

        <!--
            entity 实体 语法： &...; 
        -->
        <p>显示小于号&lt;</p>
        <p>显示大于号&gt;</p>
        <p>显示版权符号&copy;lordlin</p>
        <p>不&nbsp;间&nbsp;&nbsp;断&nbsp;&nbsp;&nbsp;空格</p>
        <hr>
        
        
    </body>
</html>