前端HTML5基础
作者：互联网
准备阶段：
前端软件：visual studio code
笔记软件：Typora
安装插件：
前端的框架代码
<html>
<head>
<title>标题</title>
</head>
<body>
主要内容
</body>
</html>
说明：
<html></html>可以比喻成一个人
<head></head>是人的头部
<title><title>是人的眼睛，里面主要写页面的头部标题，如下图所示位置
<body></body>是人的身体，人最重要的部位，html5的主要代码就是写在这里面，也是页面上显示的内容。
一般代码格式都是：<代码>书写内容</代码>
标签：
标题标签
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
效果图：
介绍常用标签(普通标签)
<p>今天天气怎么样？</p>
文本加粗标签
<b>今天天气怎么样？</b>
强调文字标签(加粗)
<strong>今天天气怎么样？</strong>
斜体标签
<i>今天天气怎么样？</i>
一般强调标签(斜体)
<em>今天天气怎么样？</em>
下划线标签
<u>今天天气怎么样？</u>
超链接标签
<a href="跳转的页面名称">超链接</a>
href后面的引号中可以放：
1、网址，比如百度连接
<a href="http://www.baidu.com">百度</a>
2、自己制作的页面名称
<a href="HelloWorld.html">跳转</a>
3、某个标签的id名称(锚点的使用，点击可以直接跳转锚点内容所在的位置)
<a href="demo">跳转锚点</a>
换行标签
</br>
特殊符号：
空格： (空半格)  (空一格) (不断行空格)
<(小于号) >(大于号)
&(符号&)
"(引号)
®(已注册)
©(版权)
™(版权)
图片
<img src="图片存放路径" />
移动图片位置：
1、style="margin: 15px 20px 25px 30px;"四个数字分别代表上下左右的距离
<img src="图片存放路径" style="margin: 15px 20px 25px 30px;"/>
2、style="padding: 15px 20px 25px 30px;"
3、style=" position:absolute; top:200px; left: 900px;"
音频标签
controls:控制按钮 loop:循环播放 autoplay:自动播放 src后面的引号里是音乐存放的地址路径
<audio src="music/aa.mp3" controls loop autoplay alt="">
视频标签
<video src="视频存放路径" controls height="400px" width="400px"></video>
height：高度。width：宽度。
排版类型标签：
1、ol有序列表
type:规定列表的项目符号的类型： A a 1 I
<ol type="I">
<li>111</li>
<li>2222</li>
<li>333</li>
</ol>
2、ul无序列表
list-style:none:去掉圆点 circle圆圈 disc实心圆 square正方形
<ul style="list-style:none">
<li type="circle">111</li>
<li type="disc">222</li>
<li type="square">333</li>
</ul>
表格
1、格式
<table>
<thead>
<tr>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
table：表格标签
thead：表头单元格（头，可不要）
th：表头中的单元格
tbody：表格的主体（身体，主要部分）
tr：表格中的行（纵行）
td：标准单元格（横行）
主要格式(其余可要可不要)
<table>
<tr>
<td>内容</td>
</tr>
</table>
2、举例
两行三列的表格
<table>
<tr> 第一行
<td>1</td> 第一列
<td>2</td> 第二列
<td>3</td> 第三列
</tr>
<tr> 第二行
<td>4</td> 第一列
<td>5</td> 第二列
<td>6</td> 第三列
</tr>
</table>
3、表格中简单属性
align：水平位置
valign：垂直位置(top、middle、bottom)
colspan：横向合并单元格
rowspan：纵向合并单元格
cellpadding：单元格之间的距离
cellspacing：单元格边框与内容之间的距离
border：设置边框(boeder="")
border-top：设置上边框
dashed：虚线
bycolor：背景颜色
background：背景图片(background="img/bb.jpg")
<table cellpadding="5px" cellspacing="5px">
<thead>
<tr>
<th>111</th>
<th>222</th>
<th>333</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">444</td>
<td rowspan="2">666</td>
</tr>
<tr>
<td>777</td>
<td>888</td>
</tr>
</tbody>
</table>
练习题：
用代码画出下图样式的表格
表单
type可以改变表单的样式
文本框
<input type="text" value="aaaa" />
value：初始显示内容
效果图：
密码框(输入的内容会被加密)
<input type="password"/>
数字框(只能输入数字)
<input type="number"/>
最右边的小三角可以调数字的大小
日历框(根据你电脑上的日期显示日历)
<input type="datetime-local"/>
颜色框
<input type="color"/>
单选框
<input type="radio" checked />男
<input type="radio" />女
checked：初始就勾选上
复选框
选择
<input type="checkbox" checked/>苹果
<input type="checkbox" />香蕉
<input type="checkbox" />西瓜
<input type="checkbox" />桃子
滑块(可滑动)
<input type="range" />
选择框
<select>
<option">城市</option>
<option>武汉</option>
<option>成都</option>
<option>重庆</option>
</select>
搜素框
<input type="search"/>
文本框(带滑轮)
<textarea name="" id="" cols="30" rows="10"></textarea>
文件框
<input type="file" name="image" id=""/>
既要数据可以绑定 同时这个框不被人看到
<input type="hidden" />
按钮(无功能，点击无效)
value：显示文字 disabled：禁用按钮
<input type="button" value="添加" disabled>
<button type="button">删除</button>
按钮(有功能)
<input type="submit" value="跳转"/>
重置按钮
<input type="reset" value="重置"/>
<fieldset>
<legend>个人资料</legend>
<!-- 搜素框 -->
<input type="search">
</fieldset>
页面框架
可以把两个页面放在同一个页面中
<iframe src="demo02.html" frameborder="0" style="width: 500px;height: 500px;"></iframe>
<iframe src="demo03.html" frameborder="0" style="width: 500px;height: 500px;"></iframe>
常用快捷键
ctrl+S 保存
ctrl+C 复制
ctrl+V 粘贴
ctrl+X 剪切
ctrl+A 全选
ctrl+Z 后撤
Alt+B 运行
最后注意事项
保持良好的习惯：
1、html5中的代码大部分都是成对出现的，在写代码的时候最好成对的写出，以防漏写。
比如<a></a>，以<a>开头，必须以</a>结尾，两者缺一不可。
2、在书写代码的时候最好注意代码排版，确保代码的整洁，以防排版不好容易混乱。
3、代码写完后必须保存才能不会丢失，保存快捷键ctrl+S，最好写一行代码就保存一次，以防电脑突然关机，以至于代码没有保存而白忙活了好久。
标签：表格,ctrl,标签,前端,单元格,基础,今天天气,HTML5,代码 来源： https://blog.csdn.net/qq_53030245/article/details/119252329