html基本基础 |
您所在的位置：网站首页 › html表单基本结构 › html基本基础 |
|
HTML基本结构 声明——设置当前html的版本 根标签——有且仅有一个 < head>——设置当前html的信息 搜索引擎抓取HTML顺序 一、< title> 二、< meta name=”keywords”> 三、< h1> 语义化——当前标签的含义，使用当前含义带来的默认css样式 HTML标签/元素/标记 HTML属性 分类——私有属性、标准属性、事件属性 格式—— HTML路径问题（地址） 绝对路径——查找的开始位置是固定的相对路径——查找的开始位置是变化的（在实际开发中使用更多），向上跳转一级使用”../”完整的地址 | http:// | localhost：| 8080 | /day02 | #name 网络协议 IP地址 端口号 相对路径 锚点 localhost=127.0.0.1表示本机 网络访问——和互联网有关系本地访问——和网络无关，file:///……链接元素 第一个作用：从当前页面跳转到指定页面；链接元素的第二个作用——通过href属性设置当前链接跳转的地方 格式：设置href属性值，格式——#+name属性值，实现跳转后的地址（锚点效果）作用：并不是从当前页面跳转到指定页面，而是当前页面中跳转。既要实现锚点效果，但是不希望地址出现变化，这就是阻止默认行为！以后可以使用javascript来解决。链接元素的第三个作用（了解）——实现发送邮件 设置href属性值：“mailto:邮件地址”当时在实际开发中，这种方式用的越来越少！ 一、邮件使用较少； 二、电脑中必须有邮件软件； 图片元素< img >空标签，没有结束标签 必要属性： src属性——类似于标签中的href属性，设置需要显示在浏览器中的图片的地址alt属性——设置当前浏览器无法显示图片后显示的文本内容。 不显示的可能：路径不对，找不到图片；浏览器不支持< img >标签。可选属性： width属性——设置图片的显示宽度height属性——设置图片的显示高度单位 默认情况下，我们使用的是像素值px（绝对值）；百分值——0%~100%，（相对值）相对的是浏览器页面的百分比。注意：如果同时设置宽和高的时候，可能图片会被拉伸，显示图片尽量按照图片的原比例设置。浏览器加载图片问题：在加载过程中需要从浏览器中跳出，所以我们浏览器中加载图片越多，浏览器加载时间越长。每次跳出跳入时间还是由图片大小决定，越大会越慢的。 表格元素 概念：具有行和列（单元格） 行：水平方向（多个单元格）列：垂直方向（多个单元格）表头：目前第一行的内容就是表头，行内单元格不使用td,而是使用th设置表头；表头效果：字体加粗，居中显示；表示表格头，在整个表格第一行； < thead>； 表示中间 < tbody>； 表格结尾，显示在表格的最后一行； < tfoot>。这些都要放到< tr>标签的外面属性： border默认效果是0，可以设置宽度；如果值较大时，只变化最外层的边框，里面的单元格边框是不会变化的。width设置单元格的宽度；想设置每个列所占整体宽度的比例的话，只需要设置第一行中的所有单元格所占的宽度即可。最好使用百分值来设置列宽。效果：最基本的效果上是没有线的（边框）作用： 表格的语义化 - 配合 CSS 可以实现漂亮的表格效果；利用表格的行和列的概念 - 实现页面元素的布局。表格的跨行和跨列 colspan——跨列，将横向几列进行合并rowspan——跨行，将纵向几行进行合并当定义好合并的行和列之后，不要忘记将需要合并的行列单元格进行取消。 HTML表单< form >标签 语义化——表示为表单；容器元素——没有任何效果的定义表单< form>标签只是定义表单容器； 必要属性： action属性——设置提交表单的服务器端地址。类似于< a>标签的href属性，写地址的，但是这个地址要编写的是服务器端的某个资源；method属性——设置当前表单提交方式 GET 提交表单后的地址内容：”提交地址?name=value&name=value” 将表单内数据内容添加到地址中，但是有缺点： 1、数据不够安全 2、数据的大小有限制，通常不能超过1KB。POST 没有将表单内的数据添加到地址中。标准属性： ID属性——设置当前标签的标识，必须是唯一的，不能重复name属性——为当前标签设置名称，允许重复 需要表单中所使用的输入框、按钮等组件；常见组件一：< input>标签 必要属性：type - text——文本框（输入框） - password——密码框，实际开发中的密码框都是由文本框来实现的。 - button——登录按钮，可以设置value，设置按钮上显示描述。 - submit——提交按钮，将用户添加的信息提交给action中的服务器地址 定义表单的组合 容器使用< form>标签，配合< input type=”submit”>提交按钮常见的组件二：< input type=”类型”> 输入框： 文本框 输入框 按钮 注意：默认显示效果一致，语义化不同图片： ——主要应用在表单的内部单选框: 默认情况下，单选框之间是没有任何关系的； 一般情况下，将以下三个单选框设置为一组:通过为单选框设置相同的name属性; 一组单选框，怎么知道被选中的是谁？——checked属性 checked属性：通过设置该属性，默认当前单选框被选中；用户动态选中某个单选框时，判断当前单选框是否具有checked属性。 html css javascript node.js 复选框 设置相同的name属性值为一组； 复选框在设置成一组时，是看不出来效果的； 默认选中也是checke=“checked”； html css node.js JS文本域 作用：允许在页面中来选中本地文件，文件类型没有任何要求； 使用场景：文件上传 在默认情况下，每次只能选择一个文件。 想要每次选择多个文件——multiple属性 隐藏域： 作用：一般来设置一些不想被用户所看到的数据内容。 目前的实际开发中比较少用。input标签中的特殊属性 readonly属性——只读不能写，一般已经提供了默认内容，不允许修改的；他只针对输入框有效果。disabled属性——不可用。除了输入框以外，其他的都使用< input>组件。使用方式：属性名和属性值相同。这种属性，可以只设置属性名，不写属性值。表单元素中的下拉选项 下拉列表——下拉单选 < select>标签——下拉列表的容器元素 name属性——名称ID属性——唯一标识< option>标签——下拉列表中的项，默认显示第一个< option>内的内容 value——表示当前生成的值selected属性——表示当前值是否被选中下拉多选 < select>标签multiple属性——表示多选，默认只能选中四个选项；设置所有选项都显示：size属性——设置当前显示的选项个数 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |