学html看这一篇就够了

最新推荐文章于 2021-04-28 12:27:19 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2021-04-28 12:27:19 发布

阅读量680

点赞数 2

本文链接：https://blog.csdn.net/qq_37805832/article/details/108160753

版权

<!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>我&nbsp;&nbsp;&nbsp;爱你</p>

<p>到此为止我们的HTML的基础标签就学习完毕了, 例如我们学习了&lt;h1&gt;标签, &lt;table&gt;标签, &lt;img&gt;标签....</p>

&copy;
</body>
</html>