|
HTML基础知识 HTML：超文本标记语言，是一种使用结构化Web网页（标准制定者：W3C）及其内容的标记语言。 发展过程：XHTML5，HTML5，XHTML1.0,HTML4.01，HTML3.2 HTML5特性： 兼容性，效率，安全性 实用性：新增元素都是对现有网页和用户习惯进行跟踪、分析和概括出来的 分离：将结构和样式完全分离，提高复用率 简化，通用性，无插件 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：国际标准字库 ASCII GBK/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|td table:定义表格容器 tr：定义行 th：定义表头 td：定义单元格，最简单的表格要求每一行单元格个数相同 2. 属性 border：设置表格的边框，外边框的宽度 borde-rcolor:设置边框的颜色 height,weight:设置高宽度 align:设置表格的对齐方式center,left,right cellspacing:设置边框与边框之间的距离 cellpadding:设置内容与边框之间的距离 background:设置表格的背景图片 bgcolor:设置表格的背景颜色 Summary:表格隐藏信息，用于提高SEO
th/td/tr标签 table>tr>td(th) tr:行语义，align:设置当前单元格中文本的水平对齐方式left,center,right bgcolor,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. <input type="text" placeholder="猫咪图片地址">
给表单添加一个必填字段 在
input元素中加上required属性就可以了，例如：<input type="text" required>7.创建一组单选按钮
单选按钮只是
8.创建一组复选框
每一个复选框都应该嵌套在它自己的
注：通过添加 <input type="radio" name="test-name" checked> |
|||||||||||||||||||
|
|
