HTML基本知识总结

可能是一只知更鸟

已于 2022-03-11 16:30:03 修改

阅读量329

点赞数 1

分类专栏：网络编程文章标签： html 前端

于 2022-03-11 16:13:31 首次发布

本文链接：https://blog.csdn.net/fxt579810/article/details/123411744

版权

网络编程专栏收录该内容

9 篇文章 2 订阅

订阅专栏

文章目录

前言

在了解HTML之前，常接触的java语言主要用于后端服务器的开发。刚开始学的时候，老是听别人说HTML+CSS+JavaScript前端三大件，于是就了解了解。在前端开发领域中，还有个web assembly 中间语言，可以把其他的各种高级语言都编译转化成这种中间语言，方便开发，是挺神奇的。
目前主流的开发前端网页方案，主要是HTML(骨)，CSS(皮)，JavaScript(魂)。但是还有其他的一些前端语言出现，如：
①微软：TypeScript(国内很多企业都有应用)
②谷歌：Dart + Flutter (阿里/闲鱼)
Never too Old to Learn is an idiom！活到老，学到老吧~

HTML基本结构

<!-- HTML 代码是由 "标签" 构成的-->
<body id="myId">hello</body>

①标签名 (body) 放到 < > 中大部分标签成对出现.
② 为开始标签, 为结束标签.
③少数标签只有开始标签, 称为 “单标签”.
④开始标签和结束标签之间, 写的是标签的内容(hello)。也可能会带有 “属性”， id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
注：同一个html里面不能有两个id相同的标签。
标签之间的结构关系，构成了一个DOM树。DOM : Document Object Mode(文件对象模型)
在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架。

<!-- HTML文件基本结构-->
<html>
	<head>
		<title>第一个页面</title>
	</head>
	<body>
		hello world
	</body>
</html>

常见HTML标签

注释：“< !-- 我是注释 -->”
标题：从 h1 - h6. 数字越大, 则字体越小
段落：p
换行：br (是一个单标签)，规范写法：<br/ >
格式化：加粗: strong 标签和 b 标签，倾斜: em 标签和 i 标签，删除线: del 标签和 s 标签，下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

图片：img标签必须带有 src 属性. 表示图片的路径。alt: 替换文本。title: 提示文本. 鼠标放到图片上, 就会有提示。

<!--属性之间不分先后顺序，用空格分隔，src可以是本地路径，也可以是网络路径，看图片目录和html目录的相对关系-->
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">

超链接：a <a href="http://www.baidu.com">百度</a>
表格：
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td 或者 th
列表：
①无序列表[重要] ul li
②有序列表[用的不多] ol li
③自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的
表单：
input标签：何种输入控件，单行文本框、按钮、单选框、复选框。

文本框
<input type="text">
密码框
<input type="password">
单选框
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
复选框
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏
选择文件
<input type="file">
textarea标签
<textarea rows="3" cols="50"></textarea>

无语义：div 是独占一行的，span表示一行里面的每一列元素！

HTML特殊字符

有些特殊的字符在 html 文件中是不能直接表示的, 例如:
空格:  
小于号: <
大于号: >
按位与: &

两个小案例

1.展示简历信息

复制代码到IDEA中试一下效果吧


<h1>某某某</h1>
<!-- 基本信息 -->
<div>
    <h2>基本信息</h2>
    <img src="image/profile.jpg">
    <p><span>求职意向：</span>Java 开发工程师</p>
    <p><span>联系电话：</span>XXX-XXX-XXXX</p>
    <p><span>邮箱：</span>xxx@foxmail.com</p>
    <p><a href="https://github.com">我的 github</a></p>
    <p><a href="https://csdn.com">我的 博客</a></p>
</div>
<!-- 教育背景 -->
<div>
    <h2>教育背景</h2>
    <ol>
        <li>1990 - 1996 小葵花幼儿园 幼儿园</li>
        <li>1996 - 2002 小葵花小学 小学</li>
        <li>2002 - 2005 小葵花中学 初中</li>
        <li>2005 - 2008 小葵花中学 高中</li>
        <li>2008 - 2012 小葵花大学 计算机专业 本科</li>
    </ol>
</div>
<!-- 专业技能 -->
<div>
    <h2>专业技能</h2>
    <ul>
        <li>Java 基础语法扎实，已经刷了 800 道 Leetcode 题；</li>
        <li>常见数据结构都可以独立实现并熟练应用；</li>
        <li>熟知计算机网络理论，并且可以独立排查常见问题；</li>
        <li>掌握 Web 开发能力，并且独立开发了学校的留言墙功能。</li>
    </ul>
</div>
<!-- 项目 -->
<div>
    <h2>我的项目</h2>综合案例: 填写简历信息
    <ol>
        <li>
            <h3>留言墙</h3>
            <p>开发时间：2008年9月 到 2008年12月</p>
            <p>功能介绍：
            <ul>
                <li>支持留言发布</li>
                <li>支持匿名留言</li>
            </ul>
            </p>
        </li>
        <li>
            <h3>学习小助手</h3>
            <p>开发时间：2008年9月 到 2008年12月</p>
            <p>功能介绍：
            <ul>
                <li>支持错题检索</li>
                <li>支持同学探讨</li>
            </ul>
            </p>
        </li>
    </ol>
</div>
<!-- 其他信息 -->
<div>
    <h2>个人评价</h2>
    <p>在校期间，学习成绩优良，多次获得奖学金。</p>
</div>

2.填写简历信息

<table width="500px" cellspacing="0">
    <thead>
    <h3>请填写简历信息</h3>
    </thead>
    <tbody>
    <tr>
        <td>
            <label for="name">姓名</label>
        </td>
        <td>
            <input type="text" id="name">
        </td>
    </tr><tr>
        <td>
            性别
        </td>
        <td>
            <input type="radio" name="sex" id="male" checked="checked">
            <!-- img 要放到 label 内部, 保证点击图标也能选中单选框 -->
            <!-- 还需要把 width 加上, 否则图片太大了 -->
            <label for="male"><img src="./image/男.png" alt="" width="20px">
                男</label>
            <input type="radio" name="sex" id="female">
            <label for="female"><img src="./image/女.png" alt=""
                                     width="20px">女</label>
        </td>
    </tr>
    <tr>
        <td>
            出生日期
        </td>
        <td>
            <select>
                <option>--请选择年份--</option>
                <option>1998</option>
                <option>1999</option>
                <option>2000</option>
                <option>2001</option>
            </select>
            <select>
                <option>--请选择月份--</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
                <option value="">6</option>
                <option value="">7</option>
                <option value="">8</option>
                <option value="">9</option>
                <option value="">10</option>
                <option value="">11</option>
                <option value="">12</option>
            </select>
            <select>
                <option>--请选择日期--</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
                <option value="">6</option>
                <option value="">7</option>
                <option value="">8</option>
                <option value="">9</option>
                <option value="">10</option>
                <option value="">11</option>
                <option value="">12</option>
                <option value="">13</option>
                <option value="">14</option><option value="">15</option>
                <option value="">16</option>
                <option value="">17</option>
                <option value="">18</option>
                <option value="">19</option>
                <option value="">20</option>
                <option value="">21</option>
                <option value="">22</option>
                <option value="">23</option>
                <option value="">24</option>
                <option value="">25</option>
                <option value="">26</option>
                <option value="">27</option>
                <option value="">28</option>
                <option value="">29</option>
                <option value="">30</option>
                <option value="">31</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            就读学校
        </td>
        <td>
            <input type="text">
        </td>
    </tr>
    <tr>
        <td>
            应聘岗位
        </td>
        <td>
            <input type="checkbox" id="frontend">
            <label for="frontend">前端开发</label>
            <input type="checkbox" id="backend">
            <label for="backend">后端开发</label>
            <input type="checkbox" id="qa">
            <label for="qa">测试开发</label>
            <input type="checkbox" id="op">
            <label for="op">运维开发</label>
        </td>
    </tr>
    <tr>
        <td>
            掌握的技能
        </td>
        <td>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </td>
    </tr>
    <tr>
        <td>
            项目经历
        </td>
        <td>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </td>Emmet 快捷键
        快速输入标签
        快速输入多个标签
        标签带id
        标签带类名
        标签带子元素
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="checkbox" id="lisence">
            <label for="lisence">我已仔细阅读过公司的招聘要求</label>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <a href="#">查看我的状态</a>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <h3>请应聘者确认: </h3>
            <ul>
                <li>以上信息真实有效</li>
                <li>能够尽早去公司实习</li>
                <li>能接受公司的加班文化</li>
            </ul>
        </td>
    </tr>
    </tbody>
</table>

可能是一只知更鸟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基本知识总结

碎语在了解HTML之前，常接触的java语言主要用于后端服务器的开发。刚开始学的时候，老是听别人说HTML+CSS+JavaScript前端三大件，于是就了解了解。在前端开发领域中，还有个web assembly 中间语言，可以把其他的各种高级语言都编译转化成这种中间语言，方便开发，是挺神奇的。目前主流的开发前端网页方案，主要是HTML(骨)，CSS(皮)，JavaScript(魂)。但是还有其他的一些前端语言出现，如：①微软：TypeScript(国内很多企业都有应用)②谷歌：Dart + Flu
复制链接

扫一扫