html
从视频中了解到的。做的一些笔记。持续修改中。
web的环境搭建
1.需要用的网页浏览器（谷歌，火狐，IE，等）
（f12可以打开控制台，或者右键点击检查也可以打开控制台）
2.代码编辑器 vscode（sublime，atom，webstorm等）
主要是在这里进行html的代码编辑
3.git代码管理
网页的简单描述
html文档里面的代码经过浏览器的转化形成的页面
与网页相关的技术：
html+css 负责页面的内容
javascript 页面的行为
html 负责页面的结构
css 负责页面的美观
HTML的语法
html分为文本内容和标签
打开vscode
下面是html的基本结构
标签
段落
<p>段落1</p>
<p>段落2</p>
标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
注释
<-- 注释-->
换行
<br />
空格
 ； 表示空格
文本
<strong>文字加粗</strong>
<em>文字斜体</em>
<del>中间文字加横线</del>
<span>在文字中加上css的属性</span>
图片
没有闭合标签
图像属性：
src ：用来定义图片的地址
alt ：用来为图像准备一个可替换的文本（当无法加载图象时，可以出现alt后准备的文本）
<img src="url(图片的地址/或者图片的名称)" alt="要替换的文字" title="图片的解释说明">
图片格式：
jpg:有损压缩
png：无损压缩
gif：动图
src:指的是插入文件的名称
图片：
本地图片:
绝对路径<img src="照片在电脑上位置" alt=" ">
相对路径<img src="../文件名称/图片名称" alt=" ">
…/表示的是该图片的上一路径
网络图片：<img src="照片在网络上的地址" alt=" ">
超链接
href
例如：
<a href="https://www.baidu.com">转到百度</a>
<a href="https://www.baidu.com" target=" _blank">转到百度</a>
转到链接并打开一个新的页面
也可以在插入图片，让图片做超链接
锚点
用#表示锚点
图片映射
<img src="图片名称" alt=" " usemap="图片名称map">
<map name="图片名称map">
<area shape=" 可点击的形状" coords="" herp="想要转到的链接地址" alt =" "></map>
shape可分为三种类型：
- circle：圆 shape=“circle” coords=“中心点坐标，半径”
- rectangle:长方形 shape=“rect” coords=“左上角的坐标，右下角的坐标”
- poly：多边形
例：
会出现如下形状的 点击图形里面就转到链接
头部head元素
script元素
用于加载脚本文件。比如js
在html中使用css
1.直接使用
<p style="XX文本内容的样式XX">文本内容</p>
2.内部样式表。在HTML文档头部 区域使用
<head>
<style type="text/css"><!--这个text/css文件需要样式>
body{}
p{}
</style>
</head>
3.外部引用。这个样式需要被应用到很多页面时
<head>
<link rel="stylesheet" type="text/css" herf="mystyle.css">
</head>
4.定义样式时，用到的样式标签
列表
- 有序列表
ol+li - 无序列表
ul+li - 自定义列表
dl+dt+dd
<ol>
<li>有序</li>
</ol>
<ul>
<li>无序</li>
</ul>
<dl>
<dt>自定义</dt>
</dl>
有序：
无序：
自定义列表：
表格
<table>
<tr>行</tr>
<th>标题</th>
<td>内容</td>
</table>
colspan 列数
rowspan 行数
表单
<form action="">
<input type="用户名" name="usrername><br>
<inout type="密码" name="password"> <br>
<input type="submit">
</form>
action 对应的是转到的网址，可添加网址
<br> 指换行
布局
意思就是将各个板块都排列好
<div></div>
div：容器。可指定宽高。（用width,height）
iframe: 嵌套页面
<iframe src="链接" frameborder="0"></iframe>
frameset:
与head标签平级，不能放在head标签里。与table类似
<frameset>
<frame>
</frameset>
嵌套规则
-
块元素：独立成一行，可设置宽高
文字块元素：p ,h 容器块元素：div,table,tr,td,th,from,ul,li,ol,dl,dd -
行元素：不独立成一行，不可设置宽高
a,img,input,strong,em,del,span -
特殊字符：文字
br, 
嵌套规则：
- 块元素可以嵌套行元素；
- 行元素可以嵌套行元素；
- 行元素不可以嵌套块元素；
- 文字类块元素不可以嵌套块元素；
- 容器类块元素可以嵌套块元素。
div
- 块级元素（有前后<></>）
- 可改变页面布局和区块
- 与css一同使用，
元素会对 大的内容块设置样式属性。
span
- 内联元素，可作为文本的容器
- 可改边页面布局和区块
- 与css一同使用的时候，元素可为部分文本设置样式属性
表单
设置表单元素是允许在表单中输入内容，可以输入文本、密码类的文字，也可以有单选按钮、和复选的按钮、或者提交的按钮。
格式：
<form>.....</form>
文本域：
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码：
<form>
Password: <input type="password" name="pwd">
</form>
单选：radio
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
多选：checkbox
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交：submit
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
html中script标签是插入js代码
- 代码位置不同，插入效果不同
- 可以将script元素全部放入页面后
- 使用js的两种方法：
1.script中引用
<script>
console.log('第一种')；
</script>
2.引用外部文件
<script arc="XX.js"></script>
script的属性
- src：用来引用外部js文件
- type：可选，编写代码使用的脚本语言的类型
- defer： script中的延迟属性：defer。可以将js代码延迟到整个页面加载完之后才执行
- async：~，异步加载脚本，于defer类似，但是不会影响页面显示，但它不能保证代码的执行顺序
<script async src="XX1.js"></script>
<script async src="XX2.js"></script>
<!--不能保证XX1.js比XX2.js先执行-->
- noscript：可以在不支持js的浏览器中显示页面内容
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
