今天学习了web前端html,特写下此篇学习记录

1.关于编译器的推荐。

用记事本也可以编写网页，但面对庞大复杂的工作量的情况下使用记事本显然不可能。我使用的软件是 hbuilde ，也可以使用vscode那种。

2.html的基本框架

无论是多么复杂的html代码.基本框架都是不变的。万变不离其宗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

html也叫做超文本标记语言自然离不开标签，浏览器通过识别标签来渲染网页。可以把上代码看成一个身体，html里面的内容看成一个整体。head是头部，body是身体也是主要的内容。然而head里面还包裹了一个title他们两个关系就像父子一样。head就是父级，被包裹的title就是子级。和head并列的body就像兄弟之间的关系。如果你用的我推荐的hbuilde，创建文件时会自动生成以上代码

标签的介绍

基本标签：

标签	作用	可添加属性
<br	换行
<p	段落	<align=”center” “right” “left” 分别为居中，靠右，靠左在html5中已经不使用这种方法改为css实现
<i	倾斜
<u	下划线
<b	字体加粗
<img	插入图片	src=”./xxx/.jpg” title=”xxx” alt=”xxx” width=”xx” align=” “解释：src可以插入¹相对路径和²绝对路径；title当你鼠标停悬在图片上显示的文字。 alt 当图片加载不出来显示的文字; width(height):设置图片固定的尺寸
<link	当前文档引用外部资源	href=”urll或者相对路径” rel=” value “ rel 属性用于指定当前文档与被链接文档的关系详细的可以查询资料
<hr	一条横线

如果想添加网站的图标可以这样:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个html页面</title>
		<link rel="icon" href="favicon.ico" />
	</head>
	<body>
	
	</body>
</html>

无序和有序，自定义排序标签

标签	作用	属性值
<ur	无序标签	<ul type=”disc” “circle” “square” 解释:disc 实心圆; circle:空心圆 square: 实心方块。默认是disc 。子级：<li
<ol	有序标签	<ur type=”1” “a” “A” “I” “i” start=”” 解释: start:规定有序列表的起始值.子集：<li
<dt	自定义序列	子集有两个分别是<dt <dd 。两个子标签更像用来一问一答。

表格

标签	作用	属性值	子标签
table	创建一个表格	table border=” “ cellspacing=“” 解释:border 定义表格宽度； cellspacing：规定单元格之间的空白。更多属性自行查阅	tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元
rowspan	纵向合并单元格	rowspan=”4” 表示纵向合并四个单元格
colspan	横向合并单元格	colspan=”7” 表示横向合并7个单元格

表单

标签	作用	属性值
form	定义一个表单	form action=”” menth=”post” 解释：ation:向何处提交表单，可以是页面和url。menth: 提交方式有post 和get两种提交方式。
input	输入标签：可作为form子标签使用	type=”” input的工作方式取决于type的类型。type的值：text,password,date,submit,color,image 详细可参观考
select	选择标签	name=”” multiple size=”2” selected name提交给服务器的id multipel: 没有声明该值时一次选择一个 size: 选择的值 option子标签 value=”” 里面的值 selected 默认选择的值
textarea	文本元素	cols=”30” rows=”10” cols:列数 rows: 行数
fieldset	加个边框	子标签: legend 给这个边框添加个标题

input 标签 type 所对应值的用法
type=”text” placeholder=“请输入” placeholder:占位文本,可用来提醒用户的输入	文本样式
type=”file” accept= “video/” audio/表示音频文件 ,video/表示视频文件 ,image/ 表示图片文件	文件上传

type=”password”	输入时为不可见形式
type=”submit” value=”上传” 可更改value来改变文字	提交按钮
type=”image” src=” “ alt	带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示
type=”color” name=”head” value=””	颜色控件
type=”checkbox” chedked=”checked”	复选框
type=”rideo” name=”boy” “checked=”checked” 当name的名字一样时会出现互斥 checked: 默认选中当两个标签中都有checked 网页自上而下解析发现第一个标签中有checked 接着解释第二个表现也有checked所以会选择第二个checked。	单选框

超链接

超链接标签 href
链接到一个url 上	a href=”URL”
链接到一个图片上面	a href=”URL” img src=”./xxx/“ alt=” “ /a
链接到当前的某个页面	使用锚点在该段落前添加id属性再用href=”#xx” 进行连接参考

音频和视频标签

标签	属性
video 视频标签	autoplay loop controls 自动播放,循环播放，显示控件 src 引入的视频。也可以使用子标签source src type=”video.mp4”
audio 音频标签	和上述一样
source	用于为媒体元素指定多种媒体资源

ps: 如果嫌一个个打太慢了，hbuilde 内置了emmet插件可以便捷完成一些操作。官方文档。

[^1.相对路径]: 相对路径是一段不完整的路径。例如：./xxxx/xxx/xxx.jpg ./表示当前目录 ../表示上一级目录
[^2.绝对目录]: 一段完整的路径例如：https://xdm-blog.oss-cn-beijing.aliyuncs.com/202301012218787.png

web前端--html