三件套黑马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>