<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./.jpg" width="100" height="100" title="贵哥牛逼" alt="李文">
</body>
</html>
核心；相反的，title代触碰到图片显示的是什么 alt代表图片不能显示的时候出现的是什么
br:核心;在于你写多少个br就会换多少行.
路径 什么是相对什么又是绝对路径呢？
核心：相对路径是把，是在自己所在的位置开始找。
绝对路径是;从指定的盘开始查找.
比如：记住，最重要的路径核心是：如果要查找当前路径的上上一级的话,比如当前文件是1.html，那该怎么找？
…/…/1.html就行了.
…/代表上一级。
注意：不能跨盘找.
a标签;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_self" title="贵哥牛逼" >666</a>
</body>
</html>
//核心;一些浏览器不兼容，_self代表不新建页面，_blank代表新建一个页面打开.
base：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_self">666</a>
</body>
</html>
_self是在本页面打开,
假标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#">666666666</a>
<a href="javascript:">666</a>
</body>
</html>
假标签代表不会跳转的标签
3.假链接的格式:
1.#
2.javascript:
锚点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#cyg">我想去cyg所在的位置</a>
</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="cyg">cyg所在的位置</h1>
</body>
</html>
核心在于：id代表想去的位置。
我想去cyg所在的位置
代表链接到想去的位置在哪？
无序列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<h3>中国的城市</h3>
<ul>
<li>琼海</li>
<li>三亚</li>
<li>海口</li>
</ul>
</body>
</html>
核心;在于是一个整体，不分先后.ul和li
有序列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>cyg</li>
<li>lw</li>
</ol>
</body>
</html>
核心是ol和li是一个整体。并且以1为开始.
定义列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dt>cyg</dt>
<dd>cyg</dd>
<dt>cyg</dt>
<dd>cyg</dd>
</dl>
</body>
</html>
核心;dl dt dd是一个组合标签。dt是标题，dd是描述信息，dl相当于·ul把。要想组合成定义标签必须dl+dt或者dd。
表格:
<!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>
<table border="1">
<tr>
<td>666</td>
<td>666</td>
<td>666</td>
</tr>
<tr>
<td>777</td>
<td>777</td>
<td>777</td>
</tr>
</table>
</body>
</html>
核心：table代表告诉系统这是一个表格，tr代表一行表格。td代表一个表格。
问题？要想加一行表格怎么办？
加tr 和td就行了.
记住，核心table tr td是一起出现的，单个没有意义。
表格属性:
<!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>
<table border="1" width="666" height="600" align="center" cellspacing="20px" cellpadding="60">
<tr valign="bottom">
<td valign="top">cyg666</td>
<td>cyg666</td>
</tr>
<tr align="center">
<td align="right">666</td>
<td>666</td>
</tr>
</table>
</body>
</html>
核心：valign是只能设置垂直方向的（top bottom）只能td tr用。align是只能设置水平方向的（left center right）那个属性都能用。
cellspacing=“20px”;代表边框与边框的距离。
cellpadding="60"代表单元格的边框与单元格里面的文字的距离.
细线表格：
<!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>
<table bgcolor="yellow" cellspacing="20">
<tr bgcolor="red">
<td>666</td>
<td>666</td>
</tr>
<tr bgcolor="white">
<td>666</td>
<td>666</td>
</tr>
</table>
</body>
</html>
表格的结构：
<!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>
<table border="1px" width="500px" height="200px">
<caption>陈业贵</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>陈业贵</td>
<td>李文</td>
</tr>
<tr>
<td>陈业贵</td>
<td>李文</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>666</td>
<td>999</td>
</tr>
</tfoot>
</body>
</html>
合并：
<!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>
<table border="1px" align="center" width="500px" height="300px">
<tr>
<td rowspan="2">666</td>
<td>666</td>
<td>666</td>
</tr>
<tr>
<!--<td>666</td>-->
<td>666</td>
<td>666</td>
</tr>
<tr>
<td>666</td>
<td>666</td>
<td>666</td>
</tr>
</table>
</body>
</html>
<!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>
<table border="1px" align="center" width="500px" height="300px">
<tr>
<td colspan="2">666</td>
<!--<td>666</td>-->
<td>666</td>
</tr>
<tr>
<td>666</td>
<td>666</td>
<td>666</td>
</tr>
<tr>
<td>666</td>
<td>666</td>
<td>666</td>
</tr>
</table>
</body>
</html>
核心：正所谓两者不可兼得。所以合并后。就要删除被合并的哪一个。rowspan删除列。colspan代表删除行。
表单：
<!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>
<form>
<input type="text" name="" id=""><br>
<input type="password" name="" id=""> <br>
<input type="text" name="" id="" value="cyg"><br>
<input type="password" name="" id="" value="qq62700167"> <br>
<input type="radio" name="name" id="" checked="checked">44
<input type="radio" name="name" id="" checked="checked">444
<input type="radio" name="name" id="" checked="checked">44
<br>
<input type="checkbox" checked="checked">666
<input type="checkbox">666
<input type="checkbox" checked="checked">666
</form>
</body>
</html>
核心;:单选框每一个写相同的name，就可以互斥了。为什么，因为代表唯一的啊。
默认值在value里面写哈。
<!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>
<form action="https://www.baidu.com/?tn=48021271_8_hao_pg
">
<input type="button" value="我是按钮" οnclick="alert('cyg')">
<input type="image" src="./1.jpg" οnclick="alert('cyg')">
<input type="text" name="" id="">
<input type="reset" value="清空">
<input type="hidden" name="cc" value="666">
</form>
</body>
</html>
核心：不要写错哦
Label标签：
<!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>
<form action="">
<label for="cyg">
666666<input type="text" name="" id="cyg">
</label>
<label for="liwen">
<br>
账号:<input type="text" id="liwen">
</label><br>
</form>
</body>
</html>
核心：记住，表单写在label标签里面，然后label为for，input id。两方相同(for id)就行了.
Datalist:
<!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>
<input type="text" name="" id="" list="cyg">
<datalist id="cyg">
<option value="c">c</option>
<option value="y">y</option>
<option value="g">g</option>
<option value="l">l</option>
<option value="w">w</option>
</datalist>
</body>
</html>
点击就显示了
核心：输入框的list里面的值是datalist里面的id的值.
h5表单标签：
<!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>
<input type="email"><!--类型有:url number date color submit-->
</body>
</html>
表单标签3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea
{
resize: none;/*用户无法调整元素的尺寸。*/
}
</style>
</head>
<body>
<!--
1.select标签
作用: 用于定义下拉列表
-->
<!--<select>
<optgroup label="陈业贵">
<option>20</option>
</optgroup>
</select>
-->
<!--<textarea name="" id="" cols="300" rows="10">
</textarea>
-->
<select>
<optgroup label="数字">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
<option>555</option>
</optgroup>
<optgroup label="字母">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<optione>e</option>
</optgroup>
</select>
</body>
</html>
video标签：
video第二种方式：
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
audio标签：
<audio autoplay="autoplay" controls="controls">
<source src="images/yinyue.mp3" type="audio/mp3">
</audio>
详情和概要标签?：
<!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>
<details>
<summary>陈业贵</summary>
6666666666666666666666666666666666666
</details>
</body>
</html>
//marquee标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>39-marquee标签</title>
<style>
marquee {
width:200px;
height:200px;
background-color: skyblue;
}
</style>
</head>
<body>
<!--滚动方向-->
<marquee>随便写点内容</marquee>
<marquee direction="right">随便写点内容</marquee>
<marquee direction="up">随便写点内容</marquee>
<marquee direction="down">随便写点内容</marquee>
<hr>
<!--设置滚动速度-->
<marquee scrollamount="1">随便写点内容</marquee>
<marquee scrollamount="100">随便写点内容</marquee>
<hr>
<!--设置滚动次数-->
<marquee loop="1">随便写点内容</marquee>
<hr>
<!--设置滚动类型-->
<marquee behavior="slide">随便写点内容</marquee>
<marquee behavior="alternate">随便写点内容</marquee>
<marquee>
<img src="images/NJ.jpg" width="50px">
</marquee>
</body>
</html>
//字符实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>41-字符实体</title>
</head>
<body>
<p>我 爱你</p>
<p>到此为止我们的HTML的基础标签就学习完毕了, 例如我们学习了<h1>标签, <table>标签, <img>标签....</p>
©
</body>
</html>
4492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
