- <h1><h1> h1-h6 字体粗细大小依次变弱 一级标题 二级标题
- <p></p> 段落标签
- <hr/> 下划线
- <br/> 换行
- <strong></strong> 加粗 <b></<b>
- <em></em> 斜体 <i></i>
- 区别:strong和em标签具有强调效果,且被搜索引擎作为关键字
- 块元素与行元素区别
- 块:每个标签独占一行 2.可以设置width,height,margin,padding
- 行标签:1.所有元素都在一行,超过浏览器宽度,会进行换行
- 2.无法设置宽度,高度,行高,顶和底边距,由内容撑大,可设置行高属性调整这个框的高度
- 块级元素可以包含行内元素 ,行内元素不可以包含块元素
- 块级元素有:< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl
- 行内元素 < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />
- 特殊符号
- 空格  ;
- 版权符号©;
- 大于 great than gt;
- 小于 less than lt;
- 引号:";xx";
- 图片标签
- <img src="url" alt="图片损坏或者路径不对提示" title="鼠标悬浮文字" width=" " height=" '>
- src:图片路径
- alt="图片损坏或者路径不对提示
- " title="鼠标悬浮文字"
- width:宽度
- height长度
- 路径
- 相对路径:从本计算机内选取文件
- 绝对路径现在已淘汰!
- 超链接
- ./你所在的文件在统一目录下./可以不写
- ../你所在的文件不在同一目录下通过../来到上一级目录
- 超链接分为三种
- 页面间超链接包含图片超链接和文本超链接
- 图片超链接格式< a href="url" ></a>
- 文字超链接格式<a href=" " >文字</a>
- 锚链接 (点击固定文字跳转到锚点)
- 固定点:< a href="#fix"></a>
- 锚点:< a name="fix"></a>
- 功能性超链接
- mailto 邮箱
- <a href="mailto:2726704018@qq.com">我的邮箱</a>
- target 控制超链接新开页面的打开方式
- target—self 在当前页面打开超链接
- target—blank 新打开一个页面打开超链接
- target—news 新开一个页面打开超链接
- 列表分类
- 无序列表 ul 用于导航
- <ul>
- <li>123</li>
- <li>234</li>
- </ul>
- 效果: ·123
- ·234
- 有序列表 ol
- <ol>
- <li>123</li>
- <li>234</li>
- </ol>
- 效果:1.123
- 2.123
- 定义列表 dl
- <dt> 定义表格标题
- <dd></dd>
- 表格
- <table>
- <tr> 行
- <td></td> 第一行第一列
- <td></td> 第一行第二列
- <tr>
- </table>
- 跨行合并 <rowspan> <td rowspan="2 "></td> 表示2行合并
- 夸列合并 <colospan> <td colspan="2 "></td> 表示2列合并
- 表单
- <form method=" post" action=" " emctype="multipart/form-data>
- method:用于设置表单的数据的提交方式 有post/get方式,post相对比较安全,get相对较快
- action:用于指定接受并处理表单数据的服务器程序的ulr地址
- emctype="multipart/form-data:以附件形式上传
- <input>标签的属性 Input 类型
- text 定义单行的输入字段,用户可在其中输入文本
- password 定义密码字段。该字段中的字符被掩码
- file 定义输入字段和 "浏览"按钮,供文件上传
- radio 定义单选按钮
- checkbox 定义复选框
- hidden 定义隐藏的输入字段
- button 定义可点击按钮
- image 定义图像形式的提交按钮
- reset 定义重置按钮。
- submit 定义提交按钮。
- 多行文本域:多用于自我评价 textarea
- color 从拾色器中选择一个颜色: 选择你喜欢的颜色:
- date date 类型允许你从一个日期选择器选择一个日期。
- datetime-local datetime-local 类型允许你选择一个日期和时间 (无时区)
- email email 类型用于应该包含 e-mail 地址的输入域
- month 生日 (月和年): <input type="month" name="bdaymonth">
- number 定义一个数值输入域(限定): 数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
- range 类型用于应该包含一定范围内数字值的输入域。
- r ange 类型显示为滑动条。
- search 类型用于搜索域 Search Google: <input type="search" name="googlesearch">
- tel 定义输入电话号码字段:
- time 定义可输入时间控制器(
- url
- url 类型用于应该包含 URL 地址的输入域。
- 在提交表单时,会自动验证 url 域的值。
- week 允许你选择周和年
- <input> <textarea><select>标签只能在表单里面使用
- <textarea>标签用法:
- <textarea cols="每行中的字符数" rows="显示的行数">
- textarea 可选属性
- name 由用户自定义 控件的名称
- readonly 可读
- disable 第一次加载页面时禁用该标签(显示灰色)
- <select>标签用法:
- 关键词可以用<labal>for="">城市<labal>
- <select>
- <option vaule="淮安">淮安</option>
- <option vaule="镇江">镇江</option>
- <option vaule="常州">常州</option>
- 方法二
- <select>
- 城市:<option vaule="淮安">淮安</option>
- <option vaule="镇江">镇江</option>
- <option vaule="常州">常州</option>
- </select>
- </select>
- 登陆逻辑:
- 前台传输用户名和密码到后台
- 后台根据前台传递过来的用户名和密码去数据库查询且能够查询到数据库用户存在 则登陆成功,反之说明用户不存在或者密码错误
- HTML表单中的三大高级
- hidden 隐藏域 某些后台必须要用到的数据 但又不想给前台看见
- readonly 只读
- disable 禁用
- 布尔类型
- select disable checked readonly
- HTML5新增结构元素
- <div class ="box">
- <header class="header">头部</header>
- <main class="main">
- <nav class="nav">导航</nav>
- <div class="contain">
- <aside>侧边栏</aside>
- <article>正文</article>
- </div>
- </main>
- <footer class="footer"><底部</footer>
- </div>
- 网页布局
- 上中下
- 上左右下
- 上左中右下
- 新多媒体元素
- video:视频:用法 <video width="320" height="240" controls autoplay loop> <source src="movie.mp4" type="video/mp4"></video>
- control:控制键 autoplay 自动播放 loop 循环 weight 宽度 height 高度 play 播放 pause 暂停
- audio:音频
- <source> 定义多媒体资源 <video> 和 <audio>
- HTML5 新的表单元素
- <datalist>
- <input> 元素使用<datalist>预定义值:
- <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>
- HTML5表单新增属性
- contenteditable 规定是否允许用户编辑内容 <div contenteditable>="true"></div>
- designMode 规定整个页面是否编辑
- time 标签定义日期和时间
- tabindex 规定元素tab键跌制次序
- hidden 规定对元素进行隐藏
- maxlength:限制最大长度,只有在有输入的情况下才有用,不区分中英文。
- minlength:限制最小长度,但它不是H5标准属性,仅部分浏览器支持。
- 表单校验
- 校验用户填写的数据格式是否正确
- html5表单新属性
- autocomplete:自动补全,是否自动记录之前提交的数据,以用于下一次输入建议。
- autofocus:自动获得输入焦点。
- height 与 width:规定用于 image 类型的 <input> 标签的图像高度和宽度。
- list:规定输入域的 datalist。datalist 是输入域的选项列表。
- min 与 max:限定输入数字的最小值或最大值
- multiple:是否允许多个输入值,若声明该属性,那么输入框中允许输入多个用逗号隔开的值。
- pattern (regexp):指定一个正则表达式,对输入进行验证。(正则默认首尾加^$)
- placeholder:占位符,用于在输入框中显示提示性文字,与value不同,不能被提交。
- required:在表单提交时会验证是否有输入,没有则弹出提示消息。
- step:限定输入数字的步长,与min连用。
- maxlength:限制最大长度,只有在有输入的情况下才有用,不区分中英文。
- minlength:限制最小长度,但它不是H5标准属性,仅部分浏览器支持。
- placeholder:占位符,用于在输入框中显示提示性文字,与value不同,不能被提交。
- 校验分两种
- 前段能够进行校验
- 密码长度
- 前段不能够进行校验的
- 表单的校验的方法
- placeholder 文本框提示一种提示 常用在input 标签 text search url email passsword 等
- requier 必须 (表单元素不能为空)
- pattern 用户输入格式匹配所符合的正则表达式
- 请使用下面的属性来规定对数字类型的限定:
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值