html基础
- vscode安装
- 3mate标签
- 4语义化标签h1 ~ h6 hgroup p blockquote q
- 5语义化标签 块元素 行内元素
- 6语义化标签header main footer nav aside article section div span
- 7列表 无序列表ol 无序列表ul li dl dt dd
- 8超链接a href
- 10超链接target _self _blank id属性 javascrlipt:;
- 11图片标签img src alt width height jpeg(jpg) gif png webp base64
- 12内联框架iframe src frameborder
- 13音视屏文件audio controls autoplay loop source src
- 14图片超链接
- 01.表格table tr td
- 02.长表格thead tbody
- 03.表格的样式 border-spacing border-collapse vertical-align tbody
- 04.表单form action name checked value
- 05.表单autocomplete="off" readonly disabled autofocus submit reset button
- bit-html
vscode安装
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1安装vscode2安装中文语言包
3尝试安装ayu主题
4将一个目录作为项目目录大
5创建一个新网页
6安装live server
7尝试通过live server来运行网页8设置代码自动存储
-->
哈哈呱呱
</body>
</html>
3mate标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <meta charset="UTF-8"
meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset指定网页的字符集
name 指定的数据的名称content指定的数据的内容
keywords表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,u<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购
description用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示
-->
<meta name="keywords" content="HTML5,前端,cSS3">
<meta name="description" content="这是一个非常不错的网站">
<!-- 将页面重定向到另一个网站 -->
<!-- <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> -->
</head>
<body>
</body>
</html>
4语义化标签h1 ~ h6 hgroup p blockquote q
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
标题标签:
h1 ~ h6一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1一般情况下标题标签只会使用到h1~h3，h4~h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素（block element)!!!
不独占一行的叫行内元素
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup -->
<hgroup>
<h1>123</h1>
<h2>456</h2>
</hgroup>
<!--
p标签中的内容表示页面中的一个段落
p也是一个块元素
-->
<p>p标签中的内容就表示一个段落</p>
<!--
em标签用于表示语音语调的一个加重,即：斜体
在页面中不会独占一行的元素称为行内元素（inline element)
-->
<p>今天天气<em>真</em>不错！</p>
<!-- strong表示强调，重要内容!，即：加粗 -->
<p>今天必须<strong>完成作业！</strong></p>
鲁迅说：
<!-- blockquote：表示一个长引用 -->
<blockquote>
这句话我从来没有说过
</blockquote>
<!-- q 表示一个短引用 -->
子曰<q>乐呵乐呵</q>
<!-- br标签表示页面换行 -->
<br>
123456
</body>
</html>
5语义化标签 块元素 行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素（block element）
- 在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
... ...
-->
<p>
<h1>哈哈</h1>
</p>
</body>
</html>
<h1>我就要写在html标签的外部！</h1>
6语义化标签header main footer nav aside article section div span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何的语义，一般用于在网页中选中文字
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</body>
</html>
7列表 无序列表ol 无序列表ul li dl dt dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表（ list)
1、铅笔
2、尺子
3、橡皮
在html中也可以创建列表，html列表一共有三种:
1、有序列表
2、无序列表
3、定义列表
有序列表，使用ol标签来创建有序列表
使用li表示列表项
无序列表，使用ul标签来创建无序列表
使用li表示列表项
定义列表，使用dl标签来创建一个定义列表
使用dt任来表示定义的内容
使用dd来对内容进行解释说明
列表是可以嵌套的
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
8超链接a href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其他页面，
或者是当前页面的其他的位置
使用a标签来定义超链接
属性:
href指定跳转的目标路径
-值可以是一个外部网站的地址
-也可以写一个内部页面的地址
超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
-->
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!-- <a href="https://www.baidu123.com">超链接</a> -->
<!-- 相对路径 -->
<a href="列表7.html">超链接2</a>
</body>
</html>
10超链接target _self _blank id属性 javascrlipt:;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
target属性，用来指定超链接打开的位置
可选值:
_self 默认值在当前页面中打开超链接
_blank在一个新的要么中打开超链接
-->
<a href="7列表.html" target="_blank">超链接</a>
<br><br>
<a href="#bottom">去底部</a>
<br><br>
<a href="#p4">去第四自然段</a>
<!--
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是转到当前页面的顶部的位置
可以跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值
id属性（唯一不重复的)
-每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性 !!!!!!!!!
-->
<p>1.上世，翻山越岭到邻村看第二遍第三遍，《九九艳阳天》也唱的耳熟能详。</p>
<p>3.上世纪七八十年代， 粤北一些地方都还没有通上电，主要靠煤油灯照明，文化生活极度匮乏,看露天电影成了那时的最大享受第二遍第三遍，《九九艳阳天》也唱的耳熟能详。</p>
<p id="p4">4.上世纪七八主题歌《九九艳阳天》一夜走红，不仅仅因为歌曲描绘了九九时分的艳阳美丽景色，详。</p>
<p>5.上世纪九九艳阳天》也唱的耳熟能详。</p>
<p>6.上世纪七八阳天》一夜走红，英莲，追着电影放映队，翻山越岭到邻村看第二遍第三遍，《九九艳阳天》也唱的耳熟能详。</p>
<p>7.上世纪着天然的天赋。看了一遍还不过瘾，还要惦记着小英莲，追着电影放映队，翻山越岭到邻村看第二遍第三遍，《九九艳阳天》也唱的耳熟能详。</p>
<p>8.上世纪七九九艳阳天》也唱的耳熟能详。</p>
<!-- 使用javascrlipt:;来作为href的属性，此时点击这个超链接什么也不会发生 -->
<a href="javascript:;">这是一个新的超链接</a>
<br><br>
<!-- 开发中可以将#作为超链接的占位符 -->
<a href="#">占位符#</a>
<br><br>
<a id="bottom" href="#">去顶部</a>
</body>
</html>
11图片标签img src alt width height jpeg(jpg) gif png webp base64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素(块和行内元素之间，具有两种元素的特点)
属性:
src属性指定的是外部图片的路径（路径规则和超链接是一样的)
alt图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录识别
width图片的宽度(单位是像素)
height图片的高度
-宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意:
一般情况在pc端，不建议修改图片的大小,需要多大的图片就裁多大但是在移动端，经常需要对图片进行缩放（大图缩小)
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大但是在移动端，经常需要对图片进行缩放(大图缩小)
图片的格式:
jpeg(jpg)
-支持的颜色比较丰富，不支持透明效果，不支持动图-一般用来显示照片
gif
-支持的颜色比较少，支持简单透明，支持动图-颜色单一的图片，动图
png
-支持的颜色丰富，支持复杂透明，不支持动图-颜色丰富，复杂透明图片（专为网页而生)
webp
-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式-它具备其他图片格式的所有优点，而且文件还特别的小
-缺点:兼容性不好
base64
-将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片-—般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
-->
<img src="./photo/bb.jpg" alt="女生">
<img width="1000" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.lemeitu.com%2Fm00%2Fd0%2Fa2%2Fa70fcf5f00e416f9d81fe954e28ab3d2__w.jpg&refer=http%3A%2F%2Fimg.lemeitu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649737017&t=fcad6f6e6511855ec3f138f85115459d">
<img src="base64编码">
</body>
</html>
12内联框架iframe src frameborder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<h1>Hello</h1>
</body>
</html>
13音视屏文件audio controls autoplay loop source src
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性:
controls:是否允许用户控制播放
autoplay:音频文件是否自动播放
-如果设置了autoplay则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop:音乐是否循环播放
-->
<!-- <audio src="source/audio.mp3" controls autoplay loop></audio> -->
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径- -->
<audio controls>
不支持此音频播放，播放失败<!--在下面两个均无法播放时，显示-->
<source src="source/audio.mp3">
<source src="source/audio.mp3">
<embed src="source/audio.mp3" type="audio/mp3" width="200" height="200">
</audio>
<!--
使用video标签来向网页中引入一个视频
-使用方式和audio基本上是一样的
-->
<!--
<video controls>
<source src="./source/flower.webm" >
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video> -->
<video src="./source/flower.mp4" controls loop></video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00340qvh9c" allowFullScreen="true" width="800" height="800"></iframe>
</body>
</html>
14图片超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank"><img src="./photo/bb.jpg" alt="女生"></a>
</body>
</html>
01.表格table tr td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
在现实生活中，我们经常需要使用表格来表示一些格式化数据：
课程表、人名单、成绩单....
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
-->
<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<!-- rowspan 纵向的合并单元格 -->
<td rowspan="3">dd</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td colspan="5">A4</td>
<!--
colspan 横向的合并单元格
-->
</tr>
</table>
</body>
</html>
02.长表格thead tbody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table border="1" width='50%' align="center">
<!--
可以将一个表格分成三个部分：
头部 thead
主体 tbody
底部 tfoot
th 表示头部的单元格
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>
</html>
03.表格的样式 border-spacing border-collapse vertical-align tbody
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
width: 50%;
border: 1px solid black;
margin: 0 auto;
/* border-spacing: 指定边框之间的距离 */
/* border-spacing: 0px; */
/* border-collapse: collapse; 设置边框的合并 */
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 100px;
/* 默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改*/
vertical-align:middle;
text-align: center;
}
/*
如果表格中没有使用tbody而是直接使用tr，
那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
tr不是table的子元素
*/
tbody > tr:nth-child(odd){
background-color: #bfa;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格 td */
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
04.表单form action name checked value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
表单：
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签来创建一个表单
-->
<!--
form的属性
action 表单要提交的服务器的地址
-->
<form action="target.html">
<!--
文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
-->
文本框 <input type="text" name="username">
<br><br>
<!--
密码框
-->
密码框 <input type="password" name="password">
<br><br>
<!--
单选按钮
- 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
-->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!--
多选框
-->
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option><!--select将此元素设为默认值 -->
<option value="iii">选项三</option>
</select>
<br><br>
<!--
提交按钮
-->
<input type="submit" value="注册">
</form>
</body>
</html>
05.表单autocomplete=“off” readonly disabled autofocus submit reset button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="target.html">
<!--
autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
-->
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<!-- <input type="color"> -->
<br><br>
<!-- <input type="email"> -->
<br><br>
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
bit-html
label (可以点击文字选择)
扫一扫
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
