前端学习
获取中...
这里主要讲的是学习前端过程中的一些笔记
由于主修后端,所以这些知识暂时先过一遍,笔记也是记录觉得自己觉得有趣的地方。也是非常基础的部分。
HTML部分
网页脑袋
在浏览器里,就是以这个样子显示。
html语法
标题标签对齐规则
打印保留字符
超链接
无序列表
图片显示
表格
tr是“tablerow(表格行)”的缩写,用于表示一行的开始和结束。
td是“tabledata(表格数据)”的缩写,用于表示行中各个单元格(cell)的开始和结束。
表格跨行跨列
iframe标签
iframe标签可以在一个html页面上,打开一个小窗口,去加载一个新的页面。同时也可以,把超链接导向的地址放进去进行显示。
终于搞到资料了后面全部用代码
表单
表单的信息被放在了表格中被展示,变得很好看
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单的显示</title> </head> <body>
<form> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td> 用户名称:</td> <td> <input type="text" value="默认值"/> </td> </tr> <tr> <td> 用户密码:</td> <td><input type="password" value="abc"/></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" value="abc"/></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex"/>男 <input type="radio" name="sex" checked="checked" />女 </td> </tr> <tr> <td> 兴趣爱好:</td> <td> <input type="checkbox" checked="checked" />Java <input type="checkbox" />JavaScript <input type="checkbox" />C++ </td> </tr> <tr> <td>国籍:</td> <td> <select> <option>--请选择国籍--</option> <option selected="selected">中国</option> <option>美国</option> <option>小日本</option> </select> </td> </tr> <tr> <td>自我评价:</td> <td><textarea rows="10" cols="20">我才是默认值</textarea></td> </tr> <tr> <td><input type="reset" /></td> <td align="center"><input type="submit"/></td> </tr> </table> </form> </body> </html>
|
效果展示
表单的提交
form标签整个包一块用于提交表单,要提交的属性必须要有name值,否则不行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单的显示</title> </head> <body>
<form action="http://localhost:8080" method="post"> <input type="hidden" name="action" value="login" /> <h1 align="center">用户注册</h1> <table align="center"> <tr> <td> 用户名称:</td> <td> <input type="text" name="username" value="默认值"/> </td> </tr> <tr> <td> 用户密码:</td> <td><input type="password" name="password" value="abc"/></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="boy"/>男 <input type="radio" name="sex" checked="checked" value="girl" />女 </td> </tr> <tr> <td> 兴趣爱好:</td> <td> <input name="hobby" type="checkbox" checked="checked" value="java"/>Java <input name="hobby" type="checkbox" value="js"/>JavaScript <input name="hobby" type="checkbox" value="cpp"/>C++ </td> </tr> <tr> <td>国籍:</td> <td> <select name="country"> <option value="none">--请选择国籍--</option> <option value="cn" selected="selected">中国</option> <option value="usa">美国</option> <option value="jp">小日本</option> </select> </td> </tr> <tr> <td>自我评价:</td> <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td> </tr> <tr> <td><input type="reset" /></td> <td align="center"><input type="submit"/></td> </tr> </table> </form> </body> </html>
|
其他标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其他标签</title> </head> <body>
<div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> <p>p段落标签1</p> <p>p段落标签2</p> </body> </html>
|
CSS部分
选择器:浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素(标签)。
属性 (property) 是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并 由花括号包围,这样就组成了一个完整的样式声明(declaration),例如:p {color: blue} 多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号
CSS和html结合的三种方式
第一种
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
<div style="border: 1px solid red;">div 标签 1</div> <div style="border: 1px solid red;">div 标签 2</div> <span style="border: 1px solid red;">span 标签 1</span> <span style="border: 1px solid red;">span 标签 2</span> </body> </html>
|
问题:这种方式的缺点?
1.如果标签多了。样式多了。代码量非常庞大。 2.可读性非常差。 3.Css 代码没什么复用性可方言。
第二种
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style type="text/css">
div{ border: 1px solid red; } span{ border: 1px solid red; } </style> </head> <body> <div>div 标签 1</div> <div>div 标签 2</div> <span>span 标签 1</span> <span>span 标签 2</span> </body> </html>
|
问题:这种方式的缺点
1.只能在同一页面内复用代码,不能在多个页面中复用 css 代码。 2.维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了
第三种
css文件内容
1 2 3 4 5 6
| div{ border: 1px solid yellow; } span{ border: 1px solid red; }
|
html文件内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <div>div 标签 1</div> <div>div 标签 2</div> <span>span 标签 1</span> <span>span 标签 2</span> </body> </html>
|
选择器
标签名选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS 选择器</title> <style type="text/css"> div{ border: 1px solid yellow; color: blue; font-size: 30px; } span{ border: 5px dashed blue; color: yellow; font-size: 20px; } </style> </head> <body>
<div>div 标签 1</div> <div>div 标签 2</div> <span>span 标签 1</span> <span>span 标签 2</span> </body> </html>
|
id 选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ID 选择器</title> <style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color: red; font-size: 20px; border: 5px blue dotted ; } </style> </head> <body>
<div id="id002">div 标签 1</div> <div id="id001">div 标签 2</div> </body> </html>
|
class 选择器(类选择器)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class 类型选择器</title> <style type="text/css"> .class01 , #id01{ color: blue; font-size: 20px; border: 1px yellow solid; } </style> </head> <body>
<div id="id01">div 标签 class01</div> <br /> <span >span 标签</span> <br /> <div>div 标签</div> <br /> <div>div 标签 id01</div> <br /> </body> </html>
|
本文由 rufus 创作,采用 知识共享署名 4.0 国际许可协议。
本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。