HTML详细学习笔记

最新推荐文章于 2023-01-20 20:45:29 发布

程序员一修

最新推荐文章于 2023-01-20 20:45:29 发布

阅读量235

点赞数 1

分类专栏： # Java_知识碎片文章标签： html5

本文为博主原创文章，未经作者允许不得用于商业目的以及禁止转载，否则保留追究法律责任的权利。转载请联系个人同名公众号【爱书不爱输的程序猿】，经同意后，请在显著位置标明本文出处以及作者网名

本文链接：https://blog.csdn.net/qq_40332045/article/details/103869200

版权

Java_知识碎片专栏收录该内容

12 篇文章 2 订阅

订阅专栏

HTML

HTML:Hyper Markup Language 超文本标记语言
超文本:比普通文本功能更加强大，可以添加各种样式
标记语言:通过一组标签来对内容进行描述 <关键字>

<h1>静夜思</h1>
<b><i>--李白</i></b></br>
<p>窗前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>

html标签，标题h1,水平分割线hr,段落p，font标签

b标签，i标签，strong标签，em标签

img标签，相对路径

列表标签ul,ol,超链接标签

<!DOCTYPE html>
<!--
	1.上面是一个文档声明
	2.根标签html
	3.html文件主要包含两部分，头和体。
		头部分主要用来放置一些页面信息
		体部分主要用来放置我们的html页面内容
	4.通过标签来对内容进行描述，标签通常都是由开始标签和结束标签组成
	5.标签不区分大小写，官方建议使用小写
-->
<html>
	<head>
        <!--meta 网站的配置信息-->
		<!--指定浏览器打开页面的编码--> 
		<meta charset="utf-8" />
		<title>入门案例01</title>
        <!--指定网站标题-->
	</head>
	<body>
		Hello World！
        <!--h1标题:h后面的数字取值范围；1-6-->
        <h1>标题1 </h1>
         
        <!--水平分割线--> 
        <hr />
        <p>段落1</p>
        <hr />
        
        <!--font 标签常用属性:color(颜色),size(改变字体大小1-7)face(字体)-->
        我要<font color="red" size="1" face="仿宋">回家！！！</font>
        
        <!--b:加粗  i:斜体  strong:加粗，带语义标签  em:斜体，带语义-->
        <b><i>我</i></b>是最<strong><em>棒</em></strong>的
        <!--建议使用带语义的标签-->
        
        <!--img标签
				常用属性: src:指定图片路径  width:指定图片宽度  height:图片高度  alt:文件加载失败时的提示语-->
        
        <!--路径相关:
		相对路径
			./代表的是当前路径  ../代表的是上一级路径 ../../上上一级路径
		-->
        
        <!--列表标签:
				无序列表:ul       li列表项
					常用属性:type属性，小圆圈、小方块、默认小黑点
				有序列表:ol
					常用属性:type指定序号的类型，
							start规定序号从几开始，必须写数字
		-->
        <ul type="square">
            <li>百度</li>
        </ul>
        <ol type="a" start="2">
            <li>百度</li>
        </ol>
        
        <!--超链接标签
				常用属性:href指定要跳转去的链接地址，需要加上http协议
						target以什么方式打开
							 _self:默认打开方式，在当前窗口打开
							 _blank:新起一个标签页打开页面
		-->
        <ul>
        <li><a href="http://www.baidu.com" target="blank">百度</a></li>
        </ul>
	</body>
</html>

表格，单元格合并，表格嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>入门案例02</title>
	</head>
	<body>
        <!--table表格标签
					常用属性:border指定边界 width宽度 height高度
							bgcolor背景色 align对齐方式
							colspan跨列 rowspan跨列
				tr标签  
				td标签
		-->
        <table border="1px" width="400px" bgcolor="yellow" align="center">
            <tr>
                <td colspan="2">11</td>
                <!--该操作将11与12合并(跨列)-->
                <!--合并后，会将13挤出去，所以将12删除，才有单元格合并的效果-->
                <!--  <td>12</td>  -->
                <td>13</td>
                <td>14</td>
            </tr>
            
            <tr>
                <td>21</td>
                <td bgcolor="blue" align="center" colspan ="2" rowspan="2">   
                    <!--表格嵌套-->
                	<table border="1px" width="100%">
                     	<tr>
                            <td>11</td>
                            <td>12</td>
                        </tr>
                        <tr>
                            <td>21</td>
                            <td>22</td>
                        </tr>
                	</table>
                </td>
                <td>24</td>
            </tr>
            
            <tr>
                <td>31</td>
               <!-- <td>32</td>   <td>33</td>-->
                <td>34</td>
            </tr>
            
            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>
                <td>44</td>
            </tr>
        </table>
    </body>
</html>

程序员一修

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML详细学习笔记

HTMLHTML:Hyper Markup Language 超文本标记语言超文本:比普通文本功能更加强大，可以添加各种样式标记语言:通过一组标签来对内容进行描述 <关键字><h1>静夜思</h1><b><i>--李白</i></b></br><p>窗前明月光，</...
复制链接

扫一扫