HTML简单笔记

最新推荐文章于 2024-09-10 14:15:01 发布

爱冒险的qπ(s,a)

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量190

点赞数

文章标签： html web

本文链接：https://blog.csdn.net/qq_39949271/article/details/111668724

版权

HTML简单笔记

* 简单标签和结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>First Page</title>
	</head>
	<body>
		Use Hbuilder do first html
	</body>
</html>

1：<!DOCTYPE html> 语言类型声明。

2：<html></html>根标签。

3：<head></head>。

4：<meta>字符集，关键字，内容描述等等，不加“charset”可能出现乱码。（自封闭标签）

5：<title></title>网页标题。

6：<body></body>正文网页主题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Second Page</title>
	</head>
	<body>
		<h1>????</h1>
		<h2>????</h2>
		<h3>????</h3>
		<h4>????</h4>
		<h5>????</h5>
		<h6>????</h6>
	</body>

</html>

7：<h1></h1> 标题只有1-6，h7以后是不会有效果的，标题会自动换行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Second Page</title>
	</head>
	<body>
		在p标签内
		<p>
			段落1的所有内容！段落1的所有内容！	
		</p>
		p标签外：段落2的所有内容！</br>换行！段落2的所有内容！段落2的所有内容！
   	    </br>下划线。<hr/>
	</body>

</html>

8：<p></p>段落标签。

9：</br>换行。

10：<hr/>分割用的下划线。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体样式标签</title>
	</head>
	<body>
		<strong>徐志&nbsp;摩</strong>
		<p>
		<em>1910</em> &lt;年入杭州学堂.&gt;<br>
		<em>1918</em> &quot;年赴美国克拉大学学习银行学。&quot;<br>
		<em>1921</em> 年开始创作新诗。<br>
		<em>1922</em> 年返国后在报刊上发表大量诗文。<br>
		<em>1927</em> 年参加创办新月书店。<br>
		<em>1921</em> 年由南京乘飞机到北平，飞机失事遇难。<br>	
		&copy;版权符号！
		</p>
	</body>
</html>

11：<strong></strong> 加粗，大小和原本文字是一致的，和h4的规格一样。

12：<em></em> 斜体

13：特殊符号在字符串里面，所有连续的空格都是一个空格，同时回车符也显示一个空格。所以特殊字符需要用用手敲上去。

>和< 大于号小于号

  空格

" 引号

© 版权号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>img样式标签</title>
	</head>
	<body>
		<img
		src="E:/Kgc/HTML/FirstDemo/testImg.jpg" 
		alt="加载失败"
		title="E:/Kgc/HTML/FirstDemo/testImg.jpg"
		>
	</body>
</html>

14：<img src="" alt="" title="" width="" height="">图片

src：图片地址

alt：图片替换文字

title：鼠标悬停文字

w和h：长宽。（只加一个的话是等比缩放。可以在数值后+px像素单位，或者百分比进行缩放。）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>img样式标签</title>
	</head>
	<body>
		<a href="test2.html" target="_self">
			<img src="E:\Kgc\HTML\FirstDemo\testImg.jpg"
			alt="加载错误"
			title="跳转">
		</a>
	</body>
</html>

15：超链接<a href=“跳转目标” target="_self" >提示点击的内容</a>

target字段：_self _blank _parent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>img样式标签</title>
	</head>
	<body>
		<a href="Test1.html#m1">to ancor1</a>
		<a href="Test1.html#m2">to ancor2</a>
		<a href="Test1.html#m3">to ancor3</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>img样式标签</title>
	</head>
	<body>
		

			<a name="m1">猫1</a>
			<p>
				<img src="testImg.jpg" alt="显示失败">
		    </p>
	
			<a name="m2">猫2</a>
			<p>
				<img src="testImg.jpg" alt="显示失败">
			</p>
	
			<a name="m3">猫3</a>	
			<p>
				<img src="testImg.jpg" alt="显示失败">
			</p>
	</body>

</html>

16：锚链接

<a href=“Test1.html#m1”>to ancor1</a> 跳转到目标的参数：路径#锚点

<a name=“m2”>猫2</a> 声明锚的位置

17：块元素：该元素独占一行。

行内元素：例如strong标签，或者em标签

* 列表和媒体元素等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
		</ul>
	</body>
</html>

1：有序、无序列表：ul标签是无序，ol是有序。

结构：

<ul> 或者是ol

<li></li>

<li></li>

<li></li>

</ul>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<dl>
			<dt>郭老师</dt>
			<dd>meHotel</dd>
			<dd>区块链</dd>
			<dd>油炸鸡米花</dd>
		</dl>
	</body>
</html>

2：定义列表

<dl>

<dt>标题<dt>

<dd>子项<dd>

<dl>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test3</title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<!-- 第一行：大标题 -->
			<tr>
				<th colspan="6">艺术家大全</th>
				</tr>
			<!-- 第二行：表头 -->
			<tr>
				<th>平台</th><th>编号</th><th>名字</th><th>代表作</th>
				<th rowspan="7">备注</th>
				</tr>
			<!-- 按行依次排列 -->
			<tr>
				<td rowspan="3">快手</td>
				</tr>
			<tr>
				<td>1</td><td>郭老师</td><td>meHotel</td>
				</tr>
			<tr>
				<td>2</td><td>药水哥</td><td>西鼠霸王</td>
				</tr>
			<tr>
				<td rowspan="3">抖音</td>
				</tr>
			<tr>
				<td>3</td><td>老八</td><td>小汉堡</td>
				</tr>
			<tr>
				<td>4</td><td>阿giao</td><td>giao~~</td>
				</tr>
		</table>
	</body>
</html>

3:表格

<table border=1>

<tr>

<th></th>

</tr>

<tr>

<td><td>

<tr>

</table>

注：tr是一行，th是一个单元格，加入上述例程的colspan和rowspan可以以当前单元格为起点开始合并。

<!DOCTYPE html>
<!-- 当然，你首先得在本地有这些文件 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>test 1</title>
	</head>
	<body>
		<video controls >
			<source src="./vedio.webm" type="video/webm"></source>
			<source src="vedio.mp4" type="video/mp4"></source>
		</video>
		
		<audio src="8bit.mp3" controls ></audio>
	</body>
</html>

4：视频播放

<vidio src=“视频地址” 其余参数>

其余参数：controls、autoplay自动播放、loop循环播放、width+height大小

<vidio controls>

<source src=“address” type=“类型”>

<source src=“address” type=“类型”>

</vidio>

5：音频播放

<audio src="" controls=""><audio>

表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>FormTest</title>
	</head>
	<body>
		<!-- post更安全 -->
		<form action="Test1.html" method="get">
			<input type="text" name="userName" maxlength="7" />
			<input type="password" name="pwd" value="123456"/>
			<p><input type="submit"/>
			<input type="reset" value="重置" /></p>
		</form>
	</body>
</html>

1:表单

form属性:

action：跳转的位置。

method：有get和post2种提交表单的方式。

input属性：

type：输入类型。

name：字段名称。

value：默认值或者emmmm，反正就是值。

maxlength：最大值。

size：表单元素初始值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test3</title>
	</head>
	<body>
		<form action="#">
			<input type="file" name="uploader"/> <br>
			<input type="email" name="email" value="23@qq.com" /> <br>
			<input type="url" name="url" value="http://www.baidu.com" /> <br>
			<input type="number" name="number" max="100" min="-10" step=2 value="1" /> <br>
			<input type="range" name="range" value="50" max="100" min="0"/> <br>
			<input type="search" name="search" value="search?" /> <br>
			<textarea rows="20" cols="20">
			</textarea>
		</form>
	</body>

</html>

type字段：

text：文本

password：密码显示

button：按钮（=<button>内容</button>）后接onclick带js函数。

image：可点击的图片按钮，类似超链接但是可以传参。

file：上传文件。

email、url：两个相似，会对输入的内容进行格式判断。错误的时候会报错。url会校验协议头和后面的内容，页面存不存在不会校验。

number：数字可以设置上下限。（min=、max=、step、value）

range：滑块（min=、max=、step但没啥用、value）

search：搜索框，也没啥用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test3</title>
	</head>
	<body>
		<!-- 单选 -->
		<form action="#">
			<input type="radio" name="radio" value="123" checked/>123 <br>
			<input type="radio" name="radio" value="234" />234 <br>
			<input type="submit"/>
		</form>
		
		<!-- 复选 -->
		<form action="#">
			<p>choose habit</p>
			<p>
				<input type="checkbox" name="habit" value="music" />音乐 <br>
				<input type="checkbox" name="habit" value="sport" />运动 <br>
				<input type="checkbox" name="habit" value="read" />读书 <br>
				<input type="checkbox" name="habit" value="coding" />码代码 <br>
			</p>
        </form>
        
        <!-- 下拉框 -->
        <form action="">
			<select name="job">
				<option value ="teacher">老师</option>
				<option value ="student" selected>学生</option>
				<option value ="worker">个人</option>
			</select>
		</form>
        <!-- 多行文本 -->
        <form action="#">
			<textarea rows="20" cols="20">	</textarea>
		</form>
	</body>
</html>