HTML基础-01
HTML基础知识HTML：超文本标记语言，是一种使用结构化Web网页（标准制定者：W3C）及其内容的标记语言。发展过程：XHTML5，HTML5，XHTML1.0,HTML4.01，HTML3.2HTML5特性：兼容性，效率，安全性实用性：新增元素都是对现有网页和用户习惯进行跟踪、分析和概括出来的分离：将结构和样式完全分离，提高复用率简化，通用性，无插件C/S架构软件（C：客户端，S：服务器）客户端：用户提供客户端来使用软件服务器用来处理软件的业务逻辑特点： 必须安装之后才能使用软件更新时，服务器和客户端都需要更新软件无法跨平台使用软件客户端和服务器间的通信采用自有协议，安全性好B/S架构软件（B：浏览器，S：服务器）特点：网站，利用网站使用软件不需要安装便可使用软件更新，客户端不需要更新软件可以跨平台使用客户端和服务器间采用HTTP通信协议，安全性差HTML规范写法：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>网页标题</title><stype>CSS样式</stype></head><body><!--网页内容，可以使文本、图片等--></body></html>
具体解释：<html> </html>：根标签，表示整个网页。包含两个属性<head><body>,lang="en"英文，lang="zh"中文<head> </head>：文档头部，描述文档的各种信息和属性，包括网页标题----此处内容不会显示在网页上，用户看不见，给浏览器看<meta>：作用：提供网页相关的元信息，设置描述信息，关键字，重定向（用户搜索关键字，便可找到该网页）<meta name="keywords/description" content="具体内容，逗号隔开”><meta http-equiv="refresh" content="3;url=http://www.">三秒刷新页面字符集：定义当前文件使用的字库作用：编码和解码采用的规则，出现乱码的原因：编码和解码采用的字符集不同。常见的字符集（charset）：UTF-8：国际标准字库ASCIIGBK/gb2312：中国字库，国家标准注释：为代码添加适当注释，仅在编辑文本情况下可见，在浏览器页面不会显示语法：<!--注释-->DOCTYPE作用：DOCTYPE声明在文档最前面，告诉浏览器以何种方式渲染页面，包含二种模式：严格模式、混杂模式。严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容。HTML属性和值：属性：用于修饰元素，必须位于开始标签里，一个元素的属性不止一个，多个属性用空格隔开每个属性都有值：属性和属性的值之间用等号链接属性的值包含在引号当中属性总是以名称/值对的形式出现<header>网页头部 <hgroup>一个标题组<main>网页主体 <article>网页中的一块内容<footer>网页底部 <section>一个区块<nav>导航 <aside>辅助信息以上均为块元素，独占一行。<q>短引用 <blockquote>长引用标题与段落标题：h1-h6等级（从小到大），默认加粗，具有换行符，不能嵌套h1+h2+h3：并行显示 h1>h2>h3：嵌套显示h1{标题}*10+tab键=创建10个<h1>标题</h1>h1{$}*10+tab键=1,2,3.....10个标签段落：<p>...</p>字符实体有些东西在浏览器中打不开，需要使用字符实体 ； 空格  全角空格© 版权符合¥ 人民币符号￥> 大于号>< 小于号<快捷符号+：标签并行关系*：创建多个标签，div*5+tap{}:设置内容（）：对内部的内容，（tr>td*4）*5[]:设置属性，div[id=demo class]@:设置$符号的起始位置$:设置起始位置，div{$@4}*5+tap键=4,5,6,7,8文本修饰标签强调：<strong> </strong>(加粗)<em> </em>(斜体)<i> </i>：斜体；<b> </b>：加粗区别：1.写法和展示效果有区别，一个加粗，一个斜体2.strong的强调性更强，em稍弱上标/下标：<sup>上标 </sup> /////<sub>下标 </sub>删除文本，插入文本：<del> </del>/////<ins> </ins>两者配合使用图片标签和属性<img src="引入图片地址" alt="当图片加载失败时，显示的提示文字" title=“ 提示文字（鼠标放在图片上出现的提示）”><img>标签设置高度height，宽度width图片格式：jpg(jpeg):支持的颜色丰富，不支持透明效果，适合显示图片GIF：支持的颜色较少，支持简单透明，支持动图png:支持颜色丰富，支持复杂透明webp:google专门为页面设计一种图片格式，支持颜色丰富、支持复杂透明、支持动图，并且占用内存特别小，集各种优点，兼容性差通过base64编码的图片（背景图片必须快速出现），base64可以将图片转换成字符串，直接在网页中使用。注意：效果一致，用小的；效果不一致，用效果好的；音频标签<aduio controls autoplay src=' '> </aduio>controls:用来设置用户是否控制音频播放 ； 没有属性值，允许用户播放就加（有音频），不允许就不加（无音频）autoplay：设置音乐是否自动播放，默认不会例：<aduio controls autoplay loop(循环播放）>对不起，浏览器不支持此标签<source src='#'></aduio>视频标签<video controls src='#' width=' '> </video><embed>标签：定义嵌入插件，以便播放多媒体信息。<embed width=' 'height=' 'src=' 'type='video/mp4'> </embed><object>标签：定义一个嵌入对象，用于在网页中插入多媒体信息（图片，音频，视频）<object data="#" width=' 'height=' 'type='video/mp4'> </object>object功能强大，用于替代img超链接用于引入文件的地址路径，相对路径，绝对路径，用 # 号来创建固定链接<a href=' # '> </a>target:改变链接的打开方式_self：在当前页面打开_blank：新窗口打开（慎用）<base target='_blank'>:改变标签的默认行为锚点给标签设置name或id属性，通过<a href='#'>链接锚地am，链接到当前页面中的指定位置，或其他页面的指定位置。例：当前页面内锚点：<h1 id='top'>顶部</h1><a href='#top’>返回顶部</a>其他页面：跳转<a href='./地址#middle'>进入另一个页面的中间位置</a>中间位置设置锚点：<p id='middle’>列表无序列表：<ul> </ul>，无先后之分；列表项：<li> </li>ul/li必须同时出现，不能单独书写。嵌套一个/多个li，ul只能放li标签，并不能放其他内容li：type属性修改：disc:默认实心圆；circle:空心圆；square:实心方块；有序列表：<ol> </ol> <li> </li>li：type属性设置项目符号A大写英文字母a小写英文字母1阿拉伯数字I大写罗马数字i小写罗马数字start:设置列表符号从第几个开始排列，属性值只能是阿拉伯数字reversed：设置列表符号的倒序，会会出现负号。例：<ol type=’A’start=’3’reversed><li>ddwws</li></ol>定义列表给文本添加定义列表语义dl:定义列表 只能嵌套（一个、多个）dd/dt，两者为同一级标签，dd是dt的解释、定义、说明dt:定义标题 容器级 dd:定义描述 容器级，跟在dt后面，解释dt例：<dl><dt>速度</dt><dd>速度就是路程除以时间</dd></dl>表格1. 表格基础：三层嵌套关系table>tr>th|tdtable:定义表格容器tr：定义行th：定义表头td：定义单元格，最简单的表格要求每一行单元格个数相同2. 属性border：设置表格的边框，外边框的宽度borde-rcolor:设置边框的颜色height,weight:设置高宽度align:设置表格的对齐方式center,left,rightcellspacing:设置边框与边框之间的距离cellpadding:设置内容与边框之间的距离background:设置表格的背景图片bgcolor:设置表格的背景颜色Summary:表格隐藏信息，用于提高SEOth/td/tr标签table>tr>td(th)tr:行语义，align:设置当前单元格中文本的水平对齐方式left,center,rightbgcolor,background:设置背景颜色或背景图片td（th）:单元格语义，th文本具有默认加粗，居中的效果，容器嵌套任何东西bgcolor,background:设置背景颜色和背景图片colspan:列合并，左右合并，横 rowspan：行合并，上下合并，纵练习：将表格合并成如下形式border-collapse:collapse;设置边框的合并表格标题：caption;只有一个表题表头：thead主体部分：tbody底部：tfoot<table><caption>.....</caption><thead>(tr>td*5)*2+tab键</thead><tbody>(tr>td*5)*5+tab键</tbody></table>3. tr:first-child{设置第一行}tr:nth-child(2n){设置奇、偶行进行操作}
创建表格时，如果没有使用tbody，浏览器会自动添加tbody，并且将所有的tr都添加到tbody中，所以tr的父元素并不是table而是tbody。表单1. form表单：用来收集用户数据，并提交到对应的地址。功能性标签，不是结构性name:表单的名称 action：设置表单提交的地址 method:设置数据提交的方式（GET,POST）target：页面打开方式（_self,_blank,_parent,_top,framename）表单中的控件：textarea文本域，select下拉列表，input输入框，button按钮textarea与label标签:多行文本域、多行文本输入框rows设置行高，数字 cols设置列宽，数字----代表字节label表单控件（label input）定义标注 for规定label绑定到哪个表单控件一种方法：<form action=’./create’ method=’get’ target=’_blank’><label for=’description’> </label><textarea name=’’ id=’description’ cols=’’ rows=’’> </textarea></form>另一种：将表单控件写在label元素内，实现联动<form action=’./create’ method=’get’ target=’_blank’><label for=’description’>---------不需要加id，此处去除<textarea name=’’ id=’description’ cols=’’ rows=’’> </textarea></label></form>Select标签Select创建单选或多选菜单multiple:设置多选 size设置显示在页面上的列表项数Option用来定义下拉列表中的一个选项，属性：selected设置默认被选中的列表项（布尔型） 注意：内容只能是文本，不能出现标签Optgroup定义选项组： labeltext为选项组规定描述<form action=""><label for="email" >邮箱</label><select name="" id="email" multiple size="5"><optgroup label="非弹出选项"><option value="">@123.com</option><option value="">@345.com</option><option value="">@876.com</option><option value="">@890.com</option><option value="">@567.com</option></optgroup><optgroup label="弹出选项"><option >支付宝</option><option value="">qq</option><option value="">淘宝</option><option value="">微信</option></optgroup></select></form>button定义按钮type规定按钮类型（button reset submit）input输入语义单标签，搜集用户信息type属性：text单行文本框，文本输入框（默认类型）pattern规定输入字段的值的模式或格式，错误输入会提示Pattern=’[0-9]{2,5}’：数字0-9,2-5位Password密码输入框radio单选框 单选框要统一设置name属性，value设置不同值，label标签说明checkbox复选框input:password+tab键===<input type=’password’>input:radio+tab键===<input type=’radio’>radio单选框例：设置一个性别选项<label>性别</label><label for=’man’>男</label><input type=’radio’ id=’man’ value=’男’ name=’sex’><label for=’woman’>女</label><input type=’radio’ id=’woman’ value=’女’ name=’sex’>
Checkbox多选框<label>兴趣爱好</label><label for=’1’>足球</label><input type=’checkbox’ id=’1’ value=’足球’ name=’intrest’><label for=’2’>篮球</label><input type=’checkbox’ id=’2’ value=’篮球’ name=’intrest’>
image图片<input type=’image’ src=’地址’ weight=’’ height=’’>file文本域<label>选择图片</label><input type=’file’>
hidden隐藏文本<input type="hidden" name="color" value="red">用户看不见，后端可见button普通按钮<input type="button" value="普通按钮">没有任何功能submit提交按钮<input type="submit" value="提交">reset重置按钮
<input type="reset" value="重置按钮">按下系统数据重置2. button标签之间所有内容都是按钮的内容，比如文本或者多媒体内容三种类型：button,submit,reset<button>按钮</button>：默认submit提交按钮<button type=”button”>普通按钮</button>3. button与input设置标签区别设置内容不一样：button在标签之间设置内容，input在value属性中设置内容
button内容可以包含其他标签，input不能渲染其他标签4. 表单控件通用属性<value:定义送往服务器的选项值(后)<name:定义文本区的名称(前)<autofocus:自动获取焦点：打开一个页面，光标自动出现在某一地方<placeholder=“”:未输入任何值时显示的内容
<disabled:该文本域是禁用的，变成灰色，不能使用<readonly:该文本域是只读的<maxlength/minlength:规定最大/小字符数（textarea、input）<required:文本区域必填（textarea、input）<textarea autofocus name="trod" value="134" id="intro" placeholder="请输入" maxlength="3" ></textarea>
5. 废弃标签：b加粗,i斜体字,u下划线,s删除线其他标签：pre:预格式化原样输出Strong:强调，加粗 em:强调，斜体字 br:换行（单）Code:单行代码 ins:下划线 hr:分割线（单）del:删除线 abbr:定义缩写address:定义地址 iframe:内联框架iframe:内联框架，引用外部资源（外部网页），开发中不建议使用，中间内容不会被搜索引擎抓住<iframe src=”www.baidu.com” frameborder=”0”></iframe>
6. Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。<input type="text" placeholder="猫咪图片地址">给表单添加一个必填字段在input元素中加上required属性就可以了，例如：<input type="text" required>7.创建一组单选按钮单选按钮只是input输入框的一种类型。每一个单选按钮都应该嵌套在它自己的label（标签）元素中。所有关联的单选按钮应该拥有相同的name属性。8.创建一组复选框checkboxes（复选框）就好比多项选择题，正确答案有多个。复选框是input输入框的另一种类型。每一个复选框都应该嵌套在它自己的label（标签）元素中。所有关联的复选框应该拥有相同的name属性。注：通过添加checked属性，设置某个单选按钮或多选按钮被默认选中。<input type="radio" name="test-name" checked>