HTML基础

最新推荐文章于 2022-04-20 19:00:21 发布

Little石头

最新推荐文章于 2022-04-20 19:00:21 发布

阅读量83

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_41712089/article/details/103264563

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

软件架构
C/S 客户端/服务器端
用户本地有客户端程序,远程有服务器端程序负责和客户端程序进行数据交互.
优点：用户体验良好,资源都在本地,只需要进行加载就可以很快捷的进行使用.
缺点：开发/安装/部署/维护相对于B/S比较繁琐.
B/S Browser/Server 浏览器/服务器端
只需要一个浏览器,用户就可以通过不同的网址(URL)来访问不同的服务器端程序.
优点：开发/安装/部署/维护比较简单.
缺点：如果应用过大,用户的体验可能会受到影响.对硬件有一定要求。此处针对于服务器硬件要求
B/S结构详解
静态资源
概述：使用静态网页开发技术发布的资源
特点：所有用户访问,得到的结果是一样的.
文本/图片/音频/视频/HTML/CSS/JavaScript都是静态资源.
如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器.浏览器中内置了静态资源的解析引擎,可以展示静态资源.
动态资源
概述：使用动态网页及时发布的资源
特点：所有用户访问,得到的结果可能不一样.
Jsp/Servlet/Php为动态资源.
如果用户请求的是动态资源,那么服务器会执行动态资源,然后转换为静态资源,再发送给浏览器.
HTML
静态资源的分类
HTML:用于搭建基础网页,展示页面的内容.
CSS:用于美化页面,布局页面.
JavaScript:控制页面的元素,让页面有一些动态的效果,或者提交数据与服务器交互.
HTML的概述
最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言.
超文本：超文本是使用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
标记语言：由标签构成的语言,HTML与XML(C3P0连接池配置文件)都是标记语言.
HTML入门
HTML文件后缀名为.html或者.htm
HTML标签分类：
围堵标签:有开始标签和结束标签,例:
自闭和标签:开始标签和结束标签在一起,例:

HTML标签的嵌套方式：
HTML标签需要正确嵌套,不能你中有我,我中有你.
正确:
错误:
HTML标签中可以定义属性,属性是由键值对构成的,值需要使用引号(单双均可)引起来.
HTML语言不缺分大小写,**建议使用小写.
HTML标签
文件标签：构成HTML的最基本的标签

<!--html标签是html文档的根标签 !DOCTYPE表示该文档是HTML5文档-->
<!DOCTYPE html>
<html lang="en">
<!--head头标签,一般用于指定HTML的一些属性,引入外部的资源(Css/JavaScript)-->
<head>
    <!-- 指定HTML字符集为UTF8,否则会出现乱码的情况 -->
    <meta charset="UTF-8">
    <!--title标题标签,用于指定页面的标题信息-->
    <title>HTML5文件标签</title>
</head>
<!--body体标签,定义HTML文档的主体的标签-->
<body>
</body>
</html>

文本标签：与文本有关系的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_文本标签</title>
</head>
<body>
    <!--h1到h6(标题标签)-->
    <h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>

    <!--hr(分割线标签)-->
    <hr color="red" width="100%" size="3" align="center"/>
    <br>
    <!--font(字体标签)-->
    <font face="consolas" size="5" color="teal">程序员ITHEIMA</font>
    <!--b(粗体标签)-->
    <font face="consolas" size="20" color="teal"><b>初级程序员ITHEIMA</b></font>
    <!--i(斜体标签)-->
    <font face="consolas" size="20" color="teal"><i>高级程序员ITHEIMA</i></font>
</body>
</html>

图片标签：与图片有关的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_图片标签</title>
</head>
<body>
    <!--img(图片标签)-->
    <img src="imgs1.jpg" alt="当图片加载失败,你会看到此条消息.">
</body>
</html>

相对路径：
./或者不写代表当前目录.
…/代表上一级的目录.
列表标签：列表显示的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_列表标签</title>
</head>
<body>
    <!--ol(有序列表) 可以通过type属性显示每一项之前显示的数字格式-->
    <ol type="1">
        <li>唱</li>
        <li>跳</li>
        <li>rap</li>
        <li>篮球</li>
    </ol>

    <!--ul(无序列表) 可以通过type属性显示每一项之前显示的图标格式-->
    <ul type="circle">
        <li>程序员</li>
        <li>初级程序员</li>
        <li>中级程序员</li>
        <li>高级程序员</li>
    </ul>
</body>
</html>

块标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_块标签</title>
</head>
<body>
    <!--span(内联标签) 包裹的信息在一行显示-->
    <span>程序员</span>
    <span>初级程序员</span>

    <!--div(块级标签) 每一个div占满一整行-->
    <div>中级程序员</div>
    <div>高级程序员</div>
</body>
</html>

链接标签：超链接相关的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_链接标签</title>
</head>
<body>
    <!--a(链接标签) 可以通过修改target参数改变跳转的方式 _self当前页打开,_blank新选项卡打开-->
    <a href="https://www.baidu.com" target="_blank">在新选项卡中打开百度</a>
    <hr>
    <a href="https://www.baidu.com" target="_blank">当前选项卡中打开百度</a>
    <hr>
    <!--a标签中href中可以写mailto:邮箱地址 会自动打开邮箱工具-->
    <a href="mailto:zzz@qq.cn">点击给我发邮件.</a>
    <hr>
    <a href="http://www.baidu.cn"><img src="imgs/壁纸.jpg"></a>
</body>
</html>

语义化标签：HTML5提供的最新标签
HTML5中为了提高程序的可阅读性,提供了一些标签.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_语义化标签</title>
</head>
<body>
    <header>
        这里是头部.
    </header>
        这里是中间内容.
    <footer>
        这里是尾部.
    </footer>
</body>
</html>

使用语义化标签可以让我们更轻易在的浏览器的开发者工具中找到对应位置的元素进行操作.
表格标签：页面表格相关的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_表格标签</title>
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="1" width="80%" align="center">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>1</td>
            <td>路飞</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>索隆</td>
            <td>86</td>
        </tr>
    </table>
</body>
</html>

Little石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

软件架构C/S 客户端/服务器端用户本地有客户端程序,远程有服务器端程序负责和客户端程序进行数据交互.优点：用户体验良好,资源都在本地,只需要进行加载就可以很快捷的进行使用.缺点：开发/安装/部署/维护相对于B/S比较繁琐.B/S Browser/Server 浏览器/服务器端只需要一个浏览器,用户就可以通过不同的网址(URL)来访问不同的服务器端程序.优点：开发/安装/部署/维护比...
复制链接

扫一扫