总结
前端入门
-
BS/CS的优缺点
(1) C/S : 更加安全（面向相对固定的用户群），速度更快（专用服务器），但是需要单独安装客户端，而且每次升级都要重新安装客户端 (2) B/S : 用浏览器代替客户端，不用单独安装，客户端不必维护。但是安全性和稳定性相对CS架构的软件较弱 -
初识前端
前端负责数据展示
前端开发是指构建和实现用户在浏览器中直接与之交互的网页和应用程序的过程。前端开发关注于网页的外观、布局和用户体验，以及与用户的互动。
-
前端基本格式
<!DOCTYPE html> <!-- html 声明，html5:目前的最高版本--> <html><!-- 网页的根标签，每个页面都有根标签--> <head><!-- 网页的头部--> <meta charset="UTF-8"> <!-- 设置页面的编码集--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页标题</title><!--网页的标题--> </head> <body><!--网页的主题内容：网页显示所有内容--> </body> </html> -
html页面的注释&段落标签&行内元素标签&字体标签
<body> <!--html页面的注释--> <!-- 段落标签：p:用来显示打段文字,要占据整行，块级标签：可以设置大小：width，height --> <p>第三方第三方多少分都是</p> <!--一个段落，没有设置宽度，默认就是占满整行，高度就是内容大小--> <p>tertretretre</p><!-- p标签里面不能包含p标签--> <p>2013年3月6日 春节,春节是指汉字文化圈传统上的农历新年,俗称“年节”,传统名称为新年、大年、新 岁,但口头上又称度岁、庆新岁、过年,是中华民族最隆重的传统佳节。春节起源于殷商时期年头岁尾的 祭...</p> <!--行内元素标签：span,label,需要特殊标记的内容--> <!--sapn：只能标记文本内容，label：可以包含文本以及其他标签--> <p>第三方第三方<label>对方</label>是个<span>梵蒂冈</span>过的地方</p> <!--字体标签：加粗标签<b></b>、斜体标签:<i></i>,下划线标签:<u></u>,<del></del>:删除线标签--> <p> <b>gdfgfdgds</b> <i>十多个梵蒂冈都是</i> <del>GV浮点GV</del> <u>的是否跟得上的方式发送到的是否跟得上的方式发送到的是否跟得上的方式发送到的是否跟得上的方式发送到</u> </p> </body> -
图片标签：img&超链接标签
<body> <!-- 图片标签：img --> <!-- <img src="显示图片的路径" alt="图片不能正常显示的时候，显示的文字" title="图标的标题，鼠标进入显示的标题" /> --> <!-- src的路径可以相对路径，也可以是绝对路径 --> <!-- ./1.webp当前目录下的图片 --> <!-- <img src="./1.webp" alt="美食" title="一坨肉" /> --> <img src="../img/1.webp" alt="美食" title="一坨肉" /> <img src="https://img2.baidu.com/it/u=3272695702,1478802718&fm=253&fmt=auto&app=120&f=JPEG?w=912&h=456" /> <!-- 超链接标签：a：跳转页面 --> <!-- <a href="跳转到的页面路径" target="打开的方式">跳转</a> --> <!-- target="_self":在当前打开，会覆盖原来的页面 --> <!-- _blank":新开一个页面显示 --> <a href="./demo2.html" target="_blank">到demo2页面</a> <a id="a1"></a><!--做锚点--> <!-- a标签的其他用法 --> <a href="https://www.baidu.com">去百度</a> <a href="./1.txt">查看一个文本文档</a> <a href="../img/1.webp">查看一张图片</a> <a href="https://vd2.bdstatic.com/mda-pmrdfz0hkwcsr47g/720p/h264/1703583280698688364/mda-pmrdfz0hkwcsr47g.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1704280110-0-0-01625a0d5ceeec50a025604e77d1907d&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=0509851987&vid=16671624888106367049&klogid=0509851987&abtest=">打开一个视频</a> <!--a标签锚点的使用--> <img src="../img/1.webp" alt="美食" title="一坨肉" /> <img src="https://img2.baidu.com/it/u=3272695702,1478802718&fm=253&fmt=auto&app=120&f=JPEG?w=912&h=456" /> <img src="../img/1.webp" alt="美食" title="一坨肉" /> <img src="https://img2.baidu.com/it/u=3272695702,1478802718&fm=253&fmt=auto&app=120&f=JPEG?w=912&h=456" /> <img src="../img/1.webp" alt="美食" title="一坨肉" /> <img src="https://img2.baidu.com/it/u=3272695702,1478802718&fm=253&fmt=auto&app=120&f=JPEG?w=912&h=456" /> <a href="#a1">回到定点</a> <!--实现本地下载：将不认识的文件复制一份--> <a href="./取色器.exe">下载</a> </body> -
表格标签
<body> <!-- 表格标签：table --> <!-- <table border="边框的宽度（整数0-任意数），颜色和类型是默认"> </table> --> <!-- 表的结构 --> <!-- <table border="1"> <caption>表格的标题</caption> <thead> 表头：每一个列的标题 </thead> <tbody> 表格的数据 </tbody> <tfoot> 表脚 </tfoot> </table> --> <!-- 表格里面都是有行tr,每一行都是有列组成td --> <table border="1"> <caption>学生统计表</caption> <thead> <tr> <!--表格的行--> <td>编号</td><!--行里面列--> <td>姓名</td><!--行里面列--> <td>性别</td><!--行里面列--> <td>年龄</td><!--行里面列--> </tr> </thead> <tbody> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </tbody> <tfoot> <tr> <td>编号结束</td> <td>姓名结束</td> <td>性别结束</td> <td>年龄结束</td> </tr> </tfoot> </table> <table border="1" width="500"> <tr> <!--表格的行--> <td>编号</td><!--行里面列--> <td>姓名</td><!--行里面列--> <td>性别</td><!--行里面列--> <td>年龄</td><!--行里面列--> </tr> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr><tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr><tr> <td>001</td> <td>张三</td> <td>男</td> <td>18</td> </tr> </table> </body>-
行和列
<body> <!-- th 和 td区别：表示列，th有默认的样式，td没有，th一般作为表头的列，td做表数据的列 --> <table border="1" width="600"> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>001</td> <td>蘋蘋</td> <td>男</td> <td>23</td> </tr> <tr> <td>001</td> <td>蘋蘋</td> <td>男</td> <td>23</td> </tr> <tr> <td>001</td> <td>蘋蘋</td> <td>男</td> <td>23</td> </tr> <tr> <td>001</td> <td>蘋蘋</td> <td>男</td> <td>23</td> </tr> <tr> <td>001</td> <td>蘋蘋</td> <td>男</td> <td>23</td> </tr> </table> </body> -
合并单元格
<body> <!-- 合并单元格 --> <table border="1" width="600"> <tr> <!-- <td colspan="横向合并，合并列的个数">1</td> --> <td colspan="3">1</td> </tr> <tr> <td>1</td> <!-- <td rowspan="纵向合并">1</td> --> <td rowspan="3">1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> </table> </body>
-
-
表单标签
<body> <!-- 表单标签 form：页面和后台进行数据交互 --> <!-- <form action="提交后台的地址" method="表单提交的方式：get\post"> --> <!-- get:显示提交，提交的内容在地址可见，安全性能差一点，有大小限制（2k） --> <!-- post:隐式提交，在地址看不见提交内容，安全性能好一点，没有大小下载 --> <!-- </form> --> <!-- form表的案例：登录、注册、搜索等 --> <form action="#" method="get"> <!--没有method，默认get提交--> <!-- 表单里面常有的标签 --> <!-- 提交数据是一个键值对：name属性的值作为建，输入框里面内容作为值 --> 普通输入框:<input type="text" name="username" placeholder="请输入用户名" /> <br /> <!--默认也是text,br是换标签--> 密码输入框:<input type="password" name="pwd" placeholder="请输入密码" /><br /> 数字输入框:<input type="number" name="age" /><br /> 日期输入框:<input type="time" step="1" name="date" /><br /> <!-- type="date":年月日、type="datetime-local"：年月日时分、type="datetime-local" step="1":年月日时分秒、type="time"：时分秒 --> 邮箱输入框:<input type="email" name="email" /><br /> <!--检查输入邮箱格式--> 域名输入框:<input type="url" name="url" /><br /> <!--检查输入域名格式--> 文件选择框:<input type="file" name="file" /><br /> <!-- 单选框和复选框 --> <!-- 性别单选框:<input type="radio" name="gender" value="男" checked="checked" />男 <input type="radio" name="gender" value="女" />女<br /> --> 性别单选框:<input type="radio" name="gender" value="男" checked="checked" id="man" /><label for="man">男</label> <input type="radio" name="gender" value="女" id="women" /><label for="women">女</label><br /> 爱好多选框:<input type="checkbox" name="ah" value="吃饭" checked />吃饭 <input type="checkbox" name="ah" value="睡觉" id="sj" /><label for="sj">睡觉</label> <input type="checkbox" name="ah" value="游戏" />游戏 <input type="checkbox" name="ah" value="发呆" checked />发呆<br /> <!-- 下拉框 --> 地址选择框:<select name="address"> <option>-请选择-</option> <option value="武侯区">武侯区</option> <option value="青羊区" selected>青羊区</option> <option value="高新区">高新区</option> <option value="天府新区">天府新区</option> </select><br /> <!-- 文本域 --> 自我评价:<br /> <textarea cols="30" rows="10"></textarea><br /> <!-- 按钮 --> <input type="submit" value="注册" /> <!--提交按钮，将输入里面数据 提交action里面的地址--> <!-- <button>注册</button> --> <input type="reset" value="重置" /> </form> </body>
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
