1.框架和环境
1.首先准备vscode的环境
答:(就在电脑自带的商城就可以下载)正常安装就好
2.为什么要用vscode
答:vscode是前端程序员很喜欢的一个软件,因为里面有不同种类的插件供我们下载,提高开发效率
3.HTML的基本框架
下载完成后,新建一个文件夹,在vscode中打开文件夹,新建一个以.html结尾的文件,在文件内输入一个英文的!,点击回车就会出现HTML的基本框架
4. 对框架的介绍
-
<!DOCTYPE html>: 这是一个文档类型声明，它告诉浏览器正在使用HTML5标准来解释页面内容。 -
<html lang="en">: 这是HTML文档的根元素，表示整个文档的开始。lang属性定义了文档的语言，这里是英语（"en"表示英语）。 -
<head>: 这是文档头部的部分，通常包含了页面的元数据和引用的外部资源。在这个示例中，你可以在<head>标签中添加页面标题、链接到CSS文件、JavaScript文件，以及其他元数据。 -
<meta charset="UTF-8">: 这个元标记定义了文档的字符编码，这里使用UTF-8编码，适用于包括英语在内的大多数语言。 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 这个meta标签通常用于响应式设计，确保页面能够适应不同设备的屏幕大小。width=device-width表示页面宽度应该与设备宽度一致，initial-scale=1.0表示初始缩放级别为1.0，即不进行缩放。 -
<title>Document</title>: 这是文档的标题，显示在浏览器标签栏上。你可以将Document替换为你网页的实际标题。 -
<body>: 这是文档的主体部分，包括页面上显示的内容，如文本、图像、链接等。你可以在<body>标签中添加网页的实际内容.
5.了解下HTML的注释
答: 注释就是ctrl+/,在HTML里<!-- 注释内容-->,注释内容不会被当作程序解读,会自动跳过.
2.对标签的学习
1. 结构说明:
1.标签有<,>,/,英文单词组成,并且把标签中<>包括起来的英文单词或字母称为标签名
2.常见标签由两部分组成我们成为双标签,前部分叫开始标签,后部分叫结束标签.两部分之间包裹内容 例:<strong>内容</strong>
3.少数标签由一部分的组成,我们称之为:单标签,自成一体,无法包裹内容 例:<br>
2.标题标签<h1></h1>
1.标题标签一共有六个(根据需要来选择)(h7就和正常的文本一样了)
特点:1.文字都有加粗,2.文字都有变大从h1->h6文字逐渐变小,3.独占一行
3.段落标签<p></p>
场景:在新闻和文章页面中,用于分段显示
语义:段落
特点:1.段落之间存在间隙.2.独占一行
4.换行标签<br>和水平线标签<hr>
<br>为了换行,<hr>为了添加水平线
5.文本格式化标签
1.<b></b> <strong></strong> 加粗
2.<u></u> <ins></ins> 下划线
3.<i></i> <em></em> 倾斜
4.<s></s> <del></del> 删除线
这里看似好像同样的效果,但是1部分的是为了给用户看的,告诉用户这个地方加粗了.2部分是为了给程序看的.他们在以后想修改代码的时候会注意一下.别弄错了
6.图片标签<img>
标签里面可以有很多个属性,每个属性用空格隔开
- src：表示要显示的图像的路径，是必须要设置的属性
- alt：表示图像的替代文本，当图像无法正常显示时，该属性的文本会显示在图像的位置；
- title：表示鼠标悬浮于图像上时显示的文本；
- width：表示图像的宽度；
- height：表示图像的高度；(可以width和height可以只写一个另一个自适应)
src:有绝对路径和相对路径.
绝对路径:1.网址(不能上网就打不开) 2.从盘符开始的路径(编写太麻烦.你的图片在E盘,别的人没有这个E盘 例:C:\Frond_end\HTML_CSS\imge\test.jpg.如果别人的图片不在这别人访问不到.)
相对路径:就是相对与你编写了HTML文件所对应的路径 ./imge/test.jpg本例的相对路径
7.音频标签<audio></audio>和视频标签<video></video>
- src：指定要播放的音频文件的URL
- controls：显示一个音频控制条，包括播放/暂停按钮、音量控制和进度条(你不写就没有)
- autoplay：设置音频文件加载完成后自动播放
- loop：设置音频文件循环播放
- preload：规定在页面加载时是否预加载音频文件。可设置为“none”、“auto”或“metadata”
音频:最好都用.mp3格式的其他格式可能会有兼容性.视频的属性和上面相同只不过把标签换了一下这里就不演示了
8.超链接<a></a>
9.列表标签
分为:无序列表,有序列表,自定义列表
1.无序列表<ul><li></li></ul>
2.有序列表<ol><li></li></ol>
3.自定义列表<dl><dt></dt><dd></dd></dl>
样式不好看,等后期讲到CSS的时候,再为其添加样式.
10.表格标签
表格标签:table>tr>td
table是定义表格的,tr是定义行,td定义每行里面有几个内容
1.caption标签表格标题
2.border表格边框默认为0
3.width宽度,height高度只写一个默认为自适应
4.表格结构标签thead,tbody,tfood,后期可以加入css样式,
5.td->th.用th书写表格头可自带样式(下面是原程序,和修饰过的程序)
2.表格的合并
步骤:1.明确合并那几个单元格
2.通过左上原则,确定保留谁删除谁
上下合并 -> 只保留最上的,删除其他的
左右合并 -> 只保留最左的.删除其他的
rowspan 跨行合并 colspan 跨列合并
注意:刚刚上面我们有说过标签结构你还记得吗?就是thead,tbody,tfood.如果你写了标签结构,那么你一定要注意,只有在同一个标签结构中才可以合并
11.表单标签:
使用的场景:登录页面,注册页面,搜索框会用到,其他的地方基本不会用到,但是对于新手来说,其实基本用不到这个功能,学完后,如果大家忘了以后回来在翻翻就ok
1.text类型:文本框,可以placeho做提示占位符
2.password类型:密码,可以placeho做提示占位符
3.radio单选框,一定要加上name属性,否则实现不了单选
4.checkbox复选框,也要加上那么属性
5.file文件:如果要上传多个文件要加上 multiple
6.只有在form标签中才能有效
submit类型:提交此form
reset类型:重置此form表单中的数据
botton类型:普通按钮 可以通过value来修改或者是添加名称
7.button标签
<button>按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
8.下拉标签select>option 可以用selected设置默认值
9.文本域标签<textarea></textarea>
10.lable标签
有两种写法
<input type="radio" id="nan"> <label for="nan">男</label>
<label><input type="radio">男 </label>
12.语义化标签
1.div 块级元素
2.span 行内元素
3.还有一些手机端才会用到的标签名例如header,nav,客户端开发用不到,我就不写了
13.字符实体
常用的也就只有 其他的用的时候再查(其他的基本用不到)
3.两个练习:
制作一个学生信息表格和一个提交表单(如果你觉得表单对齐不公正可以加入table元素)
当你完成了这两个基本HTML基本东西就学的差不多了剩下的交给css吧,初学者看到这么多标签可能记不住,这个不用担心,你回顾两边照常学css就好,后面会熟悉的
总结:可能看完这篇博客,当别人问你你学会了HTML了吗?如果你这时候已经掌握了HTML常见的标签属性并且可以运用其做一些简单的页面骨架,你就可以自信的告诉别人你学会了!!!!!!
4.代码
下面是本博客佩戴的所有代码(不包括最后的两个例题)前面的都被我注释掉了,想运行的对应解开就好了 (谢谢你们的观看有不对可以向我提出来哈,给博主一个点赞加收藏吧没事的时候复习复习)
<!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>
<!-- <h1>文章标题</h1>
<h2>文章标题</h2>
<h3>文章标题</h3>
<h4>文章标题</h4>
<h5>文章标题</h5>
<h6>文章标题</h6>
<h7>文章标题</h7>hello
<p>昨日，新疆、内蒙古等地部分地区出现雨雪天气，华北、黄淮等地出现雾或霾天气。
预计未来三天，新疆北部及东北地区等地关注暴雪对交通出行、农牧业等的影响；
华北黄淮等地关注雾或霾天气对交通出行、人体健康等的影响。</p>
<p>昨日，新疆、内蒙古等地部分地区出现雨雪天气，华北、黄淮等地出现雾或霾天气。
预计未来三天，新疆北部及东北地区等地关注暴雪对交通出行、农牧业等的影响；
华北黄淮等地关注雾或霾天气对交通出行、人体健康等的影响。</p>
<hr>
昨日，新疆、内蒙古等地部分地区出现雨<br>雪天气，华北、黄淮等地出现雾或霾天气
<hr> -->
<!-- 1部分 2部分 -->
<!-- <b>你好</b> <strong>你好</strong> 加粗<br>
<u>你好</u> <ins>你好</ins> 下划线<br>
<i>你好</i> <em>你好</em> 倾斜<br>
<s>你好</s> <del>你好</del> 删除线<br> -->
<!-- 这个无法正常显示的原因是没有-->
<!-- <img src="test.jpg" alt="图片">
<br>
<img src="./img/test.jpg" alt="图片" width="200dp" height="200dp">
<br>
<img src="./img/test.jpg" alt="图片" width="200dp" title="hello"> -->
<!-- 啥也没有-->
<!-- <audio src="./audio/学猫叫.mp3"></audio>
<audio src="./audio/学猫叫.mp3" controls></audio>
<audio src="./audio/学猫叫.mp3" controls autoplay></audio>
<audio src="./audio/学猫叫.mp3" controls loop></audio> -->
<!-- <a href="https://www.baidu.com/">百度</a>
<a href="./第一个html文档.html">相对于此页面你所编写的其他页面的位置</a>
<a href="#">空连接,可以先用#代替</a> -->
<!-- 新打开页面-->
<!-- <a href="https://www.baidu.com/" target="_blank">百度</a> -->
<!-- 当前页面(覆盖原网页)-->
<!-- <a href="https://www.baidu.com/" target="_self">百度</a> -->
<!-- <h2>水果列表</h2>
<ul>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
<h2>成绩排行</h2>
<ol>
<li>90分</li>
<li>90分</li>
<li>90分</li>
<li>90分</li>
<li>90分</li>
</ol>
<dl>
<dt>帮助中心</dt>
<dl>hello</dl>
<dl>hello</dl>
<dl>hello</dl>
</dl> -->
<!-- <table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>男</td>
</tr>
</table>
<hr>
<table border="1" width="300" height="300">
<caption>
<strong>学生统计表</strong>
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>11</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>李四</td>
<td>212</td>
<td>男</td>
</tr>
</tfoot>
</table> -->
<!-- <table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>212</td>
<td>男</td>
</tr>
<tr>
<td>HELLO</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>11</td>
<td rowspan="2">男</td>
</tr>
<tr>
<td>李四</td>
<td>212</td>
</tr>
<tr>
<td>HELLO</td>
<td colspan="2">hello</td>
</tr>
</table> -->
<!-- 文本框:<input type="text"><br>
文本框:<input type="text" placeholder="请输入用户名"><br>
密码:<input type="password"><br>
密码:<input type="password" placeholder="请输入密码"><br>
单选框:<input type="radio"><br>
单选框:<input type="radio">男 <input type="radio">女<br>
单选框:<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女<br>
多选框:<input type="checkbox"><br>
多选框:<input type="checkbox" name="hobby">洗澡<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">吃饭<br>
上传文件:<input type="file"><br>
上传文件:<input type="file" multiple><br>
<hr>
<form action="">
文本框:<input type="text" placeholder="请输入用户名"><br>
密码:<input type="password" placeholder="请输入密码"><br>
<input type="submit">
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="按钮">
</form>
<hr>
<form action="">
文本框:<input type="text" placeholder="请输入用户名"><br>
密码:<input type="password" placeholder="请输入密码"><br>
<button>按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form> -->
<!-- <select>
<option>北京</option>
<option>北京</option>
<option>北京</option>
<option>北京</option>
<option selected>深沉</option>
</select>
<textarea></textarea> -->
<!-- 第一种写法 -->
<!-- <input type="radio" id="nan"> <label for="nan">男</label> -->
<!-- 第二种写法 -->
<!-- <label><input type="radio">男 </label>
<label><input type="radio">女</label> -->
<!-- 普通文字
<div>这是div标签</div>
<div>这是div标签</div>
<span>这是span标签</span>
<span>这是span标签</span>
<p>哈哈哈哈 哈哈哈哈哈哈哈</p>
<p>哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p> -->
</body>
</html>
扫一扫
8710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
