HTML基础 Li.051
html 标签简单介绍 # html5文件声明 <!DOCTYPE html> # 根标签 <html lang="en"> # 头 <head> # 字符集 <meta charset="UTF-8"> # 文档标题, 标签页标题 <title>01入门案例</title> </head> # 身体, 所有文档内容 <body> <h1 align="center">这是我的第一个HTML入门案例</h1> </body> </html> HTML 注释 标签 注释 <!-- 注释 --> 标签 开始和结束标签 <h1></h1> 自闭合标签<br/> <hr/> 标签的嵌套 正确嵌套 <h1><u>sefe</u></h1> 错误嵌套 <h1><u>sefe</h1></u> 块级元素和行内元素 块级元素: 在页面中以块的形式展现, 自己独占一行, 后面内容会自动换行<p><hr><div> 行内元素: 在页面中以行的形式展现, 不会换行<b><i><u><span> div和span <div>: 是一个通用的内容容器, 没有特殊语义. 一般用来对其它元素进行分组, 用于样式化相关的需求 <span>: 是一个通用的行内容器, 没有特殊语义. 一般用来纺织元素以达到某种样式. <div>和<span>标签核心作用是布局页面 HTML 的属性 什么是属性 属性可以提供一些额外的信息, 这些信息不会显示在内容中, 但可以改变标签的形式或提供的数据使用 定义格式 属性名=属性值 属性的规范 同一个标签中属性的名称必须唯一 不区分大小写, 推荐小写 属性值可以使用单引号或双引号, 推荐双引号 常用的属性 class 定义元素的类名, 用户选择或访问特定的元素 id 定义元素的唯一标识, 在整个文档中必须是唯一的 name 定义元素的名称, 一般用于表单数据提交到服务器 value 定义在元素内显示的默认值, 一般常用于表单标签中 style 定义元素的css样式 HTML 的特殊字符 特殊字符 在html中, 像< > " ' 空格 & 都是特殊字符, 它们是语法本身的一部分 字符表示 < < > > " " ' ' & & 空格 HTML 练习一 样式演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式演示</title> <style> div{ border: 1px solid red; width: 60%; height: 500px; /* 边框外边距 */ margin: auto; } </style> </head> <body> <div>第一个div</div> </body> </html> 文本标签 p 表示文件的一个段落 h 表示文档标题,<h1>-<h6>,呈现六个不同级别的标题,h1最高h6最低 hr 表示段落级元素之间的主题转换,一般显示为水平线 ul 表示一个无序列表,可含多个元素,无编号显示 ol 表示一个有序列表,通过渲染为带编号的列表 li 表示列表里的条目 em 表示文本着重,一般用斜体显示 i 表示文本斜体 strong 表示文本重要,一般用粗体显示 b 表示加粗文本 font 表示字体,可以设置样式(已过时) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻标题案例</title> <style> .divCenter{ width: 60%; margin: auto; } .headCenter{ text-align: center; } p{ font-size: 18px; } </style> </head> <body> <div class="divCenter"> <h1 class="headCenter" >这是一个标题</h1> </div> <div class="divCenter"> <em><font size="2" color="gray">作者: 李小明 2021年10月1日</font></em> <hr/> </div> <div class="divCenter"> <h3>弹性布局flex是一个几年前的CSS属性了</h3> </div> <div class="divCenter"> <p>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 </p> <p> 首先，flex被称为一个弹性盒模型，也有称弹性布局的。 总之，盒子也好、布局也罢，我们总是需要有一个容器Container的： </p> <ol> <li>首先，flex被称为一个弹性盒模型，也有称弹性布局的。kskdfjksjdfk</li> <li>总之，盒子也好、布局也罢，我们总是需要有一个容器Container的</li> </ol> <p><strong>加粗1</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 </p> <p><strong>加粗2</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 </p> </div> </body> </html> 案例二头条页 div 样式布局 .left{ width: 20%; float: left; } .center{ width: 59%; float: left; } .right{ width: 20%; float: left; } <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> float 浮动(left right none) clear清除浮动(both) text-align(left right center) background背景色 图片标签 img 可以显示图片,本地或网络 src 必需,图片地址 title 鼠标悬停(hover)时显示文本 alt 图形不显示时的替换文本 height 图像高度 width 图像宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片样式演示</title> </head> <body> <img src="login.png" title="说明" alt="图片不存在" width="1000" height="30px"/> <img src="no.png" title="说明" alt="图片不存在" width="1000" height="30px"/> </body> </html> 超链接标签 a 表示超链接 href 表示超链接指向的URL 本地或网络都可 targe 页面打开方式(_self当前页_blank新标签页) a:hover 鼠标悬停样式 text-decoration:none; 去掉下划线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式演示</title> <style> div{ /*border: 1px solid red;*/ } .left{ width: 20%; float: left; } .center{ width: 60%; float: left; } .right{ width: 20%; float: left; } .footer{ clear: both; text-align: center; background: blue; } a{ color: white; text-decoration: none; } </style> </head> <body> <div><img src="top.png" alt="top.png" width="100%"></div> <div><img src="navibar.png" alt="navibar.png" width="100%"> </div> <div> <div class="left"> <img src="left.png" width="100%"> </div> <div class="center"> <p>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。 </p> <p> 首先，flex被称为一个弹性盒模型，也有称弹性布局的。 总之，盒子也好、布局也罢，我们总是需要有一个容器Container的： </p> <ol> <li>首先，flex被称为一个弹性盒模型，也有称弹性布局的。kskdfjksjdfk</li> <li>总之，盒子也好、布局也罢，我们总是需要有一个容器Container的</li> </ol> <img src="center1.png" width="100%"> <p><strong>加粗1</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。 </p> <p><strong>加粗2</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :) 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。 </p> <img src="center2.png" width="100%"> <p> 之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。 早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。 好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。 </p> </div> <div class="right"> <img src="right.png" width="100%"> <img src="right.png" width="100%"> <img src="right.png" width="100%"> </div> </div> <div class="footer"> <a href="http://lizicai.com" target="_blank">李子菜</a> <a href="http://lizicai.com" target="_blank">李子菜</a> <a href="http://lizicai.com" target="_blank">李子菜</a> <a href="#" target="_blank">李子菜</a> </div> </body> </html> 案例三 注册 div样式布局, 背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片演示</title> <style> body{ background: url("Halcrow.jpg"); } </style> </head> <body> </body> </html> 表单标签 form 表单标签 action 用于提交数据的路径 method 用于提交数据的方式( get 和post ) (get 表单数据会显示在地址栏中, 不安全, 地址栏长度有限制) (post 表单数据不会显示在地址栏中, 数据封装在请求体中, 安全, 长度无限制) autocomplete 是否记录补全( on 和 off ) 表单项标签 lable 表单元素说明,配置表单项标签使用 for 属性值必须和表单项的id属性值一致 input 表单项标签,多种输入类型来接收用户数据 type 数据的类型 id 唯一标识 name 提交服务器的标识 value 默认数据值 placeholder 默认提示信息 required 是否必须有数据 button 按钮标签,不同的按钮有不同的作用 type 属性,按钮的功能(submit,reset,button) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单项标签演示</title> </head> <body> <form method="get" action="#" autocomplete="on"> <label for="username">用户名: </label> <input type="text" name="username" id="username" value="" placeholder="请输入用户名" required> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">普通按钮</button> </form> </body> </html> 表单项标签type属性值 text 普通文本框 password 密码框 email 邮箱框,简单验证 radio 单选框 选择必须有相同的name属性值, value属性设置实际提交的值, checked属性代表默认选中 checkbox 得选框 选项必须有相同的name属性值, value属性设置实际提交的值, checked属性代表默认选中 date 日期框 time 时间框 datetime-local 时间日期框 number 数字框 range 滚动条数值框,min最小值,max最大值,step步进值 search 可清除文本框 tel 电话框 url 网址框 file 文件上传框 hidden 隐藏域 value属性设置实际提交的值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签type属性演示</title> </head> <body> <form method="get" action="#"> <label for="username">用户名:</label> <input type="text" name="username" id="username" placeholder="请输入用户名"> <br/> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请输入密码" > <br/> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="请输入邮箱"> <br/> <label for="gender">性别:</label> <input type="radio" name="gender" value="male" id="gender">男 <input type="radio" name="gender" value="female">女 <input type="radio" name="gender" value="other" checked>保密 <br/> <label for="hobby">爱好:</label> <input type="checkbox" name="profession" value="music" id="hobby">音乐 <input type="checkbox" name="profession" value="game" >游戏 <br/> <label for="birthday">日期:</label> <input type="date" name="birthday" id="birthday" > <br/> <label for="time">时间:</label> <input type="time" name="time" id="time" > <br/> <label for="datetime">日期和时间:</label> <input type="datetime-local" name="datetime" id="datetime" > <br/> <label for="number">number:</label> <input type="number" name="number" id="number" > <br/> <label for="range">rang:</label> <input type="range" name="range" id="range" min="0" max="10" step="2"> <br/> <label for="search">search:</label> <input type="search" name="search" id="search" > <br/> <label for="tel">tel:</label> <input type="tel" name="tel" id="tel" > <br/> <label for="url">url:</label> <input type="url" name="url" id="url" > <br/> <label for="file">file:</label> <input type="file" name="file" id="file" > <br/> <input type="hidden" name="hidden" id="hidden" value="see"> <br/> <button name="submit" type="submit" >提交</button> <button name="重置" type="reset">重置</button> </form> </body> </html> 其他常用表单项标签 select 表示下拉列表标签 optgroup 不用接列表分组标签 label属性,设置分组名称 option 表示下拉列表项标签 textarea 表示文本域标签 rows属性代表行数,cols属性代表列数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其他常用表单项标签演示</title> </head> <body> <form method="get" action="#" autocomplete="off"> <label for="city">所在城市</label> <select name="city" id="city"> <option>请选择城市</option> <optgroup label="直辖市"> <option>北京</option> <option>上海</option> <option>深圳</option> </optgroup> <optgroup label="省会市"> <option>广州</option> <option>杭州</option> </optgroup> </select> <br/> 个人介绍: <textarea name="desc" rows="10" cols="20"> </textarea> <button name="submit" type="submit" >提交</button> <button name="重置" type="reset">重置</button> </form> </body> </html> 演示案例三 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("background.png"); } .divForm{ background: white; width: 400px; margin: auto; text-align: center; } .divFormLeft{ background: white; width: 60%; margin: auto; text-align: left; } </style> </head> <body> <div> <img src="navibar.png" width=100%> </div> <div class="divForm"> <div class="divFormLeft"><a>注册详情</a></div> <hr/> <div> <form method="get" autocomplete="on" action="#"> <div class="divFormLeft"> <div > <label for="username">姓名:</label> <input type="text" name="username" id="username" placeholder="在此输入姓名"> <br/> </div> <div> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="在此输入密码"> <br/> </div> <div> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="在此输入邮箱"> <br/> </div> <div> <label for="tel">手机:</label> <input type="tel" name="tel" id="tel" placeholder="在此输入手机"> <br/> </div> </div> <hr/> <div class="divFormLeft"> <div > <label for="gender">性别:</label> <input type="radio" name="gender" id="gender" value="male">男 <input type="radio" name="gender" value="femal" >女 <br/> </div> <div> <label for="hobby">爱好:</label> <input type="checkbox" name="hobby" id="hobby" value="music">音乐 <input type="checkbox" name="hobby" value="movie" >电影 <input type="checkbox" name="hobby" value="game" >游戏 <br/> </div> <div> <label for="birthday">出生日期:</label> <input type="date" name="birthday" id="birthday"> <br/> </div > <div> <label >所在城市: </label> <select id="city" name="city"> <option>请选择城市</option> <optgroup label="直辖市"> <option>北京</option> <option>上海</option> <option>深圳</option> </optgroup> <optgroup label="省会城市"> <option>杭州</option> <option>广州</option> <option>南京</option> </optgroup> </select> </div> </div> <hr/> <div> <label for="sign">个性签名:</label> <textarea name="sign" id="sign" rows="6" cols="30" placeholder="请写出你的与众不同"></textarea> <br/> </div> <div > <button type="submit">提交</button> <button type="reset">重置</button> </div> <hr/> </form> </div> </div> </body> </html>