基础系列(1)-- html
程序员文章站
2022-06-29 08:08:11
(随笔杂谈,自己做的笔记) 网页的组成 结构 xhtml,xml 表现 css 行为 bom,dom,ECMAScript html5结构 type: 定义某种类型 常用标签 文本标题标签 字体标记 字符实体 列表属性 超链接 图片标签 表格 作用:显示数据 表单 作用:保存数据 表单表格嵌套 ......
(随笔杂谈,自己做的笔记)
网页的组成
结构 ------ xhtml,xml
表现 ------ css
行为 ------ bom,dom,ecmascript
html5结构
1 <!doctype html> <!-- 声明文档类型 html --> 2 <html> <!-- html超文本标记语言 --> 3 <head> <!-- 描述区 --> 4 <meta charset="utf-8"> <!-- 定义编码格式 utf-8国际编码 gbk中文 gb2312中文简体 --> 5 <title></title> <!-- 当前网页标题,显示在浏览器状态栏上 --> 6 </head> 7 <body> <!-- 内容区 --> 8 </body> 9 </html>
type: 定义某种类型
常用标签
文本标题标签
1 <h1>唯一性,一般放logo,一个网页只出现一次</h1> 2 <h2></h2> 3 <h3></h3> 4 <h4></h4> 5 <h5></h5> 6 <h6></h6>
字体标记
1 <i></i> || <em></em> 2 倾斜效果 3 <b></b> || <strong></strong> 4 加粗效果 5 <u></u> 6 下划线效果 7 <br> 8 强制换行 9 <hr> 10 水平线 11 <p></p> 12 段落标签
字符实体
1 不换行空格 2 > > 3 < < 4 © 版权图标(备案图)
列表属性
1 <!-- 无序列表 --> 2 <ul> 3 <li></li> 4 </ul> 5 <!-- 有序列表 --> 6 <ol> 7 <li></li> 8 </ol> 9 <!-- 自定义列表 --> 10 <dl> 11 <dd>内容</dd> 12 <dt>对内容的解释</dt> 13 </dl>
超链接
1 <a href="" target="" title=""> 2 <!-- 3 target: _self (默认值) 4 _blank (新窗口打开) 5 title: 提示信息,方便网站检索,便于优化 6 -->
图片标签
1 <img src="" alt="" width="" height=""> 2 alt: 图片不显示时的文本,该属性便于优化,必须要有! 3 <!-- 4 相对路径: 5 同级找同级:直接写名称 6 上级找下级: 文件夹名 / 目标文件 7 下级找上级: ../ -----返回上一级 8 -->
表格
作用:显示数据
1 <table cellspacing="0" cellpadding="0"> 2 <tr> 3 <td colspan="" rowspan=""></td> 4 </tr> 5 </table> 6 <!-- 7 cellspacing:单元格与单元格的距离,一般设为0 8 cellpadding: 单元格与内容的距离,一般设为0 9 colspan:合并列,所合并单元格的列数 10 rowspan: 合并行,所合并单元格的行数 11 --> 12 13 <!-- 14 合并原则: 15 只要跨行的都是合并行,不跨行的都是合并列 16 合并行和列都是操作td 17 -->
表单
作用:保存数据
1 <form action="路径" name="名称" method="post/get"> 2 </form> 3 <-- 4 form: 表单域 5 action: 表单提交的路径 6 name: 表单名称 7 method: 数据传输方式 post,get 8 -->
表单表格嵌套
1 <!-- 一般写法,table在外面 --> 2 <table> 3 <form> 4 <tr> 5 <td><input type="text"></td> 6 <td><input type="password"></td> 7 </tr> 8 </form> 9 </table>
推荐阅读