Web前端之html

1、meta标签

<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>

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

3、表单

作用：搜索用户信息

属性：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">

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、普通按钮

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

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

<inputtype="reset">

j、提交按钮

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

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

<fieldset>

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

<label>姓名：</label>

<label>年龄：</label>

</fieldset>

转载于:https://www.cnblogs.com/opsedu/p/5488749.html

Web前端之html_day2相关推荐

读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
对WEB前端的几段思考（一）——界面设计和性能优化（整理中）
尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员 ...
web前端知识点太多_初学web前端，学习方法容易走偏，这是为什么？
一.了解web前端所谓"知己知彼,百战不殆",在学习web前端之前,还是让我们先了解一下什么是web前端吧! 所有用户终端产品与视觉和交互有关的部分,都属于前端开发的领域.从狭义 ...
web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
从零学web前端_从零到前端英雄（第2部分）
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
web前端培训分享：面向对象中类和对象的定义是什么?
在学习web前端技术的时候,我们接触的最多的便是面向对象这一块,其实很多编程技术都有用到这个现象,下面我们就为大家详细的介绍一下面向对象中类和对象的定义是什么? web前端培训分享:面向对象中类和对象 ...
哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
web前端培训要学多久
近几年web前端在互联网行业的快速发展,很多人都对web前端是非常感兴趣的,学习web前端技术的人越来越多,那么参加web前端培训要学多久呢?相信大家都想知道这个答案,我们来看看下面的详细介绍. ...
web前端的就业前景好不好
web前端的就业前景好不好?一直有人都想知道这个答案,其实放眼互联网未来,web前端的发展前景都是非常好的,那么它的就业前景自热也是不错,具体来看看下面的详细介绍就知道了. web前端的就业前景好不好 ...

Web前端之html_day2

Web前端之html_day2相关推荐

最新文章

热门文章