web第一天:html

原创 2016年08月30日 14:11:39
HTML
HTML
一、HTML的概述
1、HTML简介
HTML(Hyper Text Markup Language):超文本标记语言。
>标记就是标签
>HTML不是一种编程语言,而是一种标记语言
作用:
*就是用来写网页的


2、HTML的书写规范
a).HTML的创建
可以使用文本编辑器来创建,扩展名html或htm
可以被IE(浏览器)解析浏览的。
b).HTML的结构
<html>
<head>
<title></title>
</head>
<body></body>
</html>



c).Html标签的规范
*Html是由一对尖括号包裹着的关键字组成的。例如:<title>
*HTML通常是成对出现的,是由一个开始标签和一个结束标签组成的。例如:<title></title>
特殊情况:
HTML的空标签。例如:<br/>
*HTML标签通常是有属性的。属性格式:属性名=”属性值”   可以用双引号、单引号或者不加引号。建议使用引号的。  例如:<font color="blue" size='22' face=隶书>真晴朗</font>
*HTML是可以嵌套使用的。(只允许包裹嵌套,不允许交叉嵌套)
*HTML是大小写不敏感的。推荐使用小写





二、HTML的基本标签(链接标签、表格标签)
1、文件标签
<html>标签
声明了该文档是一个HTML文档。
包裹了整个HTML 文件


<head>标签
网页的说明信息。
它里面的内容是不会显示。


<title>标签
它是网页的标题


<body>标签
负责显示页面的
它里面的内容是会显示的
*属性:
>text 设置body标签中正文的颜色
>background 设置body背景图片
>bgcolor 设置body的背景颜色


扩展:


1、绝对路径和相对路径(重要)
绝对路径:文件在硬盘上的具体位置。
相对路径:文件相对于引入者的位置。

相对路径中  /或者\\都是可以的

2、排版标签
<br/>标签
*就是一个换行


&nbsp;
*是一个空格


HTML注释
*格式:<!--注释内容 --> 


<p>标签
*就是一个段落标签。段前段后各加一行
*属性:
>align  设置段落的对齐方式
<hr/>标签
*就是一条水平线
*属性:
>color  设置水平线的颜色
>size 设置水平线的粗细
>width 设置水平线的长度



扩展:
1、HTML长度设置(了解)
像素:width =”6”或者width =”6px”
百分比:width =”80%”.它会随着浏览器改变而改变

3、块标签
<div>
在文档中设定一个块区域
块级元素(自动换行)
<span>
在行内设定一个块区域
内联元素(不自动换行)


HTML绝大多数都属于块级元素或者内联元素




4、字体标签
<font>标签
*设置字体的大小、颜色、字体类型
*属性:
>color 设置字体颜色
 >size 设置字体大小 取值范围 1~7
 >face 设置字体类型。


标题标签
*h1~h6
*h1最大,h6最小


斜体、粗体标签
<i></i>
<b></b>


滚动字幕
(marquee标签)
*只兼容IE,所以不建议使用




5、列表标签
有序列表(ol标签)
*属性
>type 设置有序列表的项目序号。 A,I,1
 >start 设置有序列表的项目序号起始值。


无序列表(ul标签)(常用)
*属性:
>type 设置无序列表的项目标号。 
 
 
列表项条目(li标签)


6、图片标签
<img />
*属性:
>src 设置图片引入路径的(常用)
>alt设置替代图片的文字(常用)
>width 设置图片的宽度 
>height 设置图片的高度
>border 设置图片的相框宽度
>align 设置图片的对齐方式(不建议使用)




7、链接标签(重点)
<a>
*如果要实现跳转链接,那么必须有内容。例如:<a>内容</a>
*属性:
>href 设置链接路径(常用)
 访问内网:相对路径或者绝对路径
 访问外网:需要加上http协议。 例如:http://www.baidu.com 


>name 设置锚点(常用)
 配合herf使用
 设置锚点,a标签可以没有内容


>target 定位资源打开位置。
一般可以配合框架使用。
例如:<a href=”xx.html” target=”top”>打开</a>
 <frame name=”top”/>
 那么就是在名字为top的框架中打开。


8、表格标签(重点)


表格标签
*table,用来定义一个表格
行标签
*tr,用来定义一个表格内的行
单元格标签
*td,用来定义一个单元格。
*th,用来定义一个表头单元格。默认居中加粗
*td及th属性:
>colspan 列合并
>rowspan 行合并
表格标题标签
*caption,用来定义一个表格标题
*必须紧跟在table标签之后



分组标签
*对表格中的行进行分组
*thead 定义表格的页眉。仅有一个
*tbody 定义表格的主体。一个或多个
*tfoot 定义表格的页脚。仅有一个
*如果在分组标签外定义了行,那么行默认属于TBODY
*分组标签如果使用必须三个一起使用,否则无效果。
分行下载:
可以控制表格分行下载,从而提高下载速度。
在需要分行下载处加上<tbody>和</tbody>。




公司年度报告
第一季度 第二季度 平均
100 100 100
100 100  
400






三、HTML的表单标签(重点)
作用:表单用来提交用户输入的数据


1、表单标签
*<form>,就定义了一个表单
*常用属性:
>action  规定当提交表单时,向何处发送表单数据
向外网提交:http://www.baidu.com
>method  规定如何发送表单数据
post  和  get
默认是get

面试题:
表单提交 post和get的区别?
1、get方式提交会把参数显示在地址栏
post方式提交不会把参数显示在地址栏上

2、get方式敏感信息不安全
post方式敏感信息安全


3、get方式提交,官方限制提交大小仅1KB(但多数浏览器可以提交2KB)
post方式提交,提交大数据


2、输入标签
*input,定义了一个输入表单项,用来接收用户输入的信息。
*属性:
>type 指定输入标签的类型
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。非明文
单选框 radio 如:性别选择。
复选框 checkbox 如:兴趣选择。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值
附件框 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。例如:照片
隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。例如:用户编号
按钮   button 可以为其自定义事件。
图片提交按钮 image 是一个图片形式的提交按钮。用来美化提交按钮的。提交表单数据时,会将鼠标点击图片的坐标一起封装。较少使用

>name 用来指定输入项的名称。即参数名称
>value 用来指定输入项的值。即参数值
>checked 用来设置单选框或者多选框的默认勾选。值为checked为默认选中
3、选择框标签
*select,定义了一个选择框
*属性:
>name 用来指定选择项的名称。即参数名称
> multiple 用来设置选择框为多选形式
*option,定义了一个选择框条目
*属性:
>value 用来指定选择项的值。即参数值
>selected 用来设置选择框的默认选中。值为selected为默认选中
4、文本域标签
*textarea,定义一个文本域输入框
*属性:
>name 用来指定文本域的名称,即参数名
>cols 定义文本域显示几列
>rows 定义文本域显示几行
和<input type=“text”/>区别:
1、文本域可以换行,而文本框不可以
2、文本域的值是写在内容体中的,文本框的值是在value中

注册登录:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>01表单标签.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


  </head>
  <!-- 
  定义表单标签
    <form>
    属性:
    action 设置表单向何处提交
    内网提交:
    本页 # 默认
    相对路径和绝对路径
    外网提交:(几乎不用)
    http://www.baidu.com
   
    method 设置表单的提交方式
   
    HTML中,表单提交方式有两种
    get 默认的提交方式
    会把参数列表放在地址栏上
   
    post 不会把参数放在地址栏上(请求体)
   
   
    get和POST方式有什么区别?
   
    1、get方式会把参数列表放在地址栏上
      post方式不会(请求体)
      
    2、get方式 敏感信息不安全
      post方式  敏感信息相对安全
      
    3、get方式 提交的信息量有限  官方1kb
      post方式 提交的信息没有大小限制  (电影、文件)
    
   
    什么时候用get?什么时候用post?
   
    无关紧要的小数据量的数据,一般用超链接标签  href="?参数列表"  形式来传递信息  get
    <a href="http://www.baidu.com?content=21"></a>
   
   
    post
    一般表单提交几乎都用post
   
   
    表单的输入项
    
    input标签
    
    属性:
    type   设置表单输入项的表现形式
    >text 默认值。文本框
    >password 密码框   因为都是非明文的
    >radio 单选框
    1、必须分组(name)
    2、必须指定参数值(value)
   
    >checkbox 多选框
    1、必须分组(name)
    2、必须指定参数值(value)
   
    >submit 提交按钮。用于提交表单数据
    >reset 重置按钮。用于将表单恢复成默认状态
    >file 附件框。用于上传附件。(学习了上传下载)
    >hidden 隐藏域。适用于用户不需要知道,但是服务器必须的数据。(用户ID)
    >button 就是一个按钮。(必须和JS的事件连用)
    >image  是一个图形化的提交按钮。
    除了正常提交表单外,还可以把鼠标点击图片的坐标提交给服务器
   
   
    name 1、可以为单选和多选框进行分组
    2、作为表单提交的参数名。无参数名的输入项是无法被提交的
    
    value 1、可以为表单输入项指定参数值
    2、可以为按钮起名字
    
   
    checked     单选框和多选框的默认选中
    值:checked
   
    src 专门为type="image" 提供的。
    设置图片的路径
    
    ?sex=on
    ?username=zhangsan&pwd=123&sex=man
    ?后面是参数列表
    参数列表的格式:参数名1=参数值1&参数名2=参数值2.。。。。
    
    
    ----------------------------------
    select选择框标签
    属性:
    name 设置选择框的参数名
   
   
    multiple="multiple"   可以支持多选(扩展)
   
    option选择框的一个选项标签
    
    属性:
    value 设置选项的参数值
    如果没有设置value属性,那么默认将option的内容体作为参数值提交
   
    selected 设置选项的默认选中
    值="selected"
    <select>
    <option></option>
    </select>
    
    
    
    
    city=%E5%8C%97%E4%BA%AC
    city=北京
    
    被表单在提交时 进行了 url编码
    URL编码
    为了保证数据的完整性。把中文或特殊符号必须 编码  %+16进制位
    
    ----------------------------------------
    
    textarea文本域标签
    
    属性:
    name 设置文本域的参数名
    
    扩展:
    美工部分
    cols 设置显示有多少列
    rows 设置显示有多少行
   
    input type="text"
    textarea
    文本框和文本域的区别:
    1、文本框不能换行,文本域可以
    2、文本框的参数值 value属性
       文本域的参数值 内容体当中
    
   -->
  <body>
  <!-- 注册表单 -->
    <form method="get">
    用户ID:<input type="hidden" name="uid" value="001"/><br/>
    用户名:<input type="text" name="username" value="hehe"/><br/>
    密码:<input type="password" name="pwd"/><br/>
    性别:<input type="radio" name="sex" value="man" checked="checked"/>男
         <input type="radio" name="sex" value="woman"/>女
         <br/>
    爱好:<input type="checkbox" name="hobby" value="bc" checked="checked"/>编程
    <input type="checkbox" name="hobby" value="ps"/>爬山
    <input type="checkbox" name="hobby" value="yy"/>游泳<br/>
    照片:<input type="file" name="zp"/><br/>
    城市:<select name="city">
    <option value="">请选择城市</option>
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="sz" selected="selected">深圳</option>
     </select><br/>
    简历:<textarea name="jianli" cols="25">呵呵哒</textarea><br/>
   
    <input type="submit" value="注册"/><input type="reset"/>
    <br/>
    <input type="button" value="俺是按钮"/>
    <input type="image" src="../../img/001.jpg"/>
    </form>
  </body>
</html>

练习
简述get和post提交方式的区别
用table和form组合在一起写一个注册表单。
DIV和SPAN的
区别
版权声明:本文为博主原创文章,未经博主允许不得转载。

2016.1.20 html5之html第一天

开发工具     Intellij IDEA 段落 空格 建立超链接 打开本地//在同一工程下新建hreft.html->在body中输入跳转后显示的内容->再回到原来的html下,输入超链...
  • weiyumeizi
  • weiyumeizi
  • 2016年01月20日 23:06
  • 207

HTML第一天

第一次的开始真是很艰难,本来打算是看书《head first HTML与CSS》,但是发现完全享受不了该书的风格,莫名起码的幽默感和想象场景让我不知所云……后来又打算看慕课网的视频,但是觉着讲的是HT...
  • github_38636445
  • github_38636445
  • 2017年05月03日 22:33
  • 46

Html第一天

单词学习 inline: 内联 inline - block:行内联 link: 链接 hover:悬停 background - img:背景图片 background - repea...
  • shiios
  • shiios
  • 2016年12月28日 11:29
  • 345

html第一天

我是标题   //编码 //关键字 //描述 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你     //横线 事情还得从几天前的央视节目谈起。央视的《开讲啦》节目中,奇虎360...
  • xtstc
  • xtstc
  • 2015年08月22日 15:15
  • 42

oracle 获取 当年第一天 当月第一天

select trunc(sysdate,'YYYY'),add_months(trunc(sysdate,'YYYY'),12)-1, from dual t
  • mamingjie12
  • mamingjie12
  • 2014年06月13日 17:23
  • 14583

HTML:第一天

今天Web前端开始啦,先从HTML开始着手,然后带着CSS+JS。 1.< div align=”value”> value有以下属性: Value Describe left 左对...
  • mitchel6
  • mitchel6
  • 2015年04月22日 22:45
  • 176

web第一天

浏览器输入//地址,http通过IP端口查询到服务器,浏览器可以把www.xxx翻译为IP,需要dns服务器解析 我们电脑上都有host文件,优先级高于dns服务器 DNS缓冲—》host—》dns—...
  • qq_25596603
  • qq_25596603
  • 2017年07月31日 22:51
  • 35

WEB第一天

了解站点的定义:站点即网络上的地址,类似于现实中的地址,只不过此站点是数字化、虚拟的。HTML是超文本标记语言,相当于一个框架,用于放置等标签,从而设置网页的样式以及内容。HTML一个最大的特点是可以...
  • lujiayingwing
  • lujiayingwing
  • 2017年09月08日 19:25
  • 59

mysql日期 获取本月第一天 获取下个月的第一天

select curdate(); --获取当前日期 select last_day(curdate()); --获...
  • maonongwu
  • maonongwu
  • 2013年01月22日 16:04
  • 32216

sql 获取本月第一天 下个月第一天

select curdate(); --获取当前日期 select last_day(curdate()); --获取...
  • lishaojun0115
  • lishaojun0115
  • 2015年12月28日 16:01
  • 779
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web第一天:html
举报原因:
原因补充:

(最多只允许输入30个字)