html 基础

最近一直在用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 的注释为<!-- 注释-->

原文地址:https://www.cnblogs.com/xudongliang/p/5045533.html