HTML基础
标签
<!-- 这是HTML注释格式-->
注释快捷键:ctrl + /
前端:三大技术
HTML:负责显示页面内容(文字、按钮、输入框等)
CSS:负责页面内容的布局和样式
JavaScript:负责实现功能
前端文件的后缀名:html、htm、shtml
html现在最常用的前端文件后缀名。
htm和html相等,此前DOS操作系统后缀名存在限制,文件后缀名长度小于等于3
shtml:内置了脚本命令的html文件
HTML文件理解为是一个html标签,html标签内包含head标签和body标签
head标签存放页面部分置顶,body标签显示页面内容
html标签分为双标签(一般标签)、单标签(自闭合标签)
双标签:<标签名 属性1=属性值1 属性2=属性值2…>标签和内容</标签名>
单标签:<标签名 属性1=属性值1 属性2=属性值2…>或者<标签名 属性1=属性值1 属性2=属性值2… />
属性=属性值 为固定写法,用于修改标签的内容或样式
标签名也是固定写法,不同的标签用于显示不同的内容,用法是固定的。
html语法和Markdown语法属于同一类。
<!-- 声明这是一个html5文件 -->
<!DOCTYPE html>
<html>
<head>
<!-- charset用于页面指定编码 -->
<meta charset="utf-8" />
<!-- 页面的标题 -->
<title></title>
</head>
<body>
</body>
</html>
文本标签
标题标签:<h1><h2>.....<h6>
段落标签:<p>
标题标签和段落标签会自动换行(一个标签代表一行或一段,写下一个标签时,自动另起一行)
文字倾斜标签:i、em
文字加粗标签:b、strong
(可嵌套使用)
<i>
<b>文字倾斜又加粗</b>
</i>
<b>
<i>文字倾斜又加粗</i>
</b>
<em>文字倾斜</em>
<strong>文字加粗</strong>
换行标签:br
<br>
水平线标签:hr
<hr>
行内文本标签:span
<span>我的京东</span> | <span>京东会员</span> | <span>登录  注册
### 注意:
html页面敲任意多个空格恒等于一个空格。
html中一个空格可以用下列两种方式表示 或者 
表示一个像素(px)单位的空格
 表示一个汉字的宽度,一个 =16
超链接和图片
图片标签:img
src:1.可以写入链接。2.可以写本地图片路径
title:鼠标放在图片上可以提示文字
alt:当图片不显示时,显示文字
width、height:能够修改图片、标签盒子等的显示宽度和高度
超链接标签:a
href:1.引入在线连接 2.可以引入本地文件(html文件) 3.可以引入id选择器
target:1._self:当前页标签页跳转(默认)。2._blank:新的标签页跳转。
下面是将图片变为可点击的超链接(举例为动漫:一人之下)
<a href="https://yrzx.qq.com/act/2890/a20200518xz/index.html"
target="_blank"><img src="https://game.gtimg.cn/images/ulink/act/2890/a20200518xz/bg-kv1.jpg" alt="" width="100px"height="50px">
<p>一人之下手游</p>
</a>
id选择器:实现页面跳转
id属性如何调用:使用#调用id属性
<a href="#top">返回顶部</a>
<a href="#mid">返回中部</a>
列表和内联框架
iframe:内联框架
iframe:经常被用在登录、注册页面
<iframe src="https://www.bilibili.com/" width="1300px" height="400px"></iframe>
列表:有序列表ol、无序列表ul
列表中的内容放在li标签
列表在网站中主要被用来做下拉菜单和展示同一类内容
<ul>
<p>千锋成都校区学科一览</p>
<li>Java</li>
<li>前端</li>
<li>python</li>
<li>UI</li>
<li>物联网</li>
</ul>
<ol>
<p>千锋成都校区学科一览</p>
<li>Java</li>
<li>前端</li>
<li>python</li>
<li>UI</li>
<li>物联网</li>
</ol>
input标签
input:默认是一个文本框,但是通过修改type属性的值可以将input构造成不同的形式
palceholder:输入框中的提示性文字
maxlength:限制输入内容的长度
value:当input为按钮时,在按钮上显示文字
redio:单选框
name:告诉系统两个单选框属于同一类
将单选框中的id属性值设置为和lable标签中的for属性值相同,表示相关联.
<input type="text"><br>
<span>密码:</span>
<input type="password" placeholder="请输入密码" maxlength="5">
<input type="submit" value="登录"><br>
<input type="color">
<input type="file">
<input type="date">
<input type="time">
<br>
<p>请选择你的性别:</p>
<input type="radio" name="gender" id="gender1"><label for="gender1">男</label>
<input type="radio" name="gender" id="gender2"><label for="gender2">女</label>
checkbox:复选框
<p>今晚吃啥?</p>
<input type="checkbox" name="food" id="one"><label for="one">面条</label>
<input type="checkbox" name="food" id="two"><label for="two">炒菜</label>
<input type="checkbox" name="food" id="three"><label for="three">火锅</label>
<input type="checkbox" name="food" id="four"><label for="four">水饺</label>