前端学习笔记

三件套黑马pink
es6看文档
node黑马刘文斌
vue codewhy老师不用视频的项目

1.标签关系

标签

主要为
双标签 和 单标签，

双标签《html》《/html》
单标签《br /》（这是比较少的）

1.包含关系
《html》
《body》
《/body》
《/html》
2.并列关系
《head》
《/head》
《body》
《/body》

2.基本结构标签

《html》 《head》 《title》 《/title》 《/head》

《body》
《/body》

《/html》
html最大，包含head和body，再包含title

3.网页开发工具

<!DOCCTYPE html>

表示采取的是html5版本显示网页。
必须写在第一行。且不属于html标签，而是文档类型的声明标签

<!html lang=“en”>

lang 语言种类
en定义语言为英语
zh-CN定义语言为中文
说明网页是中文网站/英文网站/。。。
但中英文照写不误

<!meta charset=“UTF-8”>

用UTF-8显示，不写会出现乱码

4.html常用标签

4.1标签语义

![[Pasted image 20220404153258.png]]

4.2html标题标签

<!h1>--<!h6>标题标签，h1一级标签最大，h2二级标签次之··· `只有6个` ``每个标题独占一行``

4.3段落和换行标签（重要）

==<！p><！/p>== 用于定义段落，这里面的是一个段落。`上下会空一行`

换行

4.4文本格式化标签

推荐前面一列的

《strong》加粗《/strong》
《b》也是加粗《/b》
==《em》《i》==都是倾斜
==《del》《s》==都是删除线
==《ins》《u》==都是下划线

4.5两个特殊标签

《div》，《span》
没有语义，就是盒子，用来装内容
div是换行的，span是不换行的

4.6图片标签

《img src=“未命名.jpg”/》
![[Pasted image 20220405214937.png]]
《img src=“未命名1.jpg” alt=“我是pink老师” title=“我是谁” width=“500” height=“100” border=“15”/》

4.8图像标签和路径（重点）

属性

**采用键值对的格式，即key=“value”** **这几个不分前后，谁放前面都行，但用空格分开** 五个属性： alt替换文本 title提示标题，`鼠标放上面就显示` border 加个边框的宽度 width和height 一般设一个就行，另一个等比例变化。

路径

文件夹就是目录

相对路径：开始是这个文件的位置，形成一个路径
上一级用../images/img.jpg
同级直接/img.jpg
绝对路径：从顶级目录开始定位，形成的路径
就是电脑里的C：\Users\apple\l.jpg
或者网络地址http:www.baidu.com\l.jpg

4.7超链接标签

《a》标签可以定义 超链接，从一个页面到另一个页面

1.连接的语法格式

=两个属性=href和target

《a href=“跳转目标” target=“目标窗口的弹出方式”》文本或图像《/a》

href 写url
target= “ _self "打开的窗口还在这
”_blank"新开个窗口

2.链接分类

①外部链接 ： 用http的

《a href=“https://firefox.com/”>click here </a》

②内部连接 ：不用写http

《a href=“…/runoob.html” target=“_blank”>nihao</a》

③ 空连接 ：#

《a href=“#” target=“_self”》kong《/a》

④下载链接 ：href里面写一个文件或压缩包

《a href=“img.zip”》下载链接《/a》

⑤网页元素链接：网页里的图像，音频，视频，表格等都可添加超链接

《a href=“http://www.baidu.com”></a》

⑥锚点链接：点了之后跳到这页面某个位置，跟目录点了跳转一样

跳转的点《a href=“#token”》《/a》
跳转到的点《h1 id=“token”》《/h1》

块元素：无论内容多少，该元素独占一行
(p,h1~h6等)
行内元素：内容撑开宽度，行内元素的可以排在一行
(a,strong,em等)

5.html中的注释和特殊字符

5.1注释

快捷键 ctrl + /

5.2特殊字符

可以显示在网页中

三个常用的

  空格
< 小于号
> 大于号

6.表格标签

一，表格的标签

<table>是定义表格的标签

用来展示数据的，不是用来布局的

(1,1)	(1,2)
(2,1)	(2,2)

<table border=1>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>

属性

align表示表格靠哪边，靠左还是靠右，
border是否都有边框，1或者"",
cellpadding单元格边沿与内容之间的空白，
cellspacing单元格之间的空白，
width表格的宽度

二，表格的属性

<tr>   定义表格的行,必须在<table>中，一个 tr 是一行

<td> （table data)指表格数据，定义表格的单元格，必须在<tr>中

<th> th表头单元格，表示第一行，加粗显示

<thead>，<tbody>，<tfoot>让表格清晰，直接放就行，thead放th的

三，合并单元格

1.跨行还是跨列
2.然后再目标的单元格td 后加=跨行=colspan=“n”，=跨列=rowspan=“n”，n为合并的个数
3.删除多余的单元格

7. 列表标签

1.<ul> 序列表
2.<ol> 有序列表
   <li> 在ul或ol或menu中
        ·有序列表、无序列表里只能放li，不能放别的，li 里可以什么都放  
	    ·样式用css做


3.<dl>自定义列表

 <dl>定义列表，<dt>定义项目/名字，<dd>描述每一个项目/名字
 
   dt和dd是兄弟关系

8.表单标签

作用：表单用来收集数据。

分为表单域(红框子），表单控件，提示信息

表单域：包含表单元素的区域
form标签
< form>把它范围内的表单元素信息交给服务器< /form>
< form action=“url地址（界面的值送到这里处理）” method=“POST或GET方式” name=“name1（表单域名称）”>

表单控件（表单元素）：

input表单元素 select下拉表单元素 textarea文本域元素

1. input

标签用于收集用户信息

input 的属性：

文本框text：

<input type="text" value="这用value"/>

密码password：

<input type="password" />

单选按钮 radio:

<input type="radio">

如何多选一:
相同的name
1.

<input type="radio" name="1" checked>2.<input type="radio" name="1" >

多选checkbox

<input type="checkbox">

默认显示的内容 value 用value=···
要默认哪些按钮被按 用checked，直接写checked都行
最大长度maxlength：最多输入多少个
按钮button：结合js使用

label标签:为input元素定义标注（标签）,效果就是点后面的字也可以选

<input type="radio" id="nan"><label for="nan">nihao</label>

2.select

下拉列表

<select>

        <option>can</option>

        <option >we</option>

        <option>,</option>

        <option>we </option>

        <option>keep</option>

</select>

3.textarea

文本域标签。要输入很多标签，不像text只能输入一行

 <textarea cols="50" rows="5"><!--cols一行多少字rows一列多少字-->

    默认内容

 </textarea>

媒体元素

音频和视频

src:资源路径
controls:控制条
outoplay：自动播放

1.插入视频

<video src="C:\Users\a'su's\Videos\Yuan Shen 原神\Yuan Shen 原神.mp4" controls>原神</video>

2.插入音频
audio

<audio src="C:\Users\a'su's\Music\company.mp3" controls>company</audio>