web前端之html_day2

1meta标签

<metacharset="UTF-8"/>

<metaname="Keywords" content=" "/>

<meta name=‘Description‘ content=" "/>

Charset:指定当前文档编码格式

Keywords:表示关键字,对搜索引擎友好,实现网站推广

Description:表示网站描述,网站优化

2、表格

<table width=‘30px‘ height=‘60px‘border=‘1‘ cellpadding=‘0‘>定义一个表格

<tr>            定义行

<td></td>定义列

</tr>

</table>

width:  设置宽度

height:设置高度

border:设置边框

cellpadding:    设置文字与列(td)之间的距离

cellspacing:    设置列与列之间的距离(默认为2)

align=‘center‘ 给表格设置,让表格居中,给列设置,让文字居中

<th></th>   设置表格内容标题,用法和td用法是一样的

bgcolor     设置表格背景颜色

<caption></caption>     给表格加标题

table结构:

<table>

<thead></thead>

<tbody></tbody>

<tfoot></tfoot>

</table>

如果按照结构去写表格,就一定要按照顺序去写

2、表单

作用:搜索用户信息

属性:action/method

action 指定处理表单信息的程序

method get或者post  指的是表单的提交方式

get:讲我们的表单信息暴漏在地址栏中(安全性差)

post:通过后台方式提交给处理程序(安全性比较高)

表单结构:

<form>

表单控件

</form>

表单控件:

a、文本框 <inputtype="text">

<form action="1.php"method="post">

<input type="text" name="username"maxlength="3" readonly="readonly" >

maxlength:设置最大长度

readonly="readonly":只读(此时表单不能输入信息)

<input type="text" name="username"maxlength="6" disabled="disabled">

disabled="disabled"控件未激活(此时表单不能输入信息)

</form>

b、密码框 <inputtype="password">

<input type="password">

c、单选框 <input type="radio">

<form action="1.php"method="post">

<inputtype="radio" name="xingbie">男

<inputtype="radio" name="xingbie" checked="checked">女

checked="checked"设置默认选中

</form>

d、多选框<inputtype="checkbox">

<inputtype="checkbox" checked="checked">看书

<inputtype="checkbox">上网

<input type="checkbox">旅游

<inputtype="checkbox" checked="checked">学习

e、下拉列表框

<select></select>这是下拉列表框

<select>

<option>北京</option>

<option>上海</option>

<option>河南</option>

</select>

下拉列表分组显示

<select>

<optgrouplabel="上海">

<option>松江区</option>

<option>闵行区</option>

<option>徐汇区</option>

</optgroup>

</select>

属性:multiple="multiple"  实现多选效果

属性:selected="selected"设置下拉列表框实现默认选中

<selectmultiple="multiple">

<option>北京</option>

<option>安徽</option>

<optionselected="selected">上海</option>

</select>

f、多行文本框 <textarea></textarea>

属性:  cols="30"   用法效果和width一样

rows="10"  用法效果和height一样

介绍自己:

<textareacols="30" rows="60">

</textarea>

g、上传控件

<inputtype="file">

三种按钮:

h、普通按钮

<input type="button" value="确定">

注意:此按钮和js配合使用

i、重置按钮(将表单中的数据恢复到默认值)

<inputtype="reset">

j、提交按钮

         <input type="submit">

<input type="image"src="Hydrangeas.jpg"> 此按钮和submit按钮都可以提交表单

k、表单分组控件:<fieldset></fieldset>

<fieldset>

<legend>人员注册信息</legend>

<label>姓名:</label>

<label>年龄:</label>

</fieldset>

时间: 2024-11-07 04:41:24

web前端之html_day2的相关文章

Web前端开发笔记整理

web前端开发笔记: 1.web前端之html_day1 2.web前端之html_day2 3.web前端之css_day1

一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML 5.CSS 3.JavaScript 跨平台框架:React Native.Cordova 前端工程化:Grunt.Gulp.Webpack 前端预编译:Babel.Sass.Less 自动化测试:Jasmine.Mocha.Karma 一图在手,应有尽有! 更多信息参考:https://item.jd.com/12170351.h

一个8年web前端从业者的迷茫

来自一个8年前端从业者的迷茫 本人aming,创办了切图网 qietu.com,很少写这种自传性的帖子,希望能看完,因为会涉及到一些前端经验之谈. 8年前端从业者,8年光景不长,但是在web前端这个行业也不少了 ,我也是一个创业者,没有就职过BAT 是一个遗憾, 现在身边有些同学就职BAT 当高管,所以我想现在进到BAT应该还是有机会的 :) , 不过我还是毅然选择了创业. 理由很简单, 我骨子里不愿意给别人打工,我知道越早跳出来越容易,不然等到职位越来越高,薪水越来越高的时候,你不一定还有那个

Web前端面试题目及答案汇总

前端新人在面试前都比较焦虑,担心回答不上面试官的问题,也担心自己紧张,其实这都是心理没底的表现,今天和大家分享web前端开发常见面试题及答案,希望可以帮助即将面试的前端同学顺利通过面试. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端笔记1

web1.0时代:(联合) web2.0时代:(互动) 互联网没有崩溃,比以往更加重要.更加注重用户的交互作用. web3.0时代:(技术革新.统一通信协议) 语义化实现.(发展阶段) web4.0(AI人工智能) web前端工程师: 侠义:html.css.js 实习生要求:

web前端工程师应该会的9个软技能

做为一名web前端工程师(http://www.maiziedu.com/course/web-px/),往往我们可能只专注于修炼自己的内功,而忽视了软技能.硬技能决定你是否能得到工作,而软技能能够表明你是否适合这份工作和适应工作环境等.所有的公司都有属于自己的文化,并努力将这些文化传承下去,所以他们必须确保每一位新员工能够适应这个环境. 许多硬技能很容易获得并可很快的提高,而软技能由于和你性格等联系紧密,可想要改变他们是一件很困难和缓慢的事情.这里有七个核心的软技能,适用于大多数的企业,它们不

腾讯web前端开发工程师笔试题及答案

1. 如何实现事件委托? 首先要知道什么是事件委托. 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><ti

传智14期WEB前端培训

本月刚毕业的,最新的前端技术 下载地址:http://www.zygx8.com/thread-4882-1-1.html \web前端14期\01-HTML-基础班\1.html基础一上课资料.rar  \web前端14期\01-HTML-基础班\2.html基础二上课资料.rar  \web前端14期\02-CSS-基础班\3.css基础一上课资料.rar  \web前端14期\02-CSS-基础班\4.css基础二上课资料.rar  \web前端14期\02-CSS-基础班\5.css基础