注释
注释的写法是,无论内部写什么,无论是标签还是普通文字都不会显示到浏览器上,只能存在于写的文件中,被写的人看到。
在vscode内用ctrl+/可没有时,添加注释,有时,在注释所在那一行任意位置都可以删除。
标题和段落标签
标题标签
h1~h6,是双标签 ,该标签可将标签内部的内容加粗,换行,最后一个字所在行独占一行。如果在span/div等被设置了宽度和高度的盒子内,就是相对父标签,独占一行。h1标签用于网页标题和logo,只用一次,h2是副标题,只用一次。
段落标签
p标签,是双标签,标签内开独占一行,如果多行,最后一个可独占一行。在该标签后内容,在浏览器显示时,会在最后一行,多处一行作为间隙,再显示。无论该标签后是什么。
对比:
相同 | 不同 |
最后一个字独占一行。 | 标题标签加粗,段落标签没有。段落标签有间隙,标题标签没有。 |
注意:再vscode中,在字当中写标签,可直接写标签内的字母,直接回车,可自动生成无论单标签或是双标签。只要前面有一个空格就可自动生成。
换行和水平线标签
换行标签
br,单标签 , 在某一个字后面写该标签,该标签会让后面一个在浏览器显示内容在下一行显示。浏览器无法识别换行键的。只能识别两个字之间的空格且只显示一个。
水平线标签
hr,单标签,在上一个字的下一行显示水平线占满父标签的宽。
文本格式化标签
为文本加特殊格式,strong,em,ins,del等标签带强调含义,它是默认浏览器显示这个,但是它是可以设置别的格式的,只是强调,浏览器默认显性以下,但是b,i,,u,s等是就是要设置这种效果。因此我们常用strong,em,ins,del等标签。这八个标签都是双标签,不换行,后面的可接着写。
编辑
图像标签img
图像标签是img,是单标签,可以在网页中插入图片,src属性用于指定图片位置和名称,是该标签的必须的属性。该标签还有alt属性,表示无法加载,加载速度慢时会显示的文本内容,title属性表示当图片显示时,鼠标停留在改图片上的提示内容。所有的属性写法都是=“”,带双引号。标签名或属性之间用空格隔开。
绝对路径,windows等其他操作系统是用盘符,如C:\use\admin.png,但是在windows操作系统内,既可以用\也可以用/来表示进入文件夹内寻找文件。 |
相对路径,.表示当前文件所在的文件夹,/表示进入该文件夹内,..表示该文件所在文件夹的所在文件夹。如./a.png |
www.tmall.com/?spm=a2156.… |
超链接a
链接a是双标签。href是该标签的必要属性。是网页地址。点击该标签内的所写内容会跳转到href所在网址。默认跳转所在的页面在点击时的页面。修改target属性为target="_blank"可跳转到新页面。开发初期,不确定跳转地址,href的值可用#,不会跳转,和不写一样的。
绝对路径,直接将其他网页的地址复制 |
相对路径,用.或..可将自己的文件搞到网页上 |
相对路径,盘符。 |
音频和视频标签
音频标签
audio标签,是双标签。有controls属性,当属性名和属性值相同时,可直接写controls
当写controls,会将控制面板显示出。loop,属性名和属性值相同。当用户点击播放时,会自动循环播放,autoplay是页面出现时,自动播放。但是音频为了用户体验会禁用。src内和上面两一样。
视频标签
video标签,是双标签,src和之前一样。多的是muted标签都是属性名和属性值一样的,muted会打开网页时,静音,只有设置静音,才能设置autoplay有用。但是这些都可以用户去改,只是默认情况。
<!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>
<form>
<h1>注册信息</h1>
<h2>个人信息</h2>
姓名: <input type="text" placeholder="请输入真实姓名"><br><br>
密码: <input type="password" placeholder="请输入密码"><br><br>
确定密码: <input type="password" placeholder="请输入确定密码"><br><br>
<!-- 有for属性,在内部都没用,即使for没找到。label 增加点击区域-->
性别: <input type="radio" name="sex" id="a"> <label for="a">男</label> <label for=""><input type="radio" name="sex" checked>女</label><br><br>
居住城市: <select name="" id="">
<option value="">北京</option>
<option value="">江西</option>
<option value="">湖南</option>
<option value="">湖北</option>
</select>
<h2>教育经历</h2>
最高学历: <select name="" id="">
<option value="">博士</option>
<option value="">硕士</option>
<option value="">本科</option>
<option value="">专科</option>
</select> <br> <br>
<!-- 下拉也是没有换行的 -->
学校名称: <input type="text"> <br> <br>
所学专业: <input type="text"> <br> <br>
在校时间: <select name="" id="">
<option value="" selected>2015</option>
<option value="">2016</option>
<option value="">2017</option>
<option value="">2018</option>
</select>-<select name="" id="">
<option value="" selected>2018</option>
<option value="">2019</option>
<option value="">2020</option>
<option value="">2021</option>
</select>
<h2>工作经历</h2>
公司名称:<input type="text"> <br> <br>
<!-- 文本域也是没有换行的 -->
工作描述: <textarea name="" id="" cols="30" rows="10"></textarea> <br> <br>
<input type="checkbox">已阅读并同意该协议<br>
<ul>
<!-- 无论是#还是没有,都是默认是self,会跳转,但是还是之前的页面。 -->
<li> <a href="#">《用户服务协议》</a></li>
<li><a href="">《隐私政策》</a></li>
</ul>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>