一、HTML基础
目标:
- html结构能做出那些页面
- 网页排版
- 图像标签:图文并发
- 超链接
1.1、什么是HTML
HTML : Hyper Text MarkUp Language (超文本标记语言)
文本:文字、有格式的文本
超文本:文字,图片,音频,视频,动画、定位…….
标记语言 : <>
1.2、HTML的基本结构
学习方式
- 前端、练习、不断的模仿别人的网站!
- 养成规范(代码的规范)
- 前端的学习,就是模仿,这是最快的方式!
- 菜鸟教程、W3cSchool
HTML的基本结构
- 所有的HTML 标签 都以 <> 开始 </> 结尾
- 正常网页的所有内容都需要放在 < body> 标签中;
<!DOCTYPE html>
<html lang="en">
<head>
<!--自闭合标签-->
<meta charset="UTF-8">
<!--正常的标签都是需要成对出现的-->
<title>Title</title>
</head>
<body>
</body>
</html>
1.3、网站的基本标签(重点)
1、标题标签
<!--标题标签 h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
2、段落标签
<p>段落</p>
3、换行标签
<br/>
4、水平线标签
<hr/>
5、字体样式标签
<!--字体样式-->
<strong>马云 (阿里巴巴集团创始人)</strong>
<p>
<em>马云,男,汉族</em> <br>
<em>现担任日本软银董事</em> <br>
<em>1988年毕业于杭州师范学院外语系</em> <br>
<em>....</em> <br>
</p>
6、 特殊符号标签
在这里插入代码片
1.4、图像标签
常见的图片格式: .png .jpg .jpeg .bmp .gif。。。。。
png 会有浏览器兼容问题
一般使用 .jpg .gif多一点
图片:静态资源 单独放
相对路径,绝对路径
相对路径 ../../
绝对路径 https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--标签中带有参数的 key=value -->
<!--
src: 资源图片 : 图片的路径
alt: 图片加载失败,表示图片的问题,也即图片描述
title: 鼠标放在图片上的悬浮提示
width: 宽
height:高
-->
<img src="../statics/images/tx.jpg" alt="图片" title="Java" width="1000" height="1000">
</body>
</html>
1.5、超链接
<!--
超链接:表示从一个地方跳转到另外一个地方 hao123导航
href:要跳转地址
target: 目标打开的窗口,在自己这个当前页面打开,还是在新的页面打开
_self : 在自己的窗口打开
_blank: 在新窗口中打开
和图片嵌套使用
-->
<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->
<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
<img src="../statics/images/bd.png">
</a>
锚链接
- 用于页面间指定位置跳转 : 快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转 :(需要掌握)
锚点
<!--标记A-->
<a name="markerA">A</a>
跳转到锚点
<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>
功能性标签
1.6、块元素、行内元素
块元素
- 无论内容多少,都是独占一行的 (p,h1~h6)
行内元素
- 只根据内容的长度来扩展。 (a,strong,em….)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>
<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>
</body>
</html>
二、列表、表格、媒体元素
无序列表 (ul-li)
有序列表 (ol-li)
自定义列表 (dl-dt-dd)
示例
<!--title-->
<!--无序 ul-li
导航
侧边栏新闻
在文章中,一般会使用它来排列
-->
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>Java</li>
</ul>
<hr>
<!--有序 ol-li
问答试卷、测试题....卷子,或者需要排序的。微博热搜,榜单
-->
<ol>
<li>====</li>
<li>====</li>
<li>====</li>
<li>====</li>
</ol>
<hr>
<!--自定义列表
网站的底部,用于标记项
-->
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>梨子</dd>
<dd>香蕉</dd>
<dd>葡萄</dd>
<dt>水果</dt>
<dd>苹果</dd>
<dd>梨子</dd>
<dd>香蕉</dd>
<dd>葡萄</dd>
</dl>
2.2、表格
基本结构:
- 表格 table
- 行 tr rowspan
- 列 td colspan
- `
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
<table border="1px">
<tr>
<!--rowspan 所跨的行数-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>0</td>
</tr>
<tr>
<td>数学</td>
<td>0</td>
</tr>
</table>
跨列
<table border="1px">
<tr>
<!--实现跨列
colspan 对应的值:就是要跨几列
-->
<td colspan="2">学生成绩</td>
<td>学生成绩</td>
</tr>
<tr>
<!--科目名称-->
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!--成绩-->
<td>数学</td>
<td>100</td>
</tr>
</table>
2.3、音频、视频
音频 audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--音频播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>
</audio>
</body>
</html>
视频 video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<!--video 视频标签
src:视频的路径
controls: 提供播放按钮,进度条、下载按钮、全屏按钮、音量控制
autoplay: 自动播放
loop: 循环播放
-->
<!--<video src="../statics/video/china.mp4" controls autoplay></video>-->
<video controls autoplay>
<source src="../statics/video/china.mp4">
<source src="../statics/video/china.mp4">
</video>
</body>
</html>
2.4、网页结构分析
- 页面的头部
- 页面的主体
- 页面的尾部
html5 标签,没有任何作用,只是让代码结构更好看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这些标签都是一些行业规范-->
<header>
我是头部
</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<article>文章主题</article>
<section> 独立区域 </section>
<footer>
我是尾部
</footer>
</body>
</html>
2.5、内联框架
iframe
<!--iframe 内联框架
src: 地址
-->
<!--<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>-->
<iframe name="mainFrame"></iframe>
<a href="https://www.baidu.com/" target="mainFrame">点击显示</a>
<!--Ajax-->
三、表单(重要)
1、基础表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
提交请求:
携带的参数
key: 控件的name。这个属性不要忘记
get:携带参数,参数可以在url中看到,不安全,大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post:参数不可见、安全,大小没有限制 (表单提交常用方式post)
-->
<!--form 表单
action: 提交地址
method:提交的方式
-->
<form action="test.html" method="post">
<!--输入框
input 标签
name: 必须写上
type:
text : 文本框
password: 密码框
submit: 提交按钮
reset: 重置
-->
<p>名字:<input type="text" name="username"> </p>
<p>密码:<input type="password" name="password"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
2、表单元素
所有表单元素都要写在form表单中,必须加上name属性,否则提交的时候取不到值!
- 文本框(最重要的)
<!--文本框 type="text"
value :文本框默认的初始值
size: 文本框的长度
maxlength: 文本框的最大输入长度
-->
<p>
<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
- 密码框
<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
<input type="password" name="pwd" size="20">
</p>
- 单选按钮
<!--单选框type="radio"
value: 表单提交的值
name: 名字相同,则自动分组,必须要分组
checked: 默认选中
disabled: 禁用
注意事项:默认没有值,需要再input type="radio" 后增加单选框的属性
-->
<p>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</p>
- 复选框
<!--多选框 type="checkbox"
name: 必填项,如果是分组,则名称一致
value: 表单提交的值
checked: 默认选中
disabled: 禁用
注意事项:默认没有值,需要再input type="checkbox" 后增加多选框的属性
-->
<p>
<input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="music" checked>听音乐
<input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>
- 下拉列表框 select-option
<!--下拉列表框
select
name: 组件名字 必填
size: 显示的数量,默认为1
option: 选项
value 必填
option标签中间写下拉框的值
selected: 默认选中
-->
<select name="科目">
<option value="1"></option>
<option value="2">数学</option>
<option value="3" selected>英语</option>
<option value="4">英语</option>
<option value="5">英语</option>
</select>
- 按钮
<!--按钮
value:按钮上的文字
-->
<p>
<!--提交-->
<input type="submit" value="登录">
<!--重置--使用-->
<input type="reset" value="清空">
<!--普通按钮:一般后来我们会和javascript结合使用,点击按钮xxx-->
<input type="button" value="点我">
<!--图片按钮
type="image"
src:图片的路径
-->
<input type="image" src="../statics/images/bd.png">
</p>
- 文本域
<!--文本域 cols rows-->
<textarea name="textarea" cols="10" rows="10">
</textarea>
- 文件域
<!--
表单,需要支持提交复杂文件 enctype="multipart/form-data"
未来:文件上传会用到
-->
<form action="test.html" method="get" enctype="multipart/form-data">
<input type="file" name="video">
</form>
- 邮箱(验证)
<!--邮箱-->
<p>
邮箱:<input type="email" name="email">
</p>
- 网址(基本验证)
<!--url网址-->
<p>
url:<input type="url" name="url">
</p>
- 数字(上下)
<!--数字:商品数量,计数 type="number"
最小值 min="0"
最大值 max="100"
步长 step="10"
-->
<p>
数字:<input type="number" min="0" max="100" step="10">
</p>
- 滑块(可调节)
<!--滑块
默认值0~100
-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
- 搜索框(带关闭按钮)
<!--搜索框-->
<p>
搜索: <input type="search" name="search">
</p>
3、表单的应用
- 隐藏域
<!--隐藏域-->
<p>
<input type="hidden" name="count" value="10">
</p>
- 只读和禁用
<p>
用户名: <input type="text" name="username" readonly>
</p>
<p>
密码: <input type="password" name="pwd" disabled>
</p>
- 标注
<p>
<!--通过 for="name" 来链接到 表单中的指定ID -->
<label for="name">用户名: </label>
<input type="text" name="username" id="name">
</p>
初级表单验证
默认提示
<!--placeholder="必须是url格式" 默认提示,告诉用户应该这么做-->
用户名:
<input type="url" name="username" placeholder="必须是url格式">
必填
<p>
<!--required必须要填写这个字段-->
密码: <input type="password" name="pwd" required>
</p>
正则表达式
<p>
<!--pattern:正则表达式-->
手机号码: <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>