本帖最后由 童瑞凯老师 于 2017-6-14 17:35 编辑
HTMML5 基础课程—HTML-高级标签
目录
1.1 列表标签表示：传智播客在全国开设分校的顺序列表： ① 北京 ② 上海 ③ 深圳 ④ 广州 ⑤ 郑州 ⑥ 武汉
表示：我的个人爱好，无序的列表。 Ø 足球 Ø 篮球 Ø 乒乓球 Ø 学习
<!-- 无序列表 --> <ul> <li><span>北京</span><a href="#">你好</a></li> <li>上海</li> <li>成都</li> <li>武汉</li> </ul>
<!-- 有序列表 order liss 已经拍下的列表 --> <ol> <li>北京</li> <li>上海</li> <li>成都</li> <li>武汉</li> </ol>
自定义列表 <dt>关于我们</dt> <dd>传智简介</dd> <dd>联系方式</dd> <dd>诚聘英才</dd> <dd>人才服务</dd>
1.2 表格标签table快捷键： ctrl+{ 进行左缩进， ctrl+} 进行右缩进 <tableborder="1"> <tr> <td>基本参数</td><td>1.4t 帕萨特</td><td>1.8t帕萨特</td> </tr>
<tr> <td>基本参数</td><td>1.4t 帕萨特</td><td>1.8t帕萨特</td> </tr> </table>
<table border="1"> <thead> <！-表格头部---> <tr> <th>姓名</th><th>年龄</th><th>成绩</th> </tr> </thead> <tbody> <tr> <td>传智播客</td><td>14</td><td>已经培养10几万人的it人才</td> </tr> <tr> <td>黑马程序员</td><td>6</td><td>几万人的it人才</td> </tr> </tbody> </table>
1.3 关于表格的合并单元格Rowspan 行方向上合并单元格 Column 列方向合并单元格 <tableborder="1"> <thead> <tr> <th>姓名</th><th>年龄</th><th>成绩</th> </tr> </thead> <tbody> <tr> <!--rowspan：一个单元格占用两行进行显示 --> <tdrowspan="2">传智播客</td><!--<td>14</td> -->
<!--colspan=2 将一行中的 一个单元格 占用两个列进行显示。 --> <tdcolspan="2">已经培养10几万人的it人才</td> </tr> <tr> <!--<td>黑马程序员</td>--><td>6</td><td>几万人的it人才</td> </tr> </tbody> </table>
1.4 Div和span标签Div标签: <div></div> Span标签: <span></span> 块级标签:独占行。 行级标签：可以跟其他的行内标签共用一行。 块：p，div，ul，ol，dl，li，dt，h1-h6 行：span，strong，em，文本相关的标签都是行内标签。
Div多用于表示文档中的一个块或者是整个结构的小节。 Span标签，多用于文本的一小节。 1.5 表单标签1.5.1 Form标签Form标签，表单的域标签，用于包裹整个表单的内容。 表单就是用户提交数据到后台的一个虚拟单子。 表单一般由文本框、下拉列表、单选、多选、文本域等组成。 Action属性，用于指定当前表单 提交的时候指向后台的地址。 1.5.2 Input标签Input标签是文本框、单选、多选、按钮等。 Type属性不同的取值决定了input标签的作用。 文本框：text 密码框：password 单选：radio 多选：checkbox 按钮：button 提交按钮：submit 重置按钮： reset Demo： <input type="password"> <input type="radio"name="gender"> <input type="text">
Input标签的 checked属性，属性值只有一个checked，可以省略属性值，在单选按钮和多选按钮中表示 此按钮被选中。 1.5.3 Select标签Select标签用于下拉列表，或者列表标签。 选项用option标签来设置，value值只有在后台有用。Option包裹的内容是显示的选项的文本。例如： <selectname="" id="" multiple> <option value="1">公历</option> <option value="2">农历</option> <option value="2">农历</option> <option value="2">农历</option> </select>
Multipe:也是一个单属性。值只有一个multiple。设置了此属性表示select标签表现为 列表标签。否则表示下拉列表标签。 1.5.4 文本域标签Textarea文本域标签，用来输入大量文本的的标签。文本域标签的cols表示可以容纳多少列字符。Rows容纳多少行数据。一般用于输入大量文本时才用这个，其他情况用input 就可以 了。
<!-- 文本域 --> <textarea cols="20"rows="10"> 内容 </textarea>
1.5.5 Fieldset标签表单组合标签，仅仅用于表单的组合。只是语义层面的事情。 可以影响到reset按钮的效果。 Legend标签用于组合标签的标题。 <fieldset> <legend>用户组2</legend> 用户名2：<input type="text"> <br> 密码2：<input type="text"> </fieldset>
1.5.6 Lable标签Lable标签可以让 标签文本点击的时候让label指向的标签表单标签获得焦点。 两种方式，使用for属性指向 表单标签。 用lable标签包裹表单标签。 案例： <labelfor="txtName">文本框获得焦点</label> <label><input type="button"value="普通的按钮"> 选中按钮</label>
1.5.7 表单总结Form：包裹标签，action：#
Input：文本框、单选按钮、多选按钮type:checkbox、提交的按钮、按钮、重置的按钮。 <input type=”text”> Type:radio ,单选 <input type=”submit”value=”提交”> <input type=”button” value=”普通的按钮”> Checked属性：标识单选或者多选按钮是否被选中。单属性。
Lable标签，for属性指向要提供服务的 标签的id值。 Lable直接包裹标签，可以实现点击标签的文字内容，让包裹的表单标签标签获得焦点。 <labelfor="txtName">文本框获得焦点</label> <label><input type="button"value="普通的按钮"> 选中按钮</label>
Select：下拉列表，列表。 Multiple，单属性。 Option设置我们的列表的选项。
Textarea文本域标签：当输入大量的文本的时候需要使用文本域标签。 Cols设置文本域可以输入多少列字符。宽度。 Rows 设置文本域的可以输入的行字符数，高度。
Fildset标签 Legend，组合标签的标题。
1.6 Iframe标签iframe标签，元素会创建包含另外一个文档的内联框架（即行内框架）。 <iframesrc="demo_iframe.htm" width="200"height="200"></iframe> 可以设置高度和宽度（height，width） 去掉边框：frameborder设置为0；
不建议使用了。
1.6.1 Mate标签的补充<meta http-equiv="X-UA-Compatible"content="IE=edge" />
上面代表如果是用ie打开的当前页面，那么就使用最新的ie版本打开此页面。
SEO优化的设置: <metaname="keywords" content="招聘java,php,android,ios,c/c++,网页设计,平面设计,UI设计,JavaScript,网络营销讲师">
<metaname="description" content="IT培训的龙头老大,年薪30万-50万招聘Java,PHP,android,ios,c/c++。" >
<base target="_blank"> Base标签可以让当前页面中的所有的a标签都拥有相同 的属性，比如targent属性。 1.7 字符实体怎么才能实现在HTML页面中显示HTML的代码呢？ 比如说：要在页面中显示： <HTML5> <p>这是p标签的写法</p>
HMTL： 1、网页结构：HTML Div、span、strong、em、table、tr、td Ul、li、ol、dl、dt、dd Input select textarea lable form fielset
2、CSS，描述样式 3、JavaScript，实现页面交互的效果。
| 
收藏
淘帖
踩
