前端 三剑客： HTML CSS JS
html : 实际上就是超文本标记语言 ：包括了 非文字元素
网页展示过程 有两种方式 ：
1. CS 模式 c : client s : server
2. BS 模式 b: browser s : server
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
网页==HTML文档，由浏览器解析，用来展示的
静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的
html文档树形结构图：
<!DOCTYPER html>
这是一种 浏览器的渲染模式 但是写网页的时候 必须加上 否则 可能会报错
什么是标签
- 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
- 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />
- 标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>
框架
socketserver 和 bootstrap 后者 是现在最火的一个框架 用于 响应式布局
前端的请求 如 登录 会通过 htrtp 请求 然后传给 server 端 后端根据用户的请求返回 给前端
html代码
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <div id="abc">顶部</div> <meta charset="UTF-8"> <title>彭亮</title> <!--meta 和 非 meta标签 一定是在于 head 标签里面的 --> <!--<meta http-equiv="Refresh" content="2; URL=https://www.baidu.com" >--> <!--Rsfesh 2 秒 刷新 到后面的跳转的网址 注意着里面的引号 --> <meta name="keywords" content="彭亮"> <!--这一步是关键字 搜索 然后 后面的 content 的内容的跳转--> <meta http-equiv="content-Type" charset=UTF8"> <!--如果想用utf8 固定用这个标签--> <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> <!--对于浏览器的兼容 --> <link rel="icon"href="http://www.jd.com/favicon.ico"> <!--去拿小图标 在搜索头部中--> </head> <body> <h1>hello</h1><h3>hello</h3> <h2>hello</h2> <!--hello world （上面的 几个 hello 都会 换行 不变） 这之间不论多少个空格 --> <!--都默认为 一个空格 hello word--> <input type="text" readonly> 我是</br> 这是换行 小白</br> <p>我是</p> <p>小白</p> p 标签 自带 换行 <b>彭亮</b> <strike>hello</strike> 在hello 上 划一道线 不用这个东西了 3<sub>2</sub> sub 是上下的效果 <em>斜体的效果</em> 3<sub>2</sub> <hr> <!--一道横线--> <div style="color:green;background-color：red;height:500px; width:500px;font-size:40px;text-align:center"> hello pengliang </div> <span style="background-color:rebeccapurple" > hello</span> <!--块级标签 和 内联标签 块级标签 是在一个块区域上产生变化的 而 内联标签 只在自己的一行产生变化 块级标签 包括了 ：<P> <h1> <ol><ul><form><div> 内联标签 包扩了： a input img sub textarea span 这些标签都在 尖括号里面的 --> <h1 style="color:red">hel   代表空格 lo</h1> too<hello; pengliang>too; <!--< > © ® 分别是小于 大于 版权：（c r） 前两个 必须紧跟后面 不能加空格--> <!--block 块元素的特点 在新行开始 他可以 容纳 内联元素 和其他元素--> <img src="img/188F867EC27680E0D30B7B4B5578C043.jpg" alt="图片" title="饮食" width= "10px" height="10px"> <!--title 在图片上 有悬浮效果 对于冒号后面的 一定放在 引号里面 切记 切记 图片 高度 宽度 需要用 等号 而 块级 大小 需要用 冒号 一定得分清 --> <a href="http://news.daxues.cn/xiaohua/ " target=_blank> <h1>校花网 </h1> </a> <!-- 并且 必须在 引号后面添加 目标 target=_blank 跳转 新的页面 ul 无序列表 ol 有序列表 li 列表中的每一项 dl 定义列表 dt 列表标题 dd 列表项 --> <a href="#abc">返回顶部 </a> <!-- ID 是唯一标识的 这部分是跳转（是 a 标签实现的）功能--> <h1 style="color:blue">注册页面</h1> <form action="http://127.0.0.1:8080/index" method="post"> <p>姓名 <input type="text" name="username" placeholder="姓名"></p> <p>密码<input type="password" name="password" placeholder="密码"></p> <!--placeholder 在输入框中 会提示信息 --> <p>爱好：音乐 <input type="checkbox" name="hobby" value="music"> 电影<input type="checkbox" name="hobby" value="movie"></p> <p>性别 ： 男 <input type="radio" name="gender" value="men"> 女 <input type="radio" name="gender" value="women"></p> <!--radio 是进行单选操作 二这种操作 必须 有name 的属性来控制 checkbox 控制多选 --> <p><input type="file"></p> 省<select name="province" multiple size="4"> <!-- selected=selected 在option 中加 这是默认选中 multiple 是多选的属性 size 一开始 显示的个数 由滚动条来显示--> <option value="beijing">北京市</option> <option value="anhui">安徽省</option> <option value="henan">河南省</option> <option value="hebei">河北省</option> <optgroup label="安徽省"> <option value="蚌埠">蚌埠市</option> <option value="阜阳">阜阳市</option> <option value="淮南">淮南市</option> <option value="黄山">黄山市</option> </optgroup> </select> <table border="1px solid " cellpadding="50px" cellspacing="10px" > <thead> <tr> <th>111</th> <th>222</th> <th>333</th> </tr> </thead> <tbody> <tr> <td rowspan="2">456</td> <td colspan="2">789</td> <!--colspan 和 rowspan 分别 占列和行 --> <td>110</td> </tr> </tbody> </table> <p><input type="reset" value="重置"></p> <p ><input style="background-color:blue" type="submit" value="提交注册"></p> <!--易错点 ：在div 中设置区域的大小 用的 是冒号 而在 img 中 设置图片的大小用的是 等号 --> <!--disabled:对于所有的input 标签都可以禁用--> <!--<p><input type="button" value="提交注册" ></p>--> <!--button 仅仅是一个按钮 不会触发什么 但是在js中 会点击触发一个单个的事件 --> <!--submit 会把其中的内容 以 键值对的形式 提交给 server 端--> <!--重置 按钮 reset 记得 input 也是一个标签 需要用 尖括号的 这种文字 是放在 value 里面的 每一种属性 都等号--> <!-- action 是提交的地址 提交到那一个路径 ； 只写内容 必须 放在 form 表单里面 这样 最后会打包 发送给 index 把所输入的内容 去解析出来这个自己定义这个函数去处理 不加method 默认是 get --> <!--get： 提交时键值对 放在地址栏中URL后面 安全性 相对较差 提交长度 必须在2k或者扩充 范围内--> <!--post ：提交时键值对 不在地址栏中 安全性较高 理论上 提交长度 无限制--> <!--get/post 是最常见的两种请求方式 --> </form> <textarea name="desc" rows="10" cols="5"> 简介 </textarea> <label for="www">姓名</label> <input id="www" type="text"> <!--这里面的for 后面的跟 id 后面的属性一样 这样会关联起来 列如 点姓名 便可以触发里面的边框 --> <table border="1px solid " cellpadding="50px" cellspacing="10px" > <tr> <th>111</th> <th>222</th> <th>333</th> </tr> <tr> <td rowspan="2">456</td> <td colspan="2">789</td> <!--colspan 和 rowspan 分别 占列和行 --> <td>110</td> </tr> <!--直接用 tr 和td 就可以 在表格中--> </table> </body> </html>
标签的属性
- 通常是以键值对形式出现的. 例如 name="pengliang"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="pengliang"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 name
- 标签 不允许交差嵌套 如 <h1> pengliang <h2> pengliang </h1> </h2>
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
