HTML概述
英文全称：Hyper Text Markup Language
中文全称：超文本标记语言
网页主要有三部分组成：结构，表现和行为
HTML：结构，决定网页的结构内容（“是什么”）
CSS：表现（样式），设定网页的表现样式（“什么样子”）
JavaScript：行为，控制网页的行为（“做什么”）
doctype三种解析模式：1、IE6/7准标准模式
2、标准模式
3、混杂模式（非标准模式）双击打开的都是混杂模式
所有的表现写在body部分 标签是成对出现
HTML注意事项：
1、所有标签的元素和属性的名字都必须小写
2、所有的属性必须用双引号""括起来，如果属性值本身就含有双引号，那么您必须使用单引号
3、文件的扩展名要以.html结束
4、任何空格或回车在代码中都无效，插入空格或回车有专用的标记。分别是  <br>
DOCTYPE：声明文档类型用哪种解析方式
html：html文档，也就是网页
head：所有头部元素的容器，如<title><link><style><meta><script>等
title：1、定义浏览器工具中的标题
2、提供页面被添加收藏夹时显示的标题
3、显示在搜索引擎结果中的页面标题
meta：描述文档（作者或编辑软件），或定义文档的关键词，或重定向用户到新的网址，此处是设置编码格式，否则为乱码，不会显示在页面上
<meta names = "keywords" content = "HTML,CSS,XML"/>
name和content 属性的作用是描述页面的内容
body：网页内容的主题部分，可见页面内容，所有的标签都应该写在这里
什么是Html语义化？
如：标题（h1~h6），列表（11），文章（article），节（section），头（header），脚（footer），导航（nav），侧边栏（aside）等等；
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好地解析
为什么要语义化？
1、为了在没有css的情况下，页面也能呈现出很好的内容结构、代码结构（为了裸奔时好看）
2、有利于网络爬虫有效快速的捕捉网页的信息，有利于搜索引擎的优化
3、便于团队的开发和优化
4、遵循w3c的规则减少差异
表单注意：
1、border表格边框，0表示无边框，1表示有边框
2、tr表示行（row），td表示列，单元格（data数据单元内容）
th表示表格的列标题，caption表格标题
3、colspan="2"列上两个单元格合并，占用相邻单元格的空间
rowspan="2"行上两个单元格合并，占用相邻行上同位置单元格空间
4、cellpadding单元格内编剧
cellspacing单元格与单元格之间的间距，外边距
5、align表格内容的对齐方式（right，left，center）
6、border-collapse:collapse合并表格边框，css应用
7、表格的语义化，thead页眉、tbody主题内容、tfoot页脚
input输入控件：
type类型：
text：文本框
password：口令密码输入框
reset：充值或清除
button：命令按钮
checkbox：复选框
radio：单选框
submit：自带后台提交功能的按钮
file：文件上传控件
hidden：隐藏字段
image：图像
color：颜色
email：邮件
date：日期
number:数字
disabled = "disabled" 表示输入控件不可用
readonly = "readonly" 表示只读不可修改
Date pickers 日期选择器：
date - 选取 日、月、年
month - 选取 月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取 时间、日、月、年（utc时间）
datetime - local - 选取 时间、日、月、年（本地时间）
search 搜索域。显示为常规文本域
color 颜色
time 日期和时间（在浏览器中不会呈现任何的特殊效果）
新增属性：
1、autofocus：规定在页面加载时，域自动地获得焦点
2、form：规定输入域所属的一个或多个表单，通过id名称，绑定到属性上，如需引用多个表单，请使用空格分隔的列表
3、height，width：规定用于image类型的input标签的图像高度和宽度
4、multiple：<input>标签：email和file输入域中可选择多个值
5、pattern：用于验证input域的模式，也就是正则表达式
6、placeholder：提供一种提示，描述输入域所期待的值，提示会再输入域为空时显示出现，会在输入域获得焦点时消失
7、requlred：规定必须在提交之前填写输入域（不能为空）
块级元素和行内元素
块级元素（block level element）有：
div，表单，表格，标题，段落等
行内元素（inline element）有：
图片，输入框，span，strong等
两者区别：
在标准文档流里面，块级元素拥有以下特点：
1、块级元素比较“霸道”，总是独占一行
2、具有一定的宽高，其宽高域内容无关
3、常用作容器、可以容纳行内元素和其他块级元素
行内元素的特点：
1、和其他行内元素都在一行上
2、期宽高只与内容有关
3、行内元素只能容纳文本或者其他行内元素，无法容纳块级元素
4、行内元素可以设置外边界（margin),但是外边界不对上下起作用，只能对左右起作用（在同一行上，相对相邻元素作用），可以设置内边界
（padding），但是内边界在IE6中不对上下起作用，只能对左右起作用。
视频：
<video src = "视频地址" controls = "controls"></video>
control:供添加播放，暂停和音量控件
autoplay：视频在就绪后马上播放
loop：当媒介文件完成播放后再次开始播放
preload：视频在页面加载时进行加载，并预备播放
音频：
<audio src= ""视频地址" controls = "controls"></audio>
control:供添加播放，暂停和音量空间
autoplay：音频在就绪后马上播放
loop：当媒介文件完成播放后再次开始播放
preload：视频在页面加载时进行加载，并预备播放
媒介源：
<audio controls>
<source src = "音频地址" type = "audio/音频格式">
<source src = "音频地址" type = "audio/音频格式">
</audio>
定义媒介元素，比如audio，video等媒介资源。
<>
表单：
</head>
<body>
<!--<form action="#" method="post">-->
<!--用户名：<input class="username" id="username1" name="username2" type="text"-->
<!--readonly="readonly">-->
<!--密码：<input name="password" type="password" placeholder="请输入密码">-->
<!--<input type="button" value="登录">-->
<!--<input type="submit">-->
<!--<button>我是一个按钮</button>-->
<video src="冰河世纪.mp4" controls autoplay></video>
<audio src="song.mp3" controls> </audio>
<textarea name="" id="" cols="30" rows="10">文本域</textarea>
<div>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
<div>
<input type="checkbox">多选
</div>
<select multiple="multiple">
<option value="sichuan" selected="selected">川菜</option>
<option value="guangdong">粤菜</option>
<option value="beifang">北方菜</option>
<option value="shanghai">上海菜</option>
<option value="west" >西餐</option>
<option value="thailand">泰国菜</option>
</select>
<div>
<fieldset>
<legend>标题</legend>
<p>男 <input name="sex" type="radio"></p>
<p>女 <input name="sex" type="radio"></p>
</fieldset>
</div>
<label for=""></label>
<div>
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="women" name="sex">
<label for="women">女</label>
</div>
<span style="width: 100px;height: 100px;border: 1px solid red;font-size: 100px">我是格一个span</span>
<strong>我是一个srtong</strong>
<div style="width: 500px;height: 500px;border: 1px solid red">我是一个盒子</div>
<img src="京东LOGO.png" alt="">f
<input type="text">用户名
<!--</form>-->
</body>
</html>
表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px" align="center" style="border-collapse:collapse">
<caption>学生管理表</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
<th>非得给第三</th>
</tr>
<tr>
<td colspan="2">1-1</td>
<!--<td>1-2</td>-->
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
2149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
