html
html
从视频中了解到的。做的一些笔记。持续修改中。
web的环境搭建
1.需要用的网页浏览器（谷歌，火狐，IE，等）
（f12可以打开控制台，或者右键点击检查也可以打开控制台）
2.代码编辑器 vscode（sublime，atom，webstorm等）
主要是在这里进行html的代码编辑
3.git代码管理
网页的简单描述
html文档里面的代码经过浏览器的转化形成的页面
与网页相关的技术：
html+css 负责页面的内容
javascript 页面的行为
html 负责页面的结构
css 负责页面的美观
HTML的语法
html分为文本内容和标签
打开vscode
下面是html的基本结构
标签
1.段落
<p>段落1</p>
<p>段落2</p>
2.标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3.注释
<-- 注释-->
4.换行
<br />
5.空格
 ； 表示空格
6.文本
<strong>文字加粗</strong>
<em>文字斜体</em>
<del>中间文字加横线</del>
<span>在文字中加上css的属性</span>
7.图片
<img src="照片1“ alt="文字（当照片1显示不出来时显示的文字） title=“照片的解释说明">
图片格式：jpg:有损压缩
png：无损压缩
gif：动图
src:指的是插入文件的名称
图片：
本地图片:
绝对路径<img src="照片在电脑上位置" alt=" ">
相对路径<img src="../文件名称/图片名称" alt=" ">
…/表示的是该图片的上一路径
网络图片：<img src="照片在网络上的地址" alt=" ">
8.超链接
href
例如：
<a href="https://www.baidu.com">转到百度</a>
<a href="https://www.baidu.com" target=" _blank">转到百度</a>
转到链接并打开一个新的页面
也可以在插入图片，让图片做超链接
9.锚点
用#表示锚点
10.图片映射
<img src="图片名称" alt=" " usemap="图片名称map">
<map name="图片名称map">
<area shape=" 可点击的形状" coords="" herp="想要转到的链接地址" alt =" "></map>
shape可分为三种类型：
circle：圆 shape=“circle” coords=“中心点坐标，半径”
rectangle:长方形 shape=“rect” coords=“左上角的坐标，右下角的坐标”
poly：多边形
例：
会出现如下形状的 点击图形里面就转到链接
11.列表
有序列表ol+li
无序列表ul+li
自定义列表dl+dt+dd
<ol>
<li>有序</li>
</ol>
<ul>
<li>无序</li>
</ul>
<dl>
<dt>自定义</dt>
</dl>
有序：
无序：
自定义列表：
12.表格
<table>
<tr>行</tr>
<th>标题</th>
<td>内容</td>
</table>
colspan 列数
rowspan 行数
13.表单
<form action="">
<input type="用户名" name="usrername><br>
<inout type="密码" name="password"> <br>
<input type="submit">
</form>
action 对应的是转到的网址，可添加网址
<br> 指换行
14.布局
意思就是将各个板块都排列好
<div></div>
div：容器。可指定宽高。（用width,height）
iframe: 嵌套页面
<iframe src="链接" frameborder="0"></iframe>
frameset:
与head标签平级，不能放在head标签里。与table类似
<frameset>
<frame>
</frameset>
15.嵌套规则
块元素：独立成一行，可设置宽高文字块元素：p ,h 容器块元素：div,table,tr,td,th,from,ul,li,ol,dl,dd
行元素：不独立成一行，不可设置宽高a,img,input,strong,em,del,span
特殊字符：文字br, 
嵌套规则：
块元素可以嵌套行元素；
行元素可以嵌套行元素；
行元素不可以嵌套块元素；
文字类块元素不可以嵌套块元素；
容器类块元素可以嵌套块元素。