前端开发之html基础知识02

经典表格:表格没有列的概念,只有行的概念, 一行 tr,行中的单元格 td
表头的突出显示:tr>th

<table width="400px" align="center" border="1px" cellspacing="0"
cellpadding="5px"
> <!-- align = "center" 表格整体剧中-->
<caption>个人信息表</caption>
<thead>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>电话</td>
</tr>
</thead>
<tbody>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>187</td>
</tr>
<tr align="center">
<td>小红</td>
<td>女</td>
<td>157</td>
</tr>
</tbody>
</table>

表格其他设置:单元边框和表格边框的距离-> cellspacing 0

合并单元格:
跨行 rowspan
跨列 colspan

表单控件

<label for="i1">用户名<input type="text" id = i1></label>
label 标签用于点击标签即可跳转到输入框,提高用户体验

文本域,不支持富文本:<textarea name="" id="" cols="3" rows="5" ></textarea>

下拉菜单:select>option
<select name="" id="">
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
</select>

input属性: 提示: checked = "checked" 为单选默认选中状态 maxlength = 6

text
password

radio 单选 需要在每个选项中 name的值保持一致
<label for=""><input type="radio" name="gender">男</label>
<label for=""><input type="radio" name = "gender">女</label>

checkbox 多选
<label for=""><input type="checkbox" name = “like1”>篮球</label>
<label for=""><input type="checkbox" name = “like2”>足球</label>
<label for=""><input type="checkbox" name = “like2”>排球</label>

btton 按钮
submit 提交
reset 重置
image
file

form 表单:
<form action="http://baidu.com" method="get" name = "mydata">

前端开发之html基础知识02

原文地址:https://www.cnblogs.com/huasongweb/p/9589897.html

时间: 2024-10-12 13:45:32

前端开发之html基础知识02的相关文章

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

高效Web前端开发之路:YUI 3.15 PDF扫描版

JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言,被ECMA国际定义为国际化标准--ECMAScript.JavaScript具有使用局限性.在Web方面,其必须与各种DOM技术结合才能发挥作用.因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一.代码的简化以及功能的增强. <高效Web前端开发之路:YUI 3.15>作者便是在此背景下,以国外最优秀的JavaScript框架之一

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

[Java Web] 3\WEB开发之HTML基础程序试手

1.初试: 1 <html> 2 <body> 3 <h1>My First Heading</h1> 4 <p>My first paragraph.</p> 5 </body> 6 </html> 2.标题: HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.显然由大标题变为小标题.... 1 <html> 2 <body> 3

移动平台前端开发之WebApp代码技巧

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="yes" name="apple-mobile-web

ios开发之OC基础-类和对象

本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再将零散的知识点整理出来.这样的学习方法会带来更多的收获,同时要多做练习,按照思路,默写.改写代码.在这里,感谢欧阳坚老师,学习你的课程使我走上了ios的开发之路. 一定要明确一个要从事的方向,要不然就会感到迷茫.学习ios开发,并且从事ios开发这个行业,这就是我的选择.看到我的博客系列文章,其中大

Hybrid App开发之jQuery基础

前言: 前面学习了JavaScript/Html/Css的基础知识,今天学习一下常用js框架jQuery的使用进行快速的开发. JQuery的基本功能: 方位和操作DOM元素 控制页面样式 对页面事件的处理 大量插件在页面中的运用 与ajax技术的完美结合 首先先编写一个jquery程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

Hybrid App开发之JavaScript基础

前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言.使用它的目的是与 HTML超文本标记语言.Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互 作用.从而可以开发客户端的应用程序等: 具有以下几个基本特点: 脚本编写语言 JavaScript是一种脚本语言,它采用小程序段的方式

python全栈开发之Python基础(1)

一. 基础知识 python的运行方式有两种: 第一种通过交互式的运行方式,通过 "开始"->"所有程序" -> "python3.x" ->"IDLE" 运行. 第二种是我们写好的Python文件双击运行. Python的帮助系统 help() 我们在交互模式下输入help(),回车后输入想要查询的函数名即可. 如果想要从帮助模式中退出到交互模式,只需要在help>后面输入help()即可. 变量 `