HTML基本标签

大纲

HTML介绍

网页和网站的区别?

多个网页构成一个网站,网页是构成网站的基本元素,通常由图片(img src)、链接、文字、视频、音频、多媒体等等

如何使用文本打开图片

1、新建txt文本

2、文本编辑

<img src="photo.jpg">
      <>标签符号
​     img 标签名字,图片标签
​     srs 图片的属性
​     “  ”里面放图片的路径

3、文本后缀名改成html

常用浏览器

网页通过浏览器来展示,常用浏览器有IE、火狐(Firefox)、谷歌(Chrome)···

浏览器内核:负责读取网页内容,整理讯息、计算网页的显示方式并显示页面

浏览器 内核 备注
IE Trident IT、猎豹安全、360极速浏览器、百度浏览器
Firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome Blink Chrom/opera浏览器内核、Blink其实是WebKit的分支

W3W

​ W3W(万维网联盟)是国际最著名的标准化组织,我们的web标准也是由标准化组织制定的一系列标准的集合。

​ 由于我们的网页通过浏览器来展示,那么使用不同的浏览器,则会让我们的代码格式的显示有某些问题,为了避免这种问题,则指定了web标准

web标准构成:结构(HTML)+表现(CSS)+行为(JavaScript)

HTML:超文本标记语言,用来描述网页的一种语言,不是编程语言。

CSS:表现

JS:行为

HTML基本结构

1、语法规范

  • 所有的标签都要放在< >中,例如

  • 大多数标签都是成对出现的,即双标签,例如,当然,有双标签也会有单标签

  • 标签的关系:包含、并列

    <!--包含关系-->
    <html>
        <head></head>
    </html>
    
    <!--并列关系-->
    <html>
        <head></head>
        <title></title>
    </html>
    

标签结构

<!DOCTYPE html>      <!--根标签,页面中最大的标签-->
<html lang="en">
<head>        <!--头部,必须要设置它当中的title标签-->
	<!--字符编码-->
    <meta charset="UTF-8">
    <title>Title</title>     <!--标题,自己网页的标题-->
</head>
<body>      <!--文档主体,页面内容基本都放这里-->
    <img src="图片相对路径" alt="">    <!--图片标签,单标签-->
</body>
</html>

常用标签

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <h1>我是一级标题标签</h1>
    <h2>我是二级标题标签</h2>
    <h3>我是三级标题标签</h3>
    <h4>我是四级标题标签</h4>
    <h5>我是五级标题标签</h5>
    <h6>我是六级标题标签</h6>
</body>
</html>

段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <p>北京时间2021年9月20日,长征七号遥四运载火箭搭载天舟三号货运飞船,在海南文昌航天发射场成功发射。
        天舟三号装载了航天员生活物资、舱外航天服及出舱消耗品、空间站平台物资、部分载荷和推进剂等,<br>
        与天和核心舱及天舟二号组合体完成交会对接后,转入三舱(船)组合体飞行状态.
        </p>
    <p>天舟三号是中国空间站关键技术验证及建造阶段的第五次飞行任务。按照任务规划,
        天舟三号货运飞船装载了航天员生活物资、舱外航天服及出舱消耗品、空间站平台物资、部分载荷和推进剂等,
        与空间站组合体完成交会对接后,转入组合体飞行段,为空间站在轨建造后续飞行任务奠定基础。<br>
        北京时间2021年10月16日,神舟十三号载人飞船发射取得圆满成功。天和核心舱和天舟二号、天舟三号组合体已进入对接轨道,
        状态良好,满足与神舟十三号交会对接的任务要求和航天员进驻条件。</p>
</body>
</html>

段落练习案例一

运行结果:

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验艺术</title>
</head>
<body>
    <h1>实验艺术:转化艺术教育思维的重要赋能引擎</h1>
    <p>刚刚过去的3月,实验艺术因为多地举办相关展览和研讨活动而备受关注。3月26日,
        “艺术×设计×心理”跨学科实验艺术项目——第二回展“低垂之眼”在四川大学美术馆以研讨会的形式开幕。
        3月15日,5年举办一届的“新青年——第四届实验艺术文献展”于江西景德镇开幕。
        从这两个活动可以深刻感受到实验艺术在国内的发展状态,及其在社会发展过程中所发挥的作用和产生的影响。
        那么,作为中国美术教育现代教育系统中较为新兴的学科,实验艺术在国内的发展现状如何?
        与传统学科相比有着哪些特点?又呈现出了哪些发展态势?</p>
    <h4>实验艺术整体发展如何</h4>
    <p>“新青年——第四届学院实验艺术文献展暨中国学院实验艺术教育大会”是对我国近5年来实验艺术领域教学
        、科研、创作及学生发展成果的系统呈现。</p>
    <h4>实验艺术要走向何方</h4>
    <p>实验艺术相比传统造型艺术,是一个年轻的专业学科和艺术领域。山东艺术学院美术学院副院长孙磊被称为
        山东实验艺术的领头人,在他看来,实验艺术是高等美术教育中的一个概念,简单说就是学院中的当代艺术。
        “当然它有更为深刻的内涵,‘实验艺术’不同于‘美术学’学科中的油画、版画、雕塑等,而是一种因为艺术工
        作方法而确定性质的专业学科,即以有价值的主题思想作为表达前提,寻求恰如其分的艺术法式与语言载体,
        最终完成艺术作品面向社会与公众的物质化呈现。</p>
    <p>作者:墨川 <br>
        2022.4.14</p>
</body>
</html>

文本格式化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式化标签</title>
</head>
<body>
    <!--粗体-->
    <strong>我是加粗标签</strong><br>   <!--br是换行标签-->
    <b>我也是加粗标签</b><br>

    <!--倾斜-->
    <em>我是倾斜标签</em><br>
    <i>我也是倾斜标签</i><br>

    <!--删除-->
    <del>我是删除线</del><br>
    <s>我也是删除线</s><br>

    <!--下划线-->
    <ins>我是下划线</ins><br>
    <u>我也是下划线</u><br>

    <!--标签嵌套:倾斜加粗-->
    <strong>
        <em>倾斜加粗</em>
    </strong>
</body>
</html>

盒子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子标签</title>
</head>
<body>
    <!--div是一个大盒子,一个div盒子单独占一行-->
    <div>我是一个div盒子</div>
    <div>我是一个div盒子1</div>
    <!--span是一个小盒子,一行可以有多给span盒子-->
    <span>我是span盒子</span>
    <span>我是span盒子1</span>
</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <img src="photo.jpg" alt="图片不存在" title="风景美景" height="750">
    <!--图片标签 src 图片的相对路径/绝对路径 alt 图片不存在时显示 title 当鼠标悬停在图片上显示的名称-->
    <!--可以设置width 图片的宽,默认单位像素 或者设置height 图片的高度,设置宽度之后,高度会等比例变化;高度也一样等比例变化-->
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
    <!--外部链接 href 鼠标点击后跳转的链接-->
    <a href="http://www.baidu.com" target="_self">我是一个a标签</a>
    <!--target="_self"属性,当前页面进行跳转-->

    <!--内部链接-->
    <a href="作业1.html" target="_blank">我也是一个a1标签</a>
    <!--target="_blank"属性,新的页面打开-->

    <a href="#">我是一个空链接</a>
    <!--# 空连接-->

    <a href="photo.zip">这是一个压缩文件</a>
    <!--下载地址,压缩包-->
</body>
</html>

锚点标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点标签</title>
</head>
<body>
    <hi id="返回首页">首页</hi>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
    <a href="#返回首页">返回首页</a>
    <!--打锚点步骤:1、先在打锚点的位置定义id-->
    <!--2、获取锚点的位置,获取id-->
</body>
</html>

特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字符标签</title>
</head>
<body>
    <p>人生得意须尽欢,&nbsp;&nbsp;&nbsp;&nbsp;莫使金樽空对月</p>
    <!--文本中有多个空格的时候,页面只会显示一个空格-->
    <!--&nbsp;一个空格-->

    <p>人生得意须尽欢,&emsp;莫使金樽空对月</p>
    <!--&emsp;一个大空格,相当于一个字符,一个tab-->

    &lt;p&gt;是一个段落标签
    <!--&lt; 是小于符号 <  &gt; 是一个大于符号 >-->
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--表格的作用:只是用来展示数据-->
    <!--table 表格标签 外框-->
    <table align="center" border="1" cellpadding="10" cellspacing="0">
        <!--属性:align="center"表示居中-->
        <!--border="1" 加表格框-->
        <!--cellpadding="10"文字和单元格之间的空白区域默认1像素-->
        <!--cellspacing="0"单元格之间的空隙默认2像素-->
        <!--thead定义表格头部,内部必须有行tr-->
        <thead>
            <tr>   <!--th标签用来表示表头,加粗并且居中-->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <!--tbody定义表格主体,用于存放数据-->
        <tbody>
            <!--tr 又定义第二行-->
            <tr>
                <!--td 定义列-->
                <td>丽丽</td>
                <td>女</td>
                <td>18</td>
                <td>跳绳</td>
            </tr>
            <!--tr 又定义第三行-->
            <tr>
                <td>泡泡</td>
                <td>男</td>
                <td>16</td>
                <td>跑步</td>
            </tr>
        </tbody>

    </table>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--列表标签用于布局-->
<!--第一种:无序列表-->
    <h3>所有菜单</h3>
    <ul>
        <li>辣椒炒肉</li>
        <li>糖醋排骨</li>
        <li>番茄炒蛋</li>
    </ul>
<!--第二种:有序列表-->
    <h3>访问量</h3>
    <ol>
        <li>抖音  100000</li>
        <li>快手  50000</li>
        <li>火山  4000</li>
    </ol>
<!--第三种:自定义列表-->
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
<!--ul ol当中只能放li标签 li标签中可以放任意标签-->
<!--dl 当中只能放dt和dd标签 dd里面可以放任意标签-->
</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--表单是为了收集用户信息-->
<!--action=""提交的链接-->
<!--method="get"请求的方法get post-->
    <form action="" method="get">
<!--文本框-->
        用户名:<input type="text" placeholder="请输入用户名"><br>
        <!--type="text" 数据类型是文本形式-->
        <!--value="请输入用户名"提示语,需要手动删除-->
        <!--placeholder="请输入用户名"提示语,不用删除-->
<!--密码框-->
        密码:<input type="password"><br>
        <!--type="password"数据类型为密码形式,输入的内容不会显示出来-->
<!--单选框-->
        性别:男 <input type="radio" name="radio">  女 <input type="radio" name="radio"><br>
        <!--checked="checked"默认选中-->
        <!--name="radio"设置同一个name可以实现二选一功能-->
        <!--性别单选按钮有相同的name,才可以实现多选-->
<!--复选框(多选框-->
        爱好:唱歌 <input type="checkbox" name="checkbox">
        跳舞 <input type="checkbox" name="checkbox">
        做运动 <input type="checkbox" name="checkbox"><br>
<!--提交submit-->
        <input type="submit" value="注册">
        <!--type="submit"会把收集的信息提交到action=""这里的网址-->
<!--重置按钮 还原表单刚开始的状态-->
        <input type="reset" value="重置">
<!--普通按钮 button-->
        <input type="button" value="获取验证码"><br>
<!--文件上次 file-->
        上传文件:<input type="file">
    </form>
</body>
</html>

表单2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单2</title>
</head>
<body>
    <form action="">
        <label for="username">用户名</label><input type="text" id="username">
<!--label绑定一个表单元素,当点击label中的文本时,会自动将焦点转到对应的表单元素上-->
        <label for="nan">男:</label><input type="radio" id="nan" name="sex">
        <label for="nv">女:</label><input type="radio" id="nv" name="sex">
    </form>
</body>
</html>

下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
</head>
<body>
    <form action="">
<!--让用户有更多的选择,可以节省空间  selected="selected"默认选中-->
        <select name="" id="">
            <option value="" selected="selected">广州</option>
            <option value="">上海</option>
            <option value="">长沙</option>
            <option value="">中山</option>
            <option value="">梅州</option>
        </select>
    </form>
</body>
</html>

文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域</title>
</head>
<body>
    <form action="">
        工作日报
        <textarea name="" id="" cols="30" rows="10">
            工作日报的内容···
        </textarea>
        <!--cols="30"每一行多少字  rows="10"可以写多少行-->
    </form>
</body>
</html>

posted @ 2022-04-20 12:55  猪腩飞了天  阅读(76)  评论(0编辑  收藏  举报