HTML基础

最新推荐文章于 2024-07-28 20:59:34 发布

走在美的光辉中

最新推荐文章于 2024-07-28 20:59:34 发布

阅读量209

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44465012/article/details/117660308

版权

提示：中国慕课国家精品课《web前端开发》学习笔记

文章目录

一、HTML概述

二、HTML文件结构(结构字符和编码)

二、HTML标签

一、HTML概述

HTML是“超文本标记语言”，制作网页的标准语言。HTML不区分大小写；
标签通常是成对出现的，由尖括号包围，也会有如img单独出现的标签，如下图：

标签之间的关系：

HTML标签+内容=元素；子元素可以继续嵌套其他标签；标签的嵌套关系可以用HTML DOM树表示，如图：

属性：用属性来描述

二、HTML文件结构(结构字符和编码)

文件保存后缀应为.html 或 .htm。<html></html>包含的内容表示由Html的语法规范来规定。

Html编辑器：记事本，Sublime Text3 Emmett插件，WebStorm,VScode, Eclipse IDE；

字符（Character）：文字和符号；字符集(Charset)：字符的集合，比如：英文字符集，汉字字符集，日文汉字字符集。
编码：将字符和二进制对应起来；电脑只认识二进制码；编码方式：

二、HTML标签

标题：<h1>一级标题</h1>（从1-6字体大小越来越小)
段落：<p>段落内容</p>（段落内部文字忽略连续空格只显示一个，也不会现实空行，且不会换行）
段内换行：<br/> （单标签）
空格字符：&nbsp；
行内组合：<span><span/> （方便Css对部分标出的内容进行格式化）
预留格式： <pre></pre>（保留原格式）
水平线：<hr/>
注释标签：（代码功能进行说明，增加可读性）
超连接标签：<a href=" "> 内容 </a>
插入图像img：<img src="../logo.gif（相比绝对路径，推荐相对路径）" alt="图片的替换文本">（JPG：有损压缩，色彩丰富图片；GIF：简单动画，背景透明；PNG：无损压缩，透明，交错，动画）

区域标签:<div></div
无序列表:<ul> <li>（列表项）有序李列表：<ol> < li> （快捷方式：ul>li*3）
表格：table tr td（快捷方式：table>tr*2>td*3）表头单元格 <th>有加粗的功效。

练习1：实现如图，代码如下:

 <table border="1px">
         <tr>
             <th></th>
             <th>学生数</th>
             <th>平均成绩</th>
         </tr>
         <tr>
             <th>一班</th>
             <td>30</td>
             <td>89</td>
         </tr>
         <tr>
             <th>二班</th>
             <td>35</td>
             <td>85</td>
         </tr>
         <tr>
             <td>三班</td>
             <td>32</td>
             <td>80</td>
         </tr>
     </table>