HTML入门

HTML文件结构

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
</head>

<body>welcome to my html</body>

</html>

第一行是文件类型申明,head里面设置网页标题,编码格式。body里面写上网页信息,结果如下:
在这里插入图片描述

标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<!--
标题标签是为了seo,百度的爬虫程序,增加网站权重
-->
    <h1>个人主页</h1>
    <h2 font color-class="#00dd00">会员中心</h2></font>
    <h3>你的世界</h3>
    <h4>我的世界</h4>
</body>
</html>

title里面设置网页标题,h1设置大标题。。。。结果如下:
在这里插入图片描述

段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML简介</title>
</head>[
<body>
<h1>HTML简介</h1>
<!--
空格的字符实体:&nbsp;
换行:<br/>
大于号的字符实体:&gt;(greater then)
小于号的字符实体:&lt;k
-->
<p>
    &nbsp;&nbsp;HTML是超文本标记语言,<br/>
    很好学。
</p>
<p>11&gt;5</p>
<p>5&lt;8</p>
</body>
</html>

其实csdn的markdown编辑器支持HTML插入,可以直接把代码段复制下来,然后编辑博客打开,粘贴就能看到运行结果。
在这里插入图片描述

块样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签、含样式标签</title>
</head>
<body>
    <p>
        &nbsp;&nbsp;HTML是超文本标记语言,<br/>
        很好学。
        <p>
        &nbsp;&nbsp;HTML是超文本标记语言,<br/>
        很好学。
        </p><!--不要这样的把p标签嵌套-->
    </p>
    <div> &nbsp;&nbsp;HTML是超文本标记语言,<br/>
        很好学。
    </div>
<!--
p标签带有样式的,两个p标签之间有空行,但是div标签不带样式,
两个div标签之间不带空行,div可以嵌套,可以嵌套标题等
span标签,表示一行里面的一小块内容,也没有具体的语义
-->
    <!--
    em标签:行内标签,表示语气中的强调词,从浏览器查看变成了斜体
    i标签:表示专业词汇,和em标签一样也是把文字变成了斜体
    b:行内标签,表示文档中的关键字或者产品名,字体变成了加粗一点的字体
    strong:行内标签,表示非常重要的内容,字体比b标签更粗一点o
    -->
    <div>
        <h1>html概述</h1>
    &nbsp;&nbsp;HTML是<i>超文本</i>标记<b>语言</b><br/>
        <span><em></em>好学。</span>
        <p>
        &nbsp;&nbsp;<strong>HTML是超文本标记</strong>语言,<br/>
        很好学。
        </p>
    </div>
</body>
</html>

注释里基本解释清楚了,值得注意的是,在实际开发中em和i标签区分不是很重要,反正都是让字体变成斜体起到强调作用。并且div可以嵌套div,p。。标签,但是p虽然也可以嵌套p表示我们却不这样做,是为了良好的代码风格。
在这里插入图片描述

链接标签,图片插入标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML链接标签</title>
</head>
<body>
<!--
href:定义跳转的地址
title:定义鼠标悬停时弹出的提示文字
target:定义链接窗口打开的位置
    target=self,缺省值,新页面替换原来页面,在原窗口打开/
    target=_blank,在新窗口打开页面
-->
<h1>csdn</h1>
<a href="https://blog.csdn.net/" title="csdn官网" target="_blank" >csdn</a>
<a href="005图片标签,绝对路径,相对路径.html" target="_self" title="中科大照片">keda照片</a>
</body>
</html>

定义了两个链接,其中一个转到一个html文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签,绝对路径,相对路径</title>
</head>
<body>
    <img src="../images/1.jpg" alt="中科大软件学院"/>
    <!--alt属性可以做成无障碍网页,盲人可以使用,人工智能可以读取这个标签-->
    <img src="../images/2.jpg" alt="北门"/>
    <a href="007链接标签.html" target="_self" title="网页7">csdn</a>
</body>
</html>

定义了两张图片一个链接,实现了两个页面之间的跳转。参数实现功能在注释写了
在这里插入图片描述在这里插入图片描述<a href="www.csdn.com" target="_blank" title="csdn官网" ><img src="../images/11.jpg" alt="good"></a>图片做链接

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<h1>有序列表</h1>
<ol>
    <!--会自动给下面三项进行编号 ol>li*3可以再按一下tab键就能自动生成三行-->
    <li>HTML</li>
    <li>CSS</li>
    <li>javascript</li>
</ol>
<h1>无序列表</h1>
<ul>


    <li><a href="https://blog.csdn.net/">新闻1</a></li>
    <li>新闻2</li>
    <li>新闻3</li>

</ul>
<!--定义列表-->
<h3>前段三大块</h3>
<dl>
    <dt>html</dt>
    <dd>页面结构</dd>
    <dt>css</dt>
    <dd>页面表现</dd>
    <dt>javascript</dt>
    <dd>页面行为</dd>
</dl>
</body>
</html>

一种快捷键:比如想生成定义列表,可以这样;
dl>(dt+dd)×3然后按下tab键,就能自动的生成三块区域
在这里插入图片描述

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <h1>表格</h1>

    <table border="10" width="300" height="200" align="center">  <!--是个像素的边框,300*200的尺寸,align设置
                                                                    居中-->
        <tr><!--th默认的字体是加粗剧中的,为什么不直接用td呢,是为了后面给样式-->
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td align="center">1</td><!--这是一个格子,align设置居中,在样式出现之前都是这样设置的-->
            <td align="center">2</td>
            <td align="center">3</td>
        </tr><!--这是一行-->
        <tr>
            <td align="center">1</td><!--这是一个格子-->
            <td align="center">2</td>
            <td align="center">3</td>
        </tr><!--这是一行-->
        <tr>
            <td align="center">1</td><!--这是一个格子-->
            <td align="center">2</td>
            <td align="center">3</td>
        </tr><!--这是一行-->

    </table>

<table border="10" width="1000" height="500" align="center">
    <!--利用单元格合并设计一个表格-->
    <tr><!--合并第一行,合并5个格子-->
        <td colspan="5">学校</td>
    </tr>
    <tr>
        <td width="15%">基本情况</td>
        <td width="25%"></td>
        <td width="15%">恩恩</td>
        <td width="25%"></td>
        <td rowspan="5" width="20%"><img src="../images/2.jpg" alt="anyway" sizes=""></td><!--列合并5个格子-->
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

    </tr>
</table>

</body>
</html>

整体效果如下
在这里插入图片描述

table布局制作简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
</head>
<body topmargin="0"><!--将简历顶格-->
<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td width="260" valign="top" bgcolor="#a9a9a9"> <!--针对复杂的布局,可以再单元格里面嵌套表格-->
            <table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
                <tr height="100">
                    <td>

                    </td>
                </tr>
                <tr>
                    <td><img src="../images/2.jpg" alt="学校"></td>
                </tr>
                <tr>
                    <td align="center">中科大</td>
                </tr>
                <tr>
                    <td align="center">合肥</td>
                </tr>
                <tr>
                    <td align="center">specyue@mail.ustc.edu.cn</td>
                </tr>
            </table>
        </td> 
        <td width="30"></td>
        <td width="480" valign="top" bgcolor="#808080">
            <table width="480" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="right" ><img src="../images/13.jpg" alt="home"></td>
                </tr>
            </table>
            <br>
            <hr />
            <br>
            <table width="480" height="400" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2" height="50">基本信息</td>

                </tr>
                <tr>
                    <td width="240" height="80">地址</td>
                    <td width="240" height="80">黄山路</td>
                </tr>
                <tr>
                    <td width="240" height="80">级别</td>
                    <td width="240" height="80">技校</td>
                </tr>
                <tr>
                    <td width="240" height="80">学生</td>
                    <td width="240" height="80">1W+</td>
                </tr>
                <tr>
                    <td width="240" height="80">面积</td>
                    <td width="240" height="80">很大</td>
                </tr>
                <tr>
                    <td width="240" height="80">xx</td>
                    <td width="240" height="80">xx</td>
                </tr>
                <tr>
                    <td width="240" height="80">xx</td>
                    <td width="240" height="80">xx</td>
                </tr>
            </table>
        </td>
        <td width="30"></td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述
author:specyue@,mail.ustc.edu.cn
github:https://github.com/zhangyuespec/HTML_learning

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页