前端是做什么的（前端(一)-Html）

时间2025-07-09 06:14:49分类IT科技浏览4068

导读：1、网页基本信息 <!DOCTYPE html> 浏览器使用的规范 <head> 网页头 <body> 主体部分 <meta> 元数据...

1、网页基本信息

<!DOCTYPE html> 浏览器使用的规范 <head> 网页头 <body> 主体部分 <meta> 元数据

meta的name属性（了解）

Keyword（关键字）为搜索引擎提供的关键字列表 Description（简介） description用来告诉搜索引擎你的网站主要内容 author（作者）标注网页的作者 copyright（版权）标注版权 generator 说明网站采用什么编辑器制作。

2、网页基本标签

<h1></h1> ...<h6></h6> 标题标签，序号越小字体越大 <P></p> 段落标签 <br/> 换行标签 <hr/> 水平线 <strong></strong> 字体加粗 <em></em> 斜体

3、特殊符号

  空格 > 大于号 > < 小于号 < ' 单引号 " 双引号“ © @版权符号 & 和&

4、块元素与行内元素

块元素：独占一行，比如:段落标签(p),标题标签(h1~h6),自带换行; 行内元素，可以在一行写多个的标签，靠内容撑开宽度;(a,strong,em...)

注意：块元素可以嵌套多个行内元素标签，但行内元素不能嵌套块元素，会改变行内元素的布局，且标签之间不可以交叉；

5、图像标签

<img src="https://www.cnblogs.com/xiaoqigui/p/img/girl01.png" alt="动漫女孩" title="小女孩" width="200px" > scr 图片的资源路径 alt 图片显示不时显示此文字 title 标悬停图片显示文字 width 宽度 hight 高度

6、链接标签

超链接标签，a，是对标签，也是行内元素，可以链接到任意可以访问的资源，标签可以使用文本或者图片;

<a href="https://www.baidu.com" target="_blank">百度</a> <br/> href 资源路径 target 在页面打开资源还是新页面

target

target="_self" 本页面打开资源 target="_blank" 新页面打开资源

6.1 页面链接

6.2 锚链接 (例如回到顶部功能)

本页面的锚链接跳转 (回到顶部)

<a href="#" name="head_a">顶部</a> ... <a href="#head_a">回到顶部</a>

不同页面的锚链接跳转（跳转到指定页面的指定位置）

<a href="#" name="footer"></a>  <a href="https://www.cnblogs.com/xiaoqigui/p/demo10.html#footer">跳转到demo10的底部</a>

6.3 功能链接

<a href="mailto:2663092414@qq.com">功能链接联系我们</a>

6.4 内联框架

iframe 单页面内联

<iframe src="https://www.cnblogs.com/xiaoqigui/p/path" name="mainFrame" ></iframe>

iframe属性（实现页面间的相互跳转）

<iframe name="mainFrame"></iframe> 在超链接上设置target目标窗口属性为希望显示的框架窗口名 <a href="https://www.baidu.com/" target="mainFrame">加载</a>

7、列表

7.1 无序列表

<h2>无序列表</h2> <ul> <li>行宫</li> <li>登黄鹤楼</li> <li>相思</li> <li>静夜诗</li> </ul> 行宫登黄鹤楼相思静夜诗

7.2 有序列表

<h2>有序列表</h2> <ol> <li>行宫</li> <li>登黄鹤楼</li> <li>相思</li> <li>静夜诗</li> </ol> 行宫登黄鹤楼相思静夜诗

7.3 自定义列表

<h2>自定义列表</h2> <dl> <dt>王维</dt> <dd>相思</dd> <dd>杂诗</dd> <dt>李白</dt> <dd>静夜诗</dd> </dl> 王维相思杂诗李白静夜诗

8、表格

8.1 基本标签

<table> </table> 表标签 <tr> </tr> 行标签 <th></th> 表头标签 <td></td> 列标签

8.2 表格一些属性

align="center" 居中 border="1px" 边框粗细 cellspacing="0" 表格间隙 width="90%" 长度

8.3 跨行跨列

rowspan="x" 跨行 clospan="x" 跨列

案例

<table border="1px" align="center" width="90%" cellspacing="0"> <tr align="center"> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>班级</th> <th>操作</th> </tr> <tr align="center"> <td>001</td> <td>张三</td> <td>18</td> <td rowspan="2">KH96</td> <td><a href="#">修改</a> <a href="#">删除</a></td> </tr> <tr align="center"> <td>002</td> <td>李四</td> <td>20</td>  <td><a href="#">修改</a> <a href="#">删除</a></td> </tr> <tr align="center"> <td colspan="5"> <a href="#">首页</a> <a href="#">上一页</a> <a href="#">下一个</a> <a href="#">尾页</a> </td> </tr> </table>

学号姓名年龄班级操作 001 张三 18 KH96 修改| 删除 002 李四 20 修改|删除首页

下一个

尾页

9、媒体元素

9.1 音频

<video src="https://www.cnblogs.com/xiaoqigui/p/%E8%A7%86%E9%A2%91%E8%B7%AF%E5%BE%84" controls autoplay></video>

9.2 视频

<audio src="https://www.cnblogs.com/xiaoqigui/p/%E9%9F%B3%E9%A2%91%E8%B7%AF%E5%BE%84" controls autoplay></video>

10、表单

10.1 method

规定如何发送表单数据常用值：get post 在实际网页开发中通常采用post方式提交表单数据;

get 不安全，在搜索栏提交，有大小限制 post 安全，在请求体中提交，没有大小限制

10.2 action

表示向何处发送表单数据;

10.3 表单元素

10.3.1 text 文本框  <input type="text" name="userName" value="用户名" size="30" maxlength="20"/> 10.3.2 password 密码框

向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。

<input type="password" name="pass" size="20"/> 10.3.3 单选按钮

同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥；

<input name="gen" type="radio" value="男" id="nan"/><label for="nan">男</label> <input name="gen" type="radio" value="女" id="nv"/><label for="nv">女</label>  10.3.4 checkbox复选框

同一组复选框，根据需要可设置name属性值相同；

<input type="checkbox" name="interest" value="sports"/>运动 <input type="checkbox" name="interest" value="talk" checked />聊天 <input type="checkbox" name="interest" value="play"/>玩游戏 10.3.5 select下拉列表

希望在页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则第一个选项默认被选中；

<select name="列表名称" size="行数"> <option value="选项的值" selected="selected">…</option > <option value="选项的值">…</option > </select> 10.3.6 按钮  <input type="reset" name="butReset" value="reset按钮">  <input type="submit" name="butSubmit" value="submit按钮">  <input type="button" name="butButton" value="button按钮"/>  <input type="image" src="https://www.cnblogs.com/xiaoqigui/p/images/login.gif" /> 10.3.7 textarea多行文本框  <textarea name="showText" cols="x" rows="y">文本内容 </textarea> 10.3.8 file文件域

在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

<form action="" method="post" enctype="multipart/form-data"> <p>  <input type="file" name="files" /> <input type="submit" name="upload" value="上传" /> </p> </form> 10.3.9 email邮箱

会自动验证Email地址格式是否正确;

邮箱:<input type="email" name="email"/> 10.3.10 url网址

会自动验证URL地址格式是否正确；

请输入你的网址:<input type="url" name="userUrl"/> 10.3.11 number数字 min：最小值 max：最大值 step：步长 value:默认值请输入数字:<input type="number" name="num" value="18" min="0" max="100" step="10"/> 10.3.12 range滑块

type值为range即为滑块。

请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/> 10.3.13 search搜索框

type值为search即为搜索框。

请输入搜索的关键词:<input type="search" name="sousuo"/> 10.3.14 color颜色喜欢的颜色：<input type="color" name="userColor"> 10.3.15 日期时间 10.3.15.1 dd/MM/yyy <input type="date" /> 10.3.15.2 yyyy年第xx周 <input type="week" /> 10.3.15.3 yyyy年MM月 <input type="month" /> 10.3.15.4 mm:ss <input type="time" /> 10.3.15.5 dd/MM/yyyy HH:mm:ss <input type="datetime-local" />

10.4 表单的高级应用

10.4.1 hidden隐藏域

在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器

<input type="hidden" value="666" name="userid"> 10.4.2 只读、禁用  <input name="name" type="text" value="张三" readonly> <input type="submit" disabled value="保存" > 10.4.3 表单元素的标注,增强鼠标的可用性

增强鼠标的可用性，自动将焦点转移到与该标注相关的表单元素上

<label for="male">标注的文本</label> <input type="radio" name="gender" id="male"/>

10.5 表单初级验证的方法

10.5.1 placeholder

提示语默认显示，当文本框中输入内容时提示语消失;

<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/> 10.5.2 required

规定文本框填写内容不能为空，否则不允许用户提交表单;

<input type="text" name="username" required/> 10.5.3 pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单;

11、页面结构元素

11.1结构标签

header 页面或页面中某一区块的页眉，通常是一些引导和导航信息 nav 可以作为页面导航的连接组 section 页面中的一个内容区块，通常由内容及其标题组成 article 代表一个独立的，完整的相关内容块，可独立于页面其他内容使用 aside 非正文的内容，与页面的主要内容是分开的，被删除而不会影响到页面的内容 footer 页面或页面中某一个区块的脚注

11.2举例

<!DOCTYPE html> <html> <head> </head> <body> <h2 align="center">网页布局-使用h5新标签</h2>  <div class="box"> <header class="header">头部header</header> <main class="main"> <nav class="nav">导航nav</nav> <section class="content"> <aside class="aside">侧边栏aside</aside> <article class="article">正文article</article> </section> </main> <footer class="footer">尾部footer</footer> </div> </body> </html>

运行结果