前端学习之HTML
浏览器介绍（把代码渲染成页面）
- 常用浏览器：ie,edge,firefox,chrome,safari,opera
- 浏览器内核：
Trident(IE内核)，EdgeHTML(window10发布后，微软推出edge),Gecko(火狐，开源)，webkit(Safari)，Chromium/Blink(chrome,blink其实是webkit的分支)，Presto(opera的前任内核，现在也用blink) - web标准
结构标准：用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分
样式标准：设置网页元素的版式、颜色、大小等外观样式，主要指css
行为标准：网页模型的定义及交互的编写，主要包括dom和ECMAScript两个部分
HTML初识
结构
<html> //根标签
<head> //头标签
<title></title> //标题标签
</head>
<body> //主体标签
</body>
</html>
HTML常用标签
HTML标签分类
- 双标签
- 单标签
<br /> //单标签
HTML标签关系
- 嵌套关系
- 并列关系
文档类型
告诉我们使用哪个版本的html，位于文档的最前面
<!DOCTYPE html> //html5
字符集
<meta charset="UTF-8" />
HTML标签的语义化
- 好处：看到标签名字就知道这个标签是干嘛的
常用标签
排版标签
//标题标签（6级）
<h1>最重要</h1>
<h2>第二重要</h2>
<h3>第三重要</h3>
<h4>第四重要</h4>
<h5>第五重要</h5>
<h6>第六重要</h6>
段落标签
<p>段落内容</p>
文本在一个段落中，会根据浏览器窗口自动换行
水平线标签（单标签）
<hr /> //单词：horizontal缩写
换行标签
<br /> //单词：break的缩写
无语义的两个标签(就是用来布局的)
<div></div>
<span></span>
文本格式化标签
<b></b> //加粗
<strong></strong> //加粗（xhtml推荐用strong）
<i></i> //倾斜
<em></em> //倾斜（xhtml推荐用em）
<s></s> //带删除线
<del></del> //带删除线 （xhtml推荐使用del）
<u></u> //下划线文字
<ins></ins> //下划线使用（xhtml推荐使用ins）
标签属性（为了让HTML标签提供更多信息）
<标签名 属性1="属性值1" 属性2="属性值2" ...>内容</标签名>
在上面的语法中，
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值，省略该属性则取默认值。
采取 键值对 的格式 key=“value” 的格式
比如:
<hr width="400" />
提倡：尽量不要用样式属性
图像标签（单标签）
<img src="" /> //src必写属性
<img src="" alt="" /> //alt属性在图片
//显示不出来时会替换成文字
<img src="" title="" />
//title是鼠标在图片上悬停时会显示的文字
<img src="" width="200" />
//一般情况下，只要改一个width或者height就行
//另一个height或者width会自己等比例缩放
<img src="" border="10" />
//border不建议使用
<img src="" width="200" border="20" title="11" alt="图片" />
链接标签
在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
注意：
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
<a href="跳转去往的网页路径">百度</a>
<a href="http://baidu.com">百度</a>
//href属性必须要有，外部链接必须有http://开头
<a href="新闻页面.html">新闻页面</a>
//内部链接要有后缀名
//作用3：锚点定位（适用于很长的页面）
//1.用<a href="#id名">连接名</a>
<a href="#movie">电影</a>
//2.给要添加锚点的位置加上id名
<div id="movie"></div>
base标签：设置整体链接的打开状态
<head>
<base target="_blank" />
<base href="" />
//href：规定页面中所有相对链接的基准 URL
//比如图片的src为a,那就是相对于base中的url的相对路径
</head>
<body>
<a href="http://www.baidu.com">百度</a>
//虽然没有指定target是_blank
//但是在base中指定了，所以打开仍是新窗口
</body>
特殊标签
空格：
小于：<
大于：>
...还有其他的可以查手册
注释标签
<!--注释--!>
路径
相对路径
<!-- html文档和文件在同一级--!>
<body>
<img src="logo.jpg">
</body>
<!-- 文件在html文档的下一级,img文件夹和html文档在同一级--!>
<body>
<img src="img/logo.jpg">
</body>
<!-- 文件在html文档的上一级,html文档所在文件夹和imgae在同一级--!>
<body>
<img src="../logo.jpg">
//..表示上一级
</body>
绝对路径
<img src="C:\logo.jpg" /> //本地的绝对路径。该方法不用，一换电脑就找不到了
<img src="http://www.itcast.cn/images/logo.png" />
//网上的绝对地址，用的比较多
列表标签
无序列表
<h3>喜欢的水果</h3>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>榴莲</li>
</ul>
注意：
1.ul标签中只放li标签。虽然也可以放其他的（浏览器不报错），但是不科学。
2.li中可以放其他的标签。
3.无序列表的样式通过css来改
有序列表
<h3>喜欢的水果</h3>
<ol>
<li>苹果</li>
<li>橘子</li>
<li>榴莲</li>
</ol>
注意：
1.ol标签中只放li标签。虽然也可以放其他的(浏览器不报错)，但是不科学。
2.li中可以放其他的标签。
3.有序列表的样式通过css来改
自定义列表
<dl>
<dt>定义标题</dt>
<dd>定义描述、解释</dd>
</dl>
<h3>页面最下端</h3>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>订单操作</dd>
</dl>
表格table（会使用）
注意：表格不是用来布局的，而是用来处理表格式数据的
创建表格
<table> //表格标签，就是个四方块
<tr> //行标签
<td></td> //单元格标签
</tr>
</table>
注意：
1.table标签中只能放tr（还有thead,tbody）标签，tr标签中只能放td标签，但是td标签中可以放其他标签
表格属性
// 1. border
<table border="1"></table>
// 2. cellspacing：单元格之间距离
<table cellspacing="0"></table>
// 3.cellpadding:单元格与内容之间的距离
<table cellpadding="5"></table>
// 4. width,height
<table width="500" height="300">
// 5. align:表格**水平**的位置,center,left,right
<table align="center">
表格结构
为了表格的结构看起来清晰，有一个thead，tbody标签，在表格中不会有什么显示，但是使得代码结构更清晰。
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
表格标题
<table>
<caption>a表</caption>
</table>
合并单元格
跨列合并：colspan
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr >
<td>3</td>
<td colspan="2">合并之后的单元格</td>
</tr>
</tbody>
</table>
跨行合并：rowspan
<table>
<caption></caption>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
跨行合并复习
<table border="2" cellspacing="0">
<caption>1111111111</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td rowspan="3">1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td colspan="3">2</td>
</tr>
</table>
表单控件
表单组成部分
- 表单域
- 提示文本：文字
- 表单控件
表单控件
- input（单标签）
// 通过type属性来变换形状
<p>用户名：<input type="text" /></p>
// 密码，maxlength表示最多输入的字符数
<p>密码：<input type="password" maxlength="12" /></p>
//value属性表示默认值
<p>用户名：<input type="text" value="请输入用户名"/></p>
//单选框:同一组用name来限定，checked表示默认被选中
性别：<input type="radio" name="sex" checked="checked"/>女 <input type="radio" name="sex" />男
//复选框
爱好：<input type="checkbox" name="hobby" checked="checked"/>篮球 <input type="checkbox" name="hobby" />羽毛球
// 按钮组
// button
<input type="button" value="搜索" />
//submit
<input type="submit" value="提交表单" />
//reset
<input type="reset" value="重置按钮" />
//image 图像按钮
<input type="image" src="" />
//file 文件按钮
<input type="file" />
- label标签
与input搭配使用，在点label的标签时候，光标也能进入input控件中
//1. 用label直接包裹input
<label>输入账号：<input type="text" /></label>
//2.如果label中有多个表单，想定位到某个表单，使用for id的方法
<label for="two">输入账号：<input type="text" /><input id="two" type="text" /></label>
- textarea控件（文本域）
<textarea></textarea>
// 提倡用css来改样式
- 下拉菜单标签
<select>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option selected="selected">星星</option>
</select>
表单域
-
学过的3个域
1.文本域：textarea（用来留言）
2.文件域：input type=“file” 上传文件的
3.表单域：form 收集表单控件信息，并且提交的 -
表单域
<h2>表单域</h2>
<form action="demo.php" method="get" name="login">
//get速度快，但会显示表单里面的内容，不安全
//post速度慢一些，但是不会显示表单的内容，安全一些
//如果有多个表单域，通过name属性来区分
<p>用户名：<input type="text" name="" id="" /></p>
<p>密 码：<input type="password" id="" /></p>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
HTML5常用新标签
- header
<header>定义页面的头部 页眉</header>
- nav
<nav>定义导航栏</nav>
- footer
<footer>定义页面的底部 页脚</footer>
- article
<article>定义文章</article>
- section
<section>定义区域</section>
- aside
<aside>定义页面内容之外的内容 侧边</aside>
datalist
类似于有提示功能的select，与input搭配使用，实现方法：input中使用list指向datalist的id来实现链接
<input type="text" value="输入明星" list="star" />
<datalist id="star">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>
fieldset
与legend搭配使用
<fieldset>
<legend>用户登录</legend>
用户名：<input type="text" />
密码：<input type="password" />
</fieldset>
input type属性新增内容
<fieldset>
<legend>html5 input type属性新增内容</legend>
<form action="">
邮箱：<input type="email" />
手机号：<input type="tel" /> //移动端可以跳出数字键盘
数字:<input type="number" /> //非数字根本输不进去
网址：<input type="url" />
搜索：<input type="search" />
区域：<input type="range" /> //滑块
时间：<input type="time" /> //小时：分钟
年月日：<input type="date" /> //年月日
星期：<input type="week" /> //星期
颜色:<input type="color" />
<input type="submit" value="提交" />
<input type="reset" value="重置">
</form>
</fieldset>
HTML新增属性
- 占位符 placeholder
用户名：<input placeholder="请输入用户名" /> //当用户输入的时候文字自动消失，当删除全部文字会自动回来
用户名：<input autofocus />
- 自动获得焦点 autofocus
用户名：<input autofocus /> //鼠标会自动进到输入框中
- 上传多个文件 multiple
<input type="file" multiple />
- 自动记录完成 autocomplete
//1. 需要提交按钮
//2. 这个表单必须有一个name属性
<form>
用户名：<input type="text" autocomplete="on" name="username"/> //直接写autocomplete就是on
<input type="submit" value="提交">
</form>
- 不能为空 required
昵称：<input type="text" required>
- alt+字母的形式快速获得焦点
//键盘按下alt+s可以自动光标进入到input控件中
昵称：<input type="text" accesskey="s" />
插入视频(embed)
<embed src=""></embed>
插入音频(audio)
//autoplay控制是否自动播放，controls控制是否显示控件，loop="-1"和loop无限循环播放
<audio src="bk.mp3" autoplay="autoplay" loop="-1"></audio>
//为了浏览器兼容：(ogg,mp3,wav)
<audio controls autoplay>
<source src="bk.mp3" />
<source src="bk.ogg" />
你的浏览器不支持播放声音
</audio>
插入小视频
<video controls autoplay src="4.mp4">
// 兼容写法:mp4,ogg,webM
<video controls autoplay>
<source src="4.mp4" />
<source src="4.ogg" />
你的浏览器不支持视频播放
</video>
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
