HTML常用指令+CSS叠层样式表

HTML 超文本标记语言，“超文本”就是指页面内可以包含图片、链接、音乐、程序等非文字元素 Hbuilder快捷键 ctrl +n+w  新建项目 ctrl +n+h 新建html文件 ctrl +x 删除一行 ctrl +r 在浏览器中打开 常用标签 1.标题标签 <h1></h1> 主体最大 <h6></h6>主体最小          会自动换行 2.段落标签 <p></p> p标签表示一个段落 &nbsp 表示空格，一个&nbsp就是一个空格 em 表示斜体 i 表示斜体 font 定义文字的字体、尺寸和颜色 strong/b 表示字体加粗 br  实现换行 3.图片标签 <img src="" alt=""/> a.直接引用网上图片：复制图片链接，直接引用网上图片<img src="网址" alt=""/> b.引用本地图片<img src="img.jpg" alt=""/>,需要先把图片添加到img的路劲下 4.链接标签 a.链接标签<a href=""></a> 覆盖原有的页面直接在href后接网址 b.新开窗口在网址后加targe ="_blank" c.也可以加图片进行链接跳转，图片加在a标签中间 d.死链接加# 5.列表标签 有序列表：<ol><li></li></ol> 无序列表：<ul><li></li></ul> 6.表格标签 <table border=""  cellspacing="" cellpadding=""> <tr><th>header</th></tr> <tr><td>data</td></tr> <th>元素中的文本通常呈现为粗体且居中 <td>元素中的文本通常是普通的左对齐文本 tr代表行，td代表列 border：边距 cellspacing：单元格与单元格的距离 cellpadding：单元格与内容之间的距离 align = "center" 表格居中 width 加宽 height 加高 7.快速生成表格标签 tr*3>td*3 安装tab键 8.表格跨行和表格跨列 colspan=“” 合并几列 rowspan=“” 合并几行   在td里输入，不是将几行列内容合一起，是将行列所占位子扩大 ，9.表单标签 表单标签格式:<from></from> action:开始网址  method:get和post等等 表单标签：主要用来收集用户输入信息如：登入，注册，搜索商品等 用户名格式：text（明文） 密码格式：password（密文）   框内自生成提示内容，输入后替换成新输入内容：placeholder 性别：radio  单选类型radio，注意name要加上sex，不然会出现同时可以选择的2个radio的bug，加上checked表示默认值 复选框：CheckBox                        文本框：textarea 上传文件：file                                选择框：select button：按钮                                reset：重置 submit：注册 css层叠样式表 1.层叠样式表的基本格式： a.在标签中加style属性，style就是css样式代码 <p style="color:red";></p> b.在head中加style样式 在head中编写style属性，作用于所有的h3标签 <style type="text/css"> h3{ color:blue; } </style>                                      可以自定义名称在body里使用 c.通过外链的方式 <link rel="stylesheet" type="text/css" href="../css/test.css"/> 2.id选择器（id选择器，id所对应的值前面要加#） <style type="text/css"> #yy{ color：red; } </style> 3.标签选择器 <style type="text/css"> p{ color：red; } </style> 4.class选择器（class所对应的值前面要加.） <style type="text/css"> .kk{ color：red; } </style> 5.组合选择器 <style type="text/css"> p,em{ color：red; } </style> 6.伪类选择器 <style type="text/css"> p{ color：red; } p:hover{ color:blue; }                            /*放置鼠标颜色会发生改变*/ </style> 7.字体和文本样式 <style type="text/css"> em { font-size: 50px;/*字体大小*/ font-family: "微软雅黑";/*字体*/ font-style: italic; /*斜体*/ font-weight: bold/*加粗*/ text-decoration: underline;/ *下划线/ text-align: center;/*文本内容居中*/ cursor: pointer;/*实现鼠标移动到具体内容上鼠标形状变为手状*/ } </style>