标签:
最近一直在用perl 写CGI,自己写的表达样式很丑, 决心好好看下前端的一些基本知识,先从html开始
1)标题:
h1, h2, h3, h4, h5, h5
标题为快级元素,自己独占一行,其后面的元素会另起一行
2) 段落
p
段落为块级元素,
3) 强调:
em: 默认斜体
strong : 默认加粗
span : 为元素单独添加样式
这三个元素都是内联元素
4)图片:
img:
src: 图片地址
title: 鼠标滑过图片时显示的文本
alt: 当图片加载失败时显示的文本
图片为内联元素, 图片格式可以为png, gig, jpeg
5) 超连接:
a :
href: 目标网址
title : 鼠标滑过链接时显示的文本
target: 新连接的打开方式,默认在本窗口打开,当值设置为_blank时,会在新窗口打开链接
mailto: 一种特殊的超链接,当点击该连接,会自动调用本地的默认邮件软件,进行邮件的发送:
href:mailto:example@qq.com?subject=design&body=
subject: 设置邮件主题
body : 设置邮件内容
超连接为内联元素,默认超链接内的文字为蓝色,点击过的超链接为紫色
6) 列表:
无序列表:
ul
无序列表默认每一个列表项一行,而且每个列表项前面有一个圆点
有序列表:
ol
li: 列表项
有序列表默认每一个列表项一行,而且每个列表项前面有从1开始的序号
列表为块级元素
7) 表格:
table:表格
summary: 设置表格的摘要内容
tbody:不加这个标签,表格内容加载一行显示一行,加上这个标签后, 当表格内容加载完后,再显示
caption: 设置表格的标题
tr: 表格的每一行
th: 表头, 默认文字加粗,居中
td: 单元格
表格为块级元素
8) 表单
form :
action : 指定处理表的服务器端程序,
method : 提交的方法,post 和 get
label: label 的作用为当鼠标单击label 时,自动跳转到for 指定的id 元素,
textarea : 多行文本输入框, 内联元素
cols: 设置列数
rows: 设置行数
这两个属性可以用css 的width 和height 属性来代替
input 接受用户的输入, 为了方便后端服务器程序接收收入的值, 每个input 需要设置name 属性, value 属性会设置默认值,有提示作用
input :
type="text" : 文本框, 内联元素
type="password" : 密码输入框, 内联元素
type="radio" : 单选框, 每个单选框的name 属性的值必须一致, 内联元素, checked="checked"设置默认选中的选项
type="checkbox" : 多选框, 内联元素, checked="checked" 设置默认选中的选项
type="submit" : 提交按钮, 内联元素, value 设置提交按钮的内容
type="reset" : 重置表单按钮, 内联元素 , value 设置提交按钮的内容
表单为块级元素
9) 下拉列表
select: 下拉菜单默认为单选, multiple=“multiple", 将下拉菜单设置为多选
option: 设置每个下拉列表中的选项
value : 设置提交到服务器的值
selected="selected" 设置默认选中的下拉选项
下拉列表为内联元素
10) 其他:
换行: br
水平横线: hr,块级元素
短引用:q,自动在引用的内容两端添加双引号,内联元素
长引用: blockquote 块级元素, 自动在引用的内容两端添加双引号,而且会自动缩进内容
地址: address 块级元素
代码: code : 内联元素
大段代码:pre : 块级元素
div : 控制排版, 块级元素
强调: em : 内联元素,默认斜体
strong: 内联元素, 默认粗体
html 是忽略空白和换行符的,所以想要显示空白必须使用
html 文件的基本结构
<html>
<head>
</head>
<body>
</body>
</html>
html 的注释为<!-- 注释-->
标签:
原文地址:http://www.cnblogs.com/xudongliang/p/5045533.html