html 基础
2015-12-14 17:16
369 查看
最近一直在用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 的注释为<!-- 注释-->
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 的注释为<!-- 注释-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 