目录
html-toc" name="tableOfContents" style="margin-left:0px">一.什么是html
html%E6%A0%87%E7%AD%BE-toc" name="tableOfContents" style="margin-left:0px">二.认识html标签
1.标签的特点:
html%E6%96%87%E4%BB%B6%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84-toc" name="tableOfContents" style="margin-left:40px">2.html文件基本结构
3.标签的层次结构
html%E5%B7%A5%E5%85%B7-toc" name="tableOfContents" style="margin-left:0px">三、html工具
四、创建第一个文件
html%E5%B8%B8%E8%A7%81%E6%A0%87%E7%AD%BE-toc" name="tableOfContents" style="margin-left:0px">五.html常见标签
1标题标签h1-h6
2.段落标签:p
3.换行标签:br
4.图片标签:img
图片路径有1三种表示形式:
5.超链接:a
链接的几种形式:
6.表格标签
1>.
2>.
3>.
属性:
7.表单标签
8.form标签
9.input 标签
包含的属性:
常用类型：
1>.文本框:text
2>.密码框:password
3>.单选框:radio
4>.复选框:checkbox
6>.提交按钮:submit
10.select标签:下拉菜单
11.textarea标签:文本域
12.无语义标签:div , pain
六.实现用户注册页面
参考代码:
html" name="%E4%B8%80.%E4%BB%80%E4%B9%88%E6%98%AFhtml" style="background-color:transparent">一.什么是html
HTML(Hyper Text Markup Language):超⽂本标记语⾔.
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.
标记语⾔: 由标签构成的语⾔
HTML的标签都是提前定义好的, 使⽤不同的标签, 表⽰不同的内容. 类似⻜书⽂档, Word⽂档
html%E6%A0%87%E7%AD%BE" name="%E4%BA%8C.%E8%AE%A4%E8%AF%86html%E6%A0%87%E7%AD%BE">二.认识html标签
html代码都是由“标签”构成的。
1.标签的特点:
标签名放到< >中.如<h1>
大部分标签是成对出现的,如<h1></h1>,叫做"双标签",开始标签和结束标签之间写标签的内容;
少部分是单独出现的,如</br>,叫做"单标签".
开始标签中会带有一些属性,用来修饰标签的内容.
html%E6%96%87%E4%BB%B6%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84" name="2.html%E6%96%87%E4%BB%B6%E5%9F%BA%E6%9C%AC%E7%BB%93%E6%9E%84">2.html文件基本结构
html"><html><head><title>文件标题</title></head><body></body>
</html>html是文件的根标签，head中用来写页面的属性，body写页面的内容，title是写页面的标题
3.标签的层次结构
父子关系，兄弟关系
像上面的html和head，head和title就是父子关系；head和body就是兄弟关系。
标签之间就构成了一个DOM树：
html%E5%B7%A5%E5%85%B7" name="%E4%B8%89%E3%80%81html%E5%B7%A5%E5%85%B7">三、html工具
编写html代码，可以用Visual Studio Code（简称"VS Code"）工具来写。
官网：Visual Studio Code - Code Editing. Redefined，进行下载安装。
四、创建第一个文件
在VS code中，创建文件xxx.html,开始一个新的文件
输入!加回车,就会快速生成一个html框架,
head种是一些已经设置好的属性,body中是写页面中要显示的内容.
让在页面中显示:你好,标题为前端
VS不是自动保存的,代码写完后,要ctrl+s进行保存,也可以设置一下,进行自动保存:文件-自动保存:
代码写完之后,找到创建的html文件的位置,双击,就能在浏览器中显示代码效果:
运行效果:
更新完善代码后,直接刷新浏览器界面就行,不用再次双击html文件.
html%E5%B8%B8%E8%A7%81%E6%A0%87%E7%AD%BE" name="%E4%BA%94.html%E5%B8%B8%E8%A7%81%E6%A0%87%E7%AD%BE">五.html常见标签
1标题标签h1-h6
.标题标签都是换行,加粗，从h1到h6,数字越大,标题的字体越小
2.段落标签:p
在html代码中,空格,换行,回车都是无效的,要想使用,要特定的标签来实现.
html"> <p>段落标签</p>
p标签描述的段落没有首行缩进的效果,要想实现,需要用别的方法实现.
3.换行标签:br
br是一个单标签,若想进行换行,可在代码结尾写<br/>
z在代码中换行,是不起作用的:
html">影片《哪吒之魔童闹海》票房突破54.14亿元，
进入中国影史票房榜前三，
同时成为中国影史春节档票房冠军
在想要换行的位置加上<br/>:
html">影片《哪吒之魔童闹海》票房突破54.14亿元，<br/>进入中国影史票房榜前三，<br/>同时成为中国影史春节档票房冠军<br/>
页面效果:
<br/>也可以写成<br>,<br/>是规范写法.
br标签是比较紧凑的,不像p标签那样带有⼀个很⼤的空隙:
4.图片标签:img
img标签必须带有src属性,表示图片路径:
html"><img src="1.jpg">
图片路径有1三种表示形式:
1.相对路径：以html文件所在位置为基准，找到图片位置。上面的就是相对路径
同级目录，直接写文件名就行；
下级目录，就以当前html文件所在位置，逐级写文件的位置：
当前文件在AA文件中：AA/文件名
html"><img src="AA/1.jpg">上级目录: ../ 表示上一级,逐级向上写
html"> <img src="../AA/1.jpg">
2.绝对路径:
一个完整的磁盘路径:
html"> <img src="c:\Users\86195\OneDrive\桌面\图片\1.jpg">3.网络路径:
网络路径就是网络中图片的路径,并没有在自己的设备上:
html"> <img src="http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280">
5.超链接:a
html"> <a href="https://www.baidu.com">百度</a>
点击就会跳转到指定页面.
href:链接路径,必须存在,
target:打开方式:默认是_self,从当前页面跳转;若是_black,指打开新的页面.
html"> <a href="https://www.baidu.com" target="_blank">百度</a>
链接的几种形式:
1.外部链接:href中引用其他网站的链接,上面的就属于外部链接.
html"> <a href="https://www.baidu.com">百度</a>
2.内部链接:⽹站内部⻚⾯之间的链接.写相对路径即可.
html"> <a href="2.html" target="_blank">跳转2.html</a>
3.空链接：#代表链接占位
html"> <a href="#">空链接</a>
6.表格标签
1>.<table></table>
表示一个表格
2>.<tr></tr>
表示表格的一行
3>.<td></td>
表示表格中的一个单元格
table包含tr,tr 包含td.
属性:
表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使⽤CSS⽅式来设置.
这些属性都要放到table标签中.
• align 是表格相对于周围元素的对⻬⽅式.默认左对齐,align="center" (不是内部元素的对⻬⽅式)
• border 表⽰边框.1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框.
• cellpadding:每个单元格的内容距离单元格边框上下左的距离,默认1像素
• cellspacing:单元格之间的距离.默认为2像素
• width/height:设置尺⼨.
html"> <table align="center" border="3" cellpadding="20" cellspacing="30" width="300" height="100"><tr><td>好好</td><td>学习</td></tr><tr><td>天天</td><td>向上</td></tr><tr><td>加油</td><td>努力</td></tr></table>
7.表单标签
表单是让⽤⼾输⼊信息的重要途径.
分成两个部分:
• 表单域:包含表单元素的区域.重点是form标签.
• 表单控件:输⼊框,提交按钮等.重点是input标签.
下面这些属于表单标签:
8.form标签
form标签的功能是 将form标签内部的内容提交.
描述了要把数据按照什么⽅式,提交到哪个⻚⾯中
html"> <form action="hello2.html"><!-- form 的内容 --></form>9.input 标签
各种输⼊控件,单⾏⽂本框,按钮,单选框,复选框.
包含的属性:
type(必须存在)：标签的种类:button,checkbox,text,file,image,password,radio等.
name：给Input标签起个名字.(尤其是对于按钮类型的,名字相同的按钮为一组)
value：Input中的默认值
checked：默认被选中
placeholder：占位符
常用类型：
1>.文本框:text
html">文本框: <input type="text">
2>.密码框:password
html"> 密码框:<Input type="password"><br/>
3>.单选框:radio
html"> <input type="radio" name="单选">单选1<input type="radio" name="单选">单选2
注意: 单选框之间必须具备相同的name属性,才能实现多选⼀效果.
4>.复选框:checkbox
html"> <input type="checkbox" name="复选">复选1<input type="checkbox" name="复选">复选2<input type="checkbox" name="复选">复选3
5>.普通按钮:button
html"> <input type="button">普通按钮
当前点击了没有反应.需要搭配JS使⽤
6>.提交按钮:submit
html"> <input type="submit">确认提交
提交按钮需要放到form标签中使用,提交的是form标签中的内容
10.select标签:下拉菜单
需要与option 标签搭配使用,option中写菜单内容,
option中的属性selected为selected时,该选项为默认选项
html"> <select ><option selected="selected">上海</option><option>北疆</option><option>河南</option><option>北京</option></select>
11.textarea标签:文本域
可以设置文本域的长度和宽度:
html"> <textarea rows="3" cols="10"></textarea>
⽂本域中的内容,就是默认内容,
注意,空格也会有影响. rows 和 cols也都不会直接使⽤,都是⽤css来改的.
12.无语义标签:div , pain
这两个标签没有什么特点,主要是用来获取并选中要为其设置的内容的.且是用处非常大的.
div独占一行大格子;span不独占一行,是一个小格子.
html"> <div><span>haha</span><span>haha</span><span>haha</span></div><div><span>diid</span><span>diid</span><span>diid</span></div><div><span>tete</span><span>tete</span><span>tete</span></div>
六.实现用户注册页面
页面内容:
参考代码:
html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册</title>
</head>
<body><h1>用户注册</h1><table><tr><td>用户名</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" placeholder="请输入密码"></td></tr></table><input type="button" value="提交"><br/>已有账号?<br/><a href="#">登录</a></body>
</html>
