HTML
HTML介绍
Web前端三大核心技术
什么是HTML
HTML 是用来描述网页的一种语言。
HTML:负责网页的架构 CSS:负责网页的样式、美化 JS:负责网页的行为
Html标签 标签属性
- 单标签
<html> - 双标签
<b>内容</b>
属性格式：属性名=“属性值”
<A href= "http://www.jd.com” > 京东</a>
标签
HTML骨架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
</body>
</html>
重点:
1、页面的内容必须在body编写
2、html为根标签，所有的标签必须在根标签中。
3、head标签为头部标签，一般放title和搜索相关知识。
注释
<!--
国际通用快捷键：ctrl+/
-->
测试点：前端页面注释，上线前必须要删除
标题标签
<body>
<h1> 你好</h1>
<h6> 结束</h6>
</body>
段落标签
<p>段落1</p>
<!--
标识一个段落
独占一行，可以用于换行
语义化
-->
超链接标签
通过<a>标签进行定义
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--
网址必须带协议
_blank:新建窗口打开
-->
</body>
属性：
href:跳转地址
target:新窗口打开
图片标签
说明：网页中插入图片就要使用图片标签，HTML图片是通过<img>标签进行定义的
示例：
<body>
<img src="logo.jpg" title="传智播客"alt="logo" width="104" height="142" />
</body>
<!--
测试点：图片必须有title
-->
属性:
src:图片路径
相对路径： 同级：./ 上一级：../
绝对路径
title:光标悬停显示文字 alt:图片未加载时显示文字 width:图片宽度 height:图片高度
换行和空格
换行 <br /> 空格 横线<hr />
布局标签
说明：页面布局使用，常用（div和pan) 示例：
<body>
<div class= >
价格<soan>$199</soan>
</div>
</body>
<div> 一行只能放一个
<soan> 一行可以放多个。可以用于文本内高亮等等
列表标签
说明：列表标签常用li元素（分为：有序ol和无序ul）
示例：
<body>
<！--
列表标签：li
有序：
ol>li
无序：
ul>li
-->
<ol>
<li>香蕉</1i>
<li>橘子</li>
</ol>
<ul>
<1i>北京</1i>
<1i>上海</1i>
</ul>
</body>
表单标签
form标签的作用：提交页面的输入数据
<form action=" " method=" "> </form>
form标签的作用：提交页面输入数据
属性：
action:将数据提交到那个页面。
method:
get:
1、参数在url中显示
2、速度相对于Post快。
3、提交内容长度有限制。
post:
1、参数不在url显示
2、速度相对于post慢
3、提交内容长度无限制
场景：
1、get:查询使用
2、post:提交数据数据使用（登录、注册）
text:文本框 password:密码框
radio:单选 如何做到单选效果：相同一组才能单选，相同的name属性值为一组。
checkbox:多选框 button:普通按钮
submit：提交数据按钮
<!--
input:变形金刚 type属性值不同
text:文本框
password:密码框
radio:单选
如何做到单选效果：相同一组才能单选，相同的name属性值为一组。
checkbox:多选框
button:普通按钮
-->
<input type="text" />
<input type="password" />
<input type="radio" name="one"/>男
<input type="checkbox"/>测试
<input type="button" value="点我试试"/>
<body>
<!--
input:变形金刚 type属性值不同
text:文本框
password:密码框
radio:单选
如何做到单选效果：相同一组才能单选，相同的name属性值为一组。
checkbox:多选框
button:普通按钮
-->
用户名：
<input type="text" />
<br />
密码：
<input type="password" />
<br />
性别：
<input
type="radio" name="one"/>男
<input
type="radio" name="one"/>女
<br />
您的爱好：
<input type="checkbox"/>测试
<input type="checkbox" />吃饭
<input type="checkbox"/>睡觉
<input type="checkbox" />打豆豆
<br />
<input type="button" value="点我试试"/>
</body>
</html>
下拉选框：
来自：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<pption>深圳</pption>
</select>
文本框：
<!--
cols:列（默认的宽度）
rowb:行（默认的高）
-->
意见：
<textarea cols="1" rows="1"></textarea>
<br />
<input type="button"value="点我试试"/>
其他常用标签
<script>js语句</script>
<style type=" ">CSS:{ }</style>
<link src=" "/>