hi,好久不见各位,今天为大家简单介绍一下前端的HTML
这期学习目标:
认识 HTML 的基本结构
学会使用常用的 HTML 标签
🐷1.HTML结构
1.认识HTML标签
2.HTML文件基本结构
3.标签层次结构
快速生成代码框架
🐷2.HTML常见标签
注释标签
标题标签:h1-h6
段落标签
换行标签
格式化标签
图片标签
超链接标签
表格标签
🐷3.HTML特殊标签
1.HTML结构
1.认识HTML标签
HTML 代码是由 “标签” 构成的,就比如
<body>hello demoend</body>
注意:
标签名 (body) 放到 < > 中 大部分标签成对出现. <body> 为开始标签, </body> 为结束标签.少数标签只有开始标签, 称为 “单标签”. 开始标签和结束标签之间, 写的是标签的内容. (demoend) 开始标签中可能会带有
“属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
<body id="1">hello demoend</body>
🧊HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> hello </body> </html>
这段代码可以采用!+tab键一键生成
html 标签是整个 html 文件的父标签
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.
标签层次结构
1.父子关系
2.兄弟关系
<html> <head> <title>第一个页面</title> </head> <body> hello world </body> </html>
head和body是html的子标签
head和body是兄弟标签
title 是 head 的子标签. head 是 title 的父标签.
当我们想查看某个网页的前端代码,单击右键右击检查
标签之间的结构关系, 构成了一个 DOM 树
DOM 是 Document Object Mode (文档对象模型) 的缩写
这就是DOM树的结构
🧊2.HTML常见标签
标签
🌸注释标签
注释不会显示在界面上. 目的是提高代码的可读性.
ctrl + / 快捷键可以快速进行注释/取消注释.
<!-- --> • 1
就像这个
注释的原则
要和代码逻辑一致. 尽量使用中文. 不要传递负能量标题标签: h1-h6
有六个, 从 h1 - h6. 数字越大, 则字体越小.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>hello</h1> <h2>hello</h2> <h3>hello</h3> <h4>hello</h4> <h5>hello</h5> <h6>hello</h6> </body> </html>
显示出来就是这样的效果
🌼段落标签: p
p 标签表示一个段落.
举个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>我最喜欢的男演员</p> <p> 王一博（1997年8月5日-），出生于中国河南省洛阳市，中国内地男演员、歌手、职业摩托车赛车手。 </p> <p> 2014年9月15日，以UNIQ组合成员身份正式出道，同年随组合获得酷音乐亚洲盛典年度内地最佳新人奖[3]。2016年3月，凭借歌曲《EOEO》获得美国International-K Music Awards最佳编舞奖[4]；4月，正式成为综艺节目《天天向上》“天天兄弟”成员；8月，领衔主演都市剧《人间至味是清欢》。2018年3月，担任竞演类真人秀节目《创造101》舞蹈导师[2]，获得大量关注。2019年6月，主演的电视剧《陈情令》播出；同年，加入万里达雅马哈车队成为职业赛车手，并在2019亚洲公路摩托车锦标赛中获得ZIC全场第二名，双回合D组第一名的成绩。 </p> </body> </html>
效果
段落的效果其实说的通俗一点既是是否有换行
✨p 标签之间存在一个空隙
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.
💖换行标签: br
br 是 break 的缩写. 表示换行.
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法. 不建议写成 <br*>*
格式化标签
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
举例
<strong>strong 加粗</strong> <b>b 加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <s>删除线</s> <ins>下划线</ins> <u>下划线</u> </body>
🍬图片标签: img
img 标签必须带有 src 属性. 表示图片的路径
来拿之前的博客系统的图片
这样写,要确保写的路径可以正确访问到这个图片
🥝超链接标签: a
href: 必须具备, 表示点击后会跳转到哪个页面.
<a href="http://www.baidu.com">百度</a> • 1
🥗表格标签
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead:表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1表示有边框(数字越大, 边框越粗), “” 表示没边框. cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素 width / height: 设置尺寸.
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"> <tr> <td>姓名</td> <td>性别</td> <td>职业</td> </tr> <tr> <td>王一博</td> <td>男</td> <td>演员</td> </tr> <tr> <td>小魏</td> <td>女</td> <td>在读大学生</td> </tr> </table>
效果
🍉表单标签
表单是让用户输入信息的重要途径.
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.
<form action="test.html"> <!-- 写的是form的内容 --> </form>
<input type="text"> <input type="password"> <input type="radio" name="sex"> <input type="radio" name="sex" checked="checked">
这两个标签在写博客系统,表白墙已经模拟登录都写过很多遍了,就不再说了
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> </form> <form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> <input type="reset" value="清空"> </form>
当在第二框里写的时候,写完点击清空就啥都没有了~~
提交按钮必须放在form中,. 点击后就会尝试给服务器发送
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.
🧊HTML 特殊字符
有些特殊的字符在 html 文件中是不能直接表示的, 例如
空格:
小于号: <
大于号: >
按位与: &
关于HTML的介绍就到这里,我们下期再见!
