HTML标签

mac2022-06-30  79

一、标签

HTML 1.html由浏览器去解析,存在兼容性问题 2.html文件的后缀名可以是 .html 或 .htm 3.它是一个标记语言,并非编程语言标签 1.标签是由尖括号包围的关键词比如 <html> 2.标签分为单标签和双标签 <br/> <p></p> 3.标签之间可以相互嵌套,切记不准许穿插嵌套 <div><p></br></p></div>

属性 1.<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值"> <!– 输出内容… --> </标签名> 2.所有关于样式的属性,我们均可以不去记忆,有单独的css可以完成注释 重要 1.html <!-- 被注释的内容 --> 2.为了提高代码的可读性html文档特性 1.在源码中所敲空格和回车都只起一个空格的作用,写再多也没有效果 2.切记不要使用空格去排版

文档命名规则 第一个字符必须是字母,之后的字符可以是数字,字母,下划线(还可以有点 .)

文档主体结构h5 <!DOCTYPE html> 文档声明头,告知浏览器下面所写的代码用那个版本去解析 <html> <head>填写公共属性信息,用户所查看不到的内容,填写在这里面</head> <body>凡是想让用户查看的信息,我们填写在body里</body> </html>

head中的内容 <meta charset="UTF-8"> 设置中文字符集 <meta http-equiv="refresh" content="5;url=https://www.baidu.com"> 自动刷新及跳转 <title></title> 设置网页标题的标签body中的内容 <h1~6>填写标题内容</h1~6> 独占一行 样式上字体较大,文字加粗。对搜索引擎有很好的优化作用!但是一个页面仅限用一次 <p>填写段落内容</p> 独占一行 <br/> 单标签 具有换行效果 <pre></pre> 按照html源码中的格式展现在浏览器上! <hr/> 单标签 显示一条与父标签等宽的水平线 <span></span> 无意义的行及标签 不会独占一行 <div></div> 无意义的块及标签 独占一行 非重点 粗体标签 <b></b> 斜体标签 <i></i> 下划线标签 <u></u> 删除线标签 <del></del> 上标标签 <sup></sup> 下标标签 <sub></sub>字符实体 用于显示是一些有特殊意义的符号,在源码中所写的内容不能直接显示在页面当中,就需要用到字符实体常用的字符实体: 空格:   右尖角号: >   左尖角号: <   备案图标版权: © a链接标签 <a href="填写链接地址" target="设置打开方式" title="用于对链接的描述">链接名称</a> href : 1.可填写具体的网络地址 2.还可以填写相对地址 3.可以填写绝对地址 4.什么都不填写,代表当前页面的 5.填写#号,代表当前页面刷新 target: 1._blank 新页面打开 2._self 默认形式,代表在当前打开新的页面 title:当用户鼠标放在链接上时,会有一个小提示。提示的内容就是我们所填写的值

锚点链接 需要现在页面当中设置锚 <a name="自定义锚的名字"></a> 想要跳转至某个锚的时候 <a href="文件地址#要跳转的锚的名称">自定义文字</a>图片标签 <img src="填写图片地址" alt="对图片的简单介绍"> src: 1.可以填写网络地址 2.可以填写当前服务器上的相对地址 alt: 在图片没有加载时,自动显示alt中的内容,给用户友好体验 搜索引擎在搜索优化时,能够更好更准确的知道当前图片的内容,更加容易让搜索引擎收录热点地图 非重点 需要在img标签中填写usemap属性 属性值 "#自定义的名称" <map name="等于usemap中自定义的名称,不带#号" id="与我们的name值相同"> <area shape="热点类型" coords="根据热点的形状,填写不同个数的值" href="跳转地址"/> </map> 定义id的目的,是为了让更多的浏览器支持热点地图标签 shape: rect 矩形 circle 圆形 poly 多边形 coords: 矩形,两个点确定一个矩形 x1,y1,x2,y2 圆形,一个点加上一个半径 x,y,r 多边形,根据我们想要画的多边形的顶点来确定具体的点的个数列表标签 <ul> <li></li> <li></li> <li></li> </ul> <ol> <li></li> <li></li> <li></li> </ol> <dl> <dt></dt> <dd></dd> </dl>表格标签 <table> <caption></caption> <tr> <th></th> <th></th> </tr> <tr> <td rowspan="" colspan=""></td> <td></td> </tr> </table> table同样是固定搭配格式,中间不要放任何代码 caption 表的标题内容所展示位置 th 表头所存放的位置 字体会加粗,默认会居中对齐 使用合并时,一定注意将多余的代码删除 rowspan 跨行合并 colspan 跨列合并form表单 重点 所有的表单均需要写在form标签对中 <form> 表单内容 </form> action:填写提交地址,如果不填写,代表提交至当前页面 method:提交方式,get或post 默认是get get 通过url把用户所填写的表单内容进行传输,速度快,但是安全性不高并且传输内容较少,最多8万个字符 post 加密方式提交,相对比较安全,但是速率较慢。并且我们在传输过程中查看不到传输的内容 表单中的公共属性 name:所有的表单我们均需要填写name属性(提交功能的表单除外),若没有name属性,则无法把对应的值提交至服务器。 value:默认值。 maxlength:设置用户填写的最大长度,长度单位为字符个数(中英文通用!),但在实际项目开发中,不推荐大家使用。 readonly: readonly 属性规定输入字段为只读,但其value值仍会被表单提交 readonly属性只针对text、password和textarea有效 disabled: disabled属性规定禁用该表单元素,其value值不会被表单提交 disabled属性对所有表单元素均有效,包括包括select, radio, checkbox, button等 使用disabled属性后表单元素背景会变成灰色 单行文本框 <input type="text" name="起一个名字"/> 密码框 <input type="password" name=""/> 多行文本框 <textarea name=""></textarea> 与单行文本框相对比,填写的内容让用户查看到的更多。 单选框 <input type="radio" name="" value="" checked="checked" /> name:同一组单选框要使用相同name名称。 value:单选框提交数据与其他框不同,它是没有值的!所以需要我们手动定义值,这时候就需要用到value。 checked:若想要设置默认选项,就在对应的表单上填写checked属性。

复选框 <input type="checkbox" name="like[]" value="0" checked="checked"/> name:同一组复选框要求名称相同,并且名字后面一定要加上一个英文的 [] , 为了解决重名问题。 value:多选框本身同样是没有值,需要我们提前自定义。 checked:用于选择默认选项的。 下拉菜单 <select name="cs" id="" > <option value="zz">郑州</option> <option value="sh">上海</option> <option value="bj">北京</option> </select> select:代表下拉菜单框 option:具体的菜单选项 value:填写value后台才能对应接收到数据 浏览框 <input type="file" name="" /> 隐藏表单 <input type="hidden" name="" value=""/> name:自定义的名字 value:是服务器所给我们指定好的值 提交按钮 <input type= "submit" name="" value=""/> <button type=“submit”>提交</button> 重置按钮 <input type= "reset" name="" value=""/> <button type="reset">重置</button> 普通按钮 <input type= "button" name="" value=""/> <button type="button">普通按钮</button> 用于与表单标签实现绑定关系 <label for=""></label> 需要在绑定表单当中自定义一个id for:该 label想要与那个表单进行绑定时,把对应的表单的id填写在for上

转载于:https://www.cnblogs.com/liufuyuan/p/10246485.html

最新回复(0)