HTML精简入门（全栈开发向）

/* 本文仅仅是为建立基本的html概念，介绍标签基本用法，更多内容请浏览w3cschool官网的 html教程*/
/本文末尾有用于展示标签效果的html代码，可以自行复制到vscode里（不知道的自行百度查教程安装下载），建议一遍对照代码一遍对照网页效果来看/

用土话土讲来描述html：
标签：
你看到的html里用<>包裹的东西就是标签。标签定义了你如何组织你的内容，比如

标签，则你写在里面的内容会在浏览器以段落形式呈现，比如

标签，你写的就会变成标题（一般的标签都要闭合， content，但是有的标签不用，比如用于换行的br标签 ） 这是你写的段落

属性：
标签拥有各种属性，这些属性有许多用处，比如用class、id、name等等属性来有效组织你的文档，方便你用css来美化页面，在你用js写脚本时候也离不开这些属性，具体用法看看w3c 教程就能明白。
比如这里就定义了一个type为radio的input输入框标签，type属性=radio决定了这个input输入框是一个单选框；如果type=“password” 那么你的输入框就会把输入的密码隐藏，等等。

DOM：
DOM 文档对象模型，html的各个标签就是由DOM 树来组织的，当你在浏览器中按F12 ，点击element，可以看到一个html文档是以树形结构组织的:
HTML精简入门（全栈开发向）
这种组织方式为REACT 、Vue等框架提供了接口，当你用React 写了一个组件，可以直接在指定位置接入到这个DOM树上。这里可稍微提一下虚拟DOM树，一般来讲，每次DOM树如果有变化的话，浏览器都要重新渲染页面（渲染就是把html文档呈现成你看到的网页的样子），但是有了虚拟DOM树之后，只需要用算法对比DOM树的前后变化，只用在变化的地方重新渲染即可，而不用整个页面重新渲染。这部分内容目前稍作了解即可，也可跳过。

HTML常用标签（尾部有示例代码可以查看效果）

/以下是我个人的学习笔记，比较凌乱，最好移步w3cschool。/
a 标签常放链接 <>
br 换行
h1 - h6表示标题
p表示段落
button
hr水平线
div 、 span 是html区块。html分块级元素（div）和内联元素（span），内联元素不会换行。
li表示列表
img 放图片，可加尺寸属性，width height，alt属性用于显示图片无法加载时显示的文字
属性总是以键值对的形式： name = shenkuo
属性常有class 、 id、 style、 title
注释
可以用#id 来指定链接

head里可以加base标签，来指定链接的默认地址
head里可以加link来链接外部资源，一般连接到css
head里可以加style 指定css样式

meta里除了指定编码还可以指定搜索引擎关键字： meta name = “keywords” content = “我的关键字”

script 用于加载js文件 noscript 在无法加载script时候显示此标签内容
script 可以用document.write(‘

this is what u add

’) 来添加新标签
script function … document.getElementbyid(‘ROOT’).InnoHTML(’'changed content")

表格 table标签包裹 tr （行） td（列）th（表头）caption 设置标题
跨行或者跨列要在属性里使用rowspan或者 colspan
表格间距在table属性里设置cellpadding =10

有序列表用ol 包裹li ，无序列表用ul包裹li

表单使用form标签，里面放置input标签；属性有action、method
form可以action =“mailto : [email protected]” method = “post” enctype=“text/plain” 发送邮件
input 标签可以设置type = password 、 radio （单选框）、 checkbox（复选框）、submit 提交
提交的value属性设置label显示的字
select 包裹option 来选框

iframe 标签规定了内联框架，可以嵌入另一个文档，通过使用框架可以在同一个浏览器窗口中显示不止一个页面。

html字符实体用于替换预留的字符,要使用& 或者&# ，用分号;结尾
html总是会截断空格，如果想保留就要使用空白字符实体 #nbsp;
&#target_number
&lt (less than) &gt（greater than） &times &divide &nbsp
html5 使用音频建议mp3 ，视频建议mp4格式
html 可以使用插件<object width\ height data = “index.html\ gif\png”>
也可以用embed ，embed没有闭合标签，不能使用替代文本
多媒体标签：embed、object、audio、video、source


    <!DOCTYPE html>
<html>
    <head>
    <meta charset=" UTF-8" ><!--这里定义了编码，使得网页可以显示中文，编码相关请自行百度-->
    <!--style标签，定义了 h1 标签的背景色，div标签的颜色，li标签的背景色， 具体css语法请自行百度或查看后续文章-->
    <style type="text/css">        
        h1 {background-color:yellow}        
        div {color:rgb(161, 235, 194)} 
        li {background-color:rgb(71, 118, 248);
        color:rgb(48, 43, 41)}

    </style>
    <title>这是我的标题，写在title标签里</title>
    </head><!---head标签内容完毕-->

    <body>
        <h1>我的第一个标题</h1>
        <h2>副标题</h2>
        <p>我的段落：段落写了10&lt;20</p><!--有些字符比如小于号会和标签冲突，因此要用&lt来表示，这个叫字符实体，具体看w3c-->
        
        <script>
        function myFunction(){alert('fuck!!!')
        document.getElementById('root').innerHTML="changed content"}
        </script>
        <!---以上是script标签，会执行当中的JavaScript代码，学习JavaScript之后可以看懂其中内容-->>

        <p id="root"> 这是个id为root的段落，下面有个按钮，点击按钮可以使这里内容变化</p>
        <button type="button" onclick="myFunction()">点击这个会有弹窗，并使id为root的标签内容改变，具体学习JavaScript后会了解</button>
        <br>
        <a href="www.baidu.com">这个a标签里的链接指向百度</a>
        <br><!----换行符-->>

        <img src="127.0.0.1" width="120" height="80"><!---这里链接一张图片-->
        <br>
        
        
        <table border="1" cellpadding="10"><!---border定义表格边距，cellpadding定义内边距-->
            <caption>my table</caption><!--caption表示标题-->
            <tr><!--tr定义行-->
                <th>name</th><!--th定义首行-->>
                <th>age</th>
                <th>sex</th>
                <th colspan="2">big colo</th><!--colspan 或者rowspan合并表格-->
            </tr>
            <tr>
                <td>shenkuo</td><!--td表示列-->
                <td>21</td>
                <td>male</td>
            </tr>
        </table>
        <ul><!--ul包裹li ，定义无序列表-->
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
        <ol><!--ol包裹li，定义有序列表-->
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>


        <form action="xxx.php" method="GET"><!--form标签定义表单，input 表示用户填写的内容，下面submit 可以提交表单内容给服务器-->
            
            name <input type="text"><br>
            password <input type="password"><br>
            <input type="radio" value="1">BOY
            <input type="radio" value = "0">GIRl
            <br>
            <input type="submit" method = "GET" value="点击提交表单">
        </form>
        
        <!--select标签提供选框-->>
        <select name="time " id="TIME"><option value="a">a</option>
            <option value="b">b</option></select>
        <script>document.write("<p>This is a paragraph</p>")
        </script>
        
        
    </body>
</html>

效果图
HTML精简入门（全栈开发向）

HTML精简入门（全栈开发向）

HTML常用标签（尾部有示例代码可以查看效果）

相关推荐