前端初学入门,找不到学习方向,不喜欢记笔记?没关系,这篇博文为你整理了详细的学习笔记汇总,欢迎收藏,喜欢的可以直接到博文尾处,免费下载md笔记哦~⭐⭐⭐
Html5
网站:
1、网站的建立流程🌙
- 注册域名
- 租用空间
- 网站建设
- 确定网站的主题
- 搜索资料
- 规划网站
- 制作页面
4.网站的推广
5.网站的维护
2、网页的组成及web标准🌙
结构:网页的结构部分 xhtml或html
表现:网页的样式css
行为:网页要实现的功能JS
HTML 超文本标记语言
XHTML 可扩展超文本标记语言
文件的创建
1、文件的命名规范
- 必须以英文字母等命名
- 不能有特殊的字符
2、一个网站文件的建立
- 三个文件css(表现),js(行为),image(图片,素材)⭐⭐
- 创建一个文本文件,后缀名改为html。
基础标签
1、基础语体⭐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2、标记
<meta charset="utf-8">
这是防止中文乱码,在(head)里面
<br/>:换行;
<hr/>:空标记,一条长长的横线;
<s></s>:删除线
<u></u>:下划线
<tt></tt>:等宽
<sup></sup>:上标
<sub></sub>:下标
:空格;
> :>右大于号
< :<左小于号
© :网页版权所有
<p>段落文本</p>(不能自动换行)
<!--注释-->:快捷键为ctrl+/,选中内容即可转为注释
<b>内容</b>:加粗
<strong>内容</strong>:加粗
<i>内容</i>:倾斜
<em>内容</em>:倾斜
<div></div>:只有换行效果,用来创建网页的模块
<span></span>:内容中的的某一点提出改格式
<h1>网页的logo</h1>
<h2>网页的标题</h2>
...
<h6>网页的标题</h6>
HTML标签
1、图片
<img src="目标文件路径及全称" alt="图片替换的文本" title="图片标题"/>
文件名+/:是打开这个文件夹。
…/:返回上一级
./:当前文件夹
- 若网页和图片在同一个文件,直接输入图片的文件名。
- 图片在当前文件的子文件夹,用子文件夹名+/打开子文件,在输入图片名。
- 若都在子文件夹,先…/返回上一级,在进行上述操作。
2、链接
<a href="目标文件夹路径及全称/链接地址/内部链接id名" target="打开方式" title="提示文本" [download="下载路径"]>
- 链接地址一般都是遵循http://协议,所有网站地址前不加这进不去。
- 打开方式_self覆盖当前网页打开。_blank打开新的窗口。
- download下载选项属性⭐⭐
3、基本标签
<div></div>
<span></span>
4、H5新标签⭐⭐⭐
<heaedr></heaedr>
<footer></footer>
<nav></nav>
<section></section>(一般表示内容快)
<article></article>(一般表示与上下不关联的独立内容)
<aside></aside>(一般表示article左右两边的内容)
<figure></figure>(独立内容,脱流)
<figcaption></figcaption>(figure标题,仅一个)
<mark></mark>(高亮)
<center></center>(居中标签)
5、序列表
1、有序列表:
<ol type="1<!--或i或I或a或A-->" start="数字"<!--表示从第几个地方开始-->>
<li>列表内容</li>
。。。
<li>列表内容</li>
</ol>
2、无序列表:
<ul type="形状的英文单词"<!--如circle空心圆、aquare正方形。默认实心圆-->>
<li>列表内容</li>
。。。
<li>列表内容</li>
</ul>
3、自定义列表:
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
6、表格⭐
<table width="数字px" height="<