HTML基础02

核心知识点

-link标签 meta标签列表表格表单网页布局标签

实体字符

link 标签

 -设置网页图标-☞ 注意事项 ：-  1.  图标格式最好是.ico 也可以是其他的图片格式（png,jpg）- 2.  设置网页图标使用的link标签必须放到head标签中- 3.  网页图标一般直接放到项目的根目下 -☞ 设置网页图标方式:`<head><meta charset="UTF-8"><title>Document</title><!-- 设置网页图标 --><link rel="icon" href="favicon.ico"></head>`

meat标签

  `<meta charset="UTF-8">`  声明编码格式，防止乱码

列表（重点）
```
   ☞ 无序列表(unordered-list)<ul><li> 列表项   </li><li> 列表项   </li></ul>
```
总结：
1. ul列表必须直接包含的标签是li
2. 在li标签中可以包含其他任何标签
3. 在展示数据的时候没有先后顺序的要求

例如：
<ul> <li><a href="#">蔚来第二款SUV ES6实车谍照曝光</a></li>
<li><a href="#">蔚来第二款SUV ES6实车谍照曝光</a></li> </ul>

☞ 有序列表： (order-list)
<ol> <li> </li> <li> </li> <li> </li> </ol>

 总结：1. 有序列表在展示数据的时候是按照一定的顺序显示的2. 有序列表在用法上与无序列表一样。例如：`<ol><li><a href="#">蔚来第二款SUV ES6实车谍照曝光</a></li><li><a href="#">蔚来第二款SUV ES6实车谍照曝光</a></li></ol>`

☞ 自定义列表(defined-list)

`<dl><dt> </dt><dd> 列表项 </dd><dd> 列表项 </dd>
</dl>`
总结：一般在网页的结尾处会使用该列表

表格（重点）

☞ 作用：
1. 最开始（没有css之前）进行网页布局
2. 用来展示数据

☞ 写法：
◆ 组成
表格 table 行 tr 列 td

  ◆  写法：<table><tr><td></td></tr></table>◆ 表格中的属性级其他标签介绍：1. border属性： 设置边框2. width属性： 改变宽度3. height属性： 改变高度4. 去掉td与td之间的距离  cellspacing的默认是2 5. 设置内容居中显示  align: left | center  | right◆如果希望表格中的内容对齐，那么将align属性设置给tr或者td◆如果将align属性设置给table，只能改变table整体的对齐方式，不会影响内容的对齐方式6. 如果希望给表格设置表头，那么请使用th标签替代td标签，th在表格中就是表示表头，默认实现文字居中加粗显示7. 设置背景颜色属性： bgcolor="颜色"；8. 设置表格的标题： <caption>人员信息表</caption><table border="1" width="400" height="400"  cellspacing="0" align="center"  bgcolor="pink"><caption>人员信息表</caption><tr bgcolor="red"><th bgcolor="green">姓名</th><th>年龄</th><th>职业</th><th>性别</th></tr></table>注意：1. 在浏览器中所有的元素（文字，图片），默认都是左对齐

☞表格其他部分介绍（了解）

  1.表格的标准的结构写法：<table><thead>  <tr><th></th> </tr></thead><tbody><tr><td></td></tr></tbody><tfoot><tr><td> </td></tr></tfoot></table>总结：1. 如果按照规范写法，会在一些低版本浏览器中出现兼容性问题（IE低版本）2. 在高版本浏览器中，浏览器默认会自动帮我们添加主体☞ 表格合并单元格：1. 横向合并：  colspan="2"2. 纵向合并：  rowspan="3"<tr><td></td><td colspan="2"></td><td></td></tr><tr><td></td><td></td><td></td><td rowspan="3"></td></tr>备注：1. 合并单元格后，将多余的行或者列删掉

7 表单（重点）

  ☞ 作用：  收集信息(通过表单控件收集信息)

☞ 表单组成：
1. 表单域（form）
2. 提示信息
3. 表单控件

☞ 表单域（form）:

  ◆属性 action 设置一个后台程序，处理表单控件中的数据  ◆属性 method 设置一个提交数据方式  （get |  post）<form action="1.js" method="post">用户名: <input type="text" name="username"><br><br>密码: <input type="password" name="pwd"><br><br><input type="submit" name=""></form>

☞ 表单控件：
1. 输入框：

  属性： name设置控件名称maxlength设置当前控件最多能输入多少个字符readonly="readonly" 设置当前控件为只读模式（不能输入）disabled="disabled"  当前控件没有被渲染成功（没有被激活）【不能输入】value设置控件默认值3. 密码输入框： <input type="password" name=""  value="">属性：与输入框的属性一样4. 下拉列表框：<select><optgroup label="中国"><option>北京</option>  <option>上海</option> <option>南京</option> <option>河北</option> </optgroup>   </select>或者：<select><option>北京</option>  <option>上海</option> <option>南京</option> <option>河北</option> </select>属性： selected="selected"  设置默认选中项例如：<option>北京</option>  <option>上海</option> <option selected="selected">南京</option>  <option>河北</option> 5. 复选框： <input type="checkbox">属性：checked="checked" 设置默认选中项<input type="checkbox" checked="checked">爱好<input type="checkbox" checked="checked">旅游<input type="checkbox" checked="checked">学习

单选控件：
注意：
1. 如果要实现单选效果，那么需要设置相同的name值
<input type="radio" name="abc">男
<input type="radio" name="abc">女
```
   2. checked="checked" 设置默认选中项
```
上传控件：<input type="file">
文本域：<textarea></textarea>
提交表单数据：
<input type="submit">

<input type="image" name="" src="按钮.jpg">
重置按钮：将表单控件中的值恢复到默认值
<input type="reset" name="">
普通按钮：
<input type="button" value="按钮"> 不能提交数据，可以和js配合使用

HTML基础总结 02相关推荐

python深浅拷贝面试_Python面试宝典之基础篇-02
原标题:Python面试宝典之基础篇-02 我觉得你如果正在找工作,我的Python面试宝典几期教程,你一定得花时间看完了! 题目006:说说Python中的浅拷贝和深拷贝. 点评:这个题目本身出现的 ...
【T-SQL基础】02.联接查询
概述: 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...
C基础学习笔记——01-C基础第02天（用户权限、VI操作、Linux服务器搭建）
在学习C基础总结了笔记,并分享出来.有问题请及时联系博主:Alliswell_WP,转载请注明出处. 01-C基础第02天(用户权限.VI操作.Linux服务器搭建) 打开终端:ctrl+alt+t ...
JavaScript基础第02天—运算符（操作符）—流程控制—循环—代码规范
JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...
JavaScript基础第02天笔记
JavaScript基础第02天笔记一.DOM简单学习 1.功能: 控制HTML文档内容 2.代码: 通过ID值获取元素对象 document.getElementById("id值&qu ...
（转载）【笨木头Lua专栏】基础补充02：函数的几个特别之处
[笨木头Lua专栏]基础补充02:函数的几个特别之处笨木头 2014-08-14 21:45 Cocos2d-x Lua 阅读(4,507) 6条评论没想到距离上一篇基础补充已经过了 ...
Linux 基础入门 02
Linux 基础入门 02 一.用户&组管理 1.1 usermod 用来修改用户账号的各项设定 -c<备注> #修改用户帐号的备注文字. -d登入目录> #修改用户登入时的 ...
Python基础知识02
内容供自己学习使用,如有错误之处,请大佬们指正,谢谢! 作者:rookiequ python基础知识02 数据类型列表(list):可以存放多个元素,并且元素类型可以不同 #可以存放多种数据类型 l ...
tree老师：每天五分钟教你学linux基础命令02
tree老师:每天五分钟教你学linux基础命令02 ls ls命令用于列出文件和目录.默认上,他会列出当前目录的内容.带上参数后,我们可以用ls做更多的事情. 比如,当我们刚刚改了文件,却不记得是 ...
CSS3基础入门02
目录 CSS3 基础入门02 边框相关属性 border-radius border-image box-shadow CSS3 弹性盒子模型什么是弹性盒子模型新旧版本的弹性盒子相关概念弹性容 ...

HTML基础总结 02

HTML基础02

核心知识点

-link标签 meta标签列表表格表单网页布局标签

实体字符

link 标签

meat标签

列表（重点）

表格（重点）

☞ 作用：

☞表格其他部分介绍（了解）

7 表单（重点）

HTML基础总结 02相关推荐

最新文章

热门文章

HTML基础总结 02

HTML基础02

核心知识点

-link标签 meta标签 列表 表格 表单 网页布局标签

实体字符

link 标签

meat标签

列表（重点）

表格（重点）

☞ 作用：

☞表格其他部分介绍（了解）

7 表单（重点）

HTML基础总结 02相关推荐

最新文章

热门文章

-link标签 meta标签列表表格表单网页布局标签