前端学习心得
文章目录
web标准的构成
HTML的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h>标题</h>
<p>段落</p>
</body>
</html>
HTML的标签
标题标签
//标题标签（共六个，字体由大到小）
<h1>一级标题 </h1>
<h2>二级标题 </h2>
<h3>三级标题 </h3>
<h4>四级标题 </h4>
<h5>五级标题 </h5>
<h6>六级标题 </h6>
//注释标签
<!--<h1>一级标题 </h1>-->
段落标签，水平线标签和换行标签
<p>，<hr>和<br>
<p> 第一段<br>
<hr>
第二段<br>
. <br>
. <br>
. </p>
文本格式化标签
<!--标签名+作用+标签名-->
<strong>加粗字体</strong>
<b>加粗字体</b>
<ins>下划线</ins>
<u>下划线</u>
<em>倾斜字体</em>
<i>倾斜字体</i>
<del>删除线</del>
<s>删除线</s>
媒体标签
1.图片标签
<img src="图片路径" alt="替换文本" title="替换文本" width="" height="">
<img 属性名="属性值">
src后面写的是图片的文件名
alt后面写的是图片未显示时显示的文字
title后面写的鼠标悬停时显示的文字
width设置图片的宽
height设置图片的高
ps：若width和height二者只改变其一则另一个也改变使得原先的图片等比例变化
2.路径
绝对路径和相对路径，常用的是相对路径
3.音频标签
<audio src="音频路径" controls autoplay loop> </audio>
controls显示播放控件
autoplay自动播放（部分浏览器不支持）
loop循环播放
4.视频标签
<video src="音频路径" controls autoplay muted loop> </video>
属性功能同音频标签
谷歌浏览器中autoplay需要配合muted实现静音播放
链接标签（a标签，超链接，锚链接）
作用：进行页面跳转
<a href="./目标网页.html" target="属性名">超链接</a>
<a href="#">空链接</a>
target内的属性：
1.-self覆盖原网页跳出
2.-blank保留原网页，跳出新网页
表格标签
列表
<--!有序列表-->
<ol>
<li></li>
</ol>
<--!无序列表-->
<ul>
<li><></li>//列表项
</ul>
<--!自定义列表-->
<dl>//自定义列表
<dt>//自定义列表项
<dd></dd>//自定义列表项的描述
</dt>
</dl>
<select>//定义下拉列表
<option value=""></option>定//义下拉列表项
</select>
表单标签
1.<form>定义表单标签
2.<input>输入域
3.<textarea>文本域
4.<label>自动聚焦
在 label 元素内点击文本，浏览器会自动将焦点转到和标签相关的表单控件上。for属性与相关元素的 id 属性相同.