网页

1.网页的组成部分

　　　网页是由文字，图片，视频，音频，输入框，按钮这些元素（也就是html标签）组成。

2.浏览网页常用的五大主流浏览器

　　　谷歌，IE，火狐，欧朋，safari。浏览器的内核（渲染引擎）将我们的html标签渲染成我们人眼可视的。

　　　谷歌浏览器内核：webkit -> blink

　　　 IE => trident

　　　 火狐 => gecko

欧朋 => presto

safari => webkit 1.4 服务器(了解)

HTML

html的全称是：Heper Text Markup Language（超文本标记语言）

<!DOCTYPE html>

<html>

</html>

HTML标签

文本标签

　　1.加粗标签

<b>你好</b>

<strong>你好</strong>

　　2.斜体标签

<i>你好</i>

<em>你好<em>

　　3.下划线

<u>你好</u>

<ins>你好</ins>

　　4.中划线标签

<del>你好</del>

<s>你好</s>

标题标签

<h1 ailgn="left(默认值)/center/right"></h1>

.......

<h6></h6>

双标签

<h1></h1>在一个网页中有且仅有一个。

段落标签

<p></p>

<p ailgn="left/center/right"></p>

特点:独占一行

        显示不下自动换行

        宽度继承父元素宽度，自带外边框

 

图片标签

<img src="图片路径">

img标签的常用属性及作用

src属性：引用图片的路径

height属性：图片的高度

width属性：图片的宽度

title属性：图片的标题，鼠标在图片上显示的文字

alt属性：图片无法显示时的文字

 超链接

<a href="外部网址或页面内部的路径"></a>

href:超链接地址

属性：

target

<a target="_self">在当前页面打开对应页面（默认）</a>

<a target="_blank"> 新建一个标签页打开相应页面</a>

特点：

自带下划线 默认为蓝色点击后变成紫色

表格标签

1.表格的概述

　　表格由若干个单元格有次序的组成了行和列

2.标签

　　table 整个表格

　　tr 每一个tr代表一行

　　td 每一个td代表一行里的一列，或单元格

3.属性

　　border 设置表格里的边框

　　width 宽，数字，默认单位px, 100%;

　　hegith 高

　　align 设置表格里的水平对齐方式，left/center/right

　　cellspaching 设置表格内单元格的间距 取值0

　　cellpadding 设置单元格的内边距，数字

　　bgcolor 背景色

　　rowspan 跨行，取值为数字1,2,3

　　colspan 跨列，取值数字　

表单

1.表单的作用

　　提供了供用户操作的可视控件

　　跟服务器交互

2.表单语法标签

<form></form>

3.表单属性

　　action 表单发送的服务地址

　　method 表单提交数据的方法，包括get和post

　　method：指定数据提交的方式

　　　　get 1.明文提交，待提交的数据会在地址栏中显示出来

　　　　　     2.不安全

　　                3.有安全限制

　　post 1.隐式提交

　　                   2.安全性较高

　　　　　　    3.没有大小限制

4.表单常用标签

输入框

    <input type="" name="">

下拉框

    <select>

            <option></option>

    </select>

文本域

    <textarea></textarea>

按钮

    <button></button>

表单分组

    <fieldset></fieldset>

5.input常用属性

　　type属性，name属性，value属性，placeholder属性，tabindex属性，checked属性，disabled属性（该属性数据不会传到表单中），hidden属性

6.input的type属性

　　text：文本输入框

　　password：密码输入框

　　radio：单选按钮

　　checkbox：复选按钮

　　file：文件上传按钮

　　submit：表单提交按钮

　　reset：重置按钮

　　image：图形提交按钮
7.表单总结

name: 只要用了form表单，而且这个值你想发送给服务器，则必须添加name属性，因为后端就是靠name来获取你传过来的值，另外一个作用，可以为单选和复选分组

value: 指定input元素内的值，给js使用或给服务器用

disabled: 禁用控件，无值属性，只要这个词出现在input上，就禁用了，不能操作也不能提交

type： 指定input表单元素的类型

输入框

type="text" 文本输入框

type="password" 密码输入框

type="number" 数字输入框

属性：

placeholder： 占位符，默认显示在输入框中的文字

maxlength: 规定了输入框内最大可以输入的字符数量，取值数字

readonly: 只读，不能改，但是可以提交给服务器，无值属性

按钮

type="submit" 提交按钮，特点：提交表单，缺点：自动刷新页面

type="reset" 重置按钮，特点：清空表单内input框内的值

type="button" 普通按钮，无特点

属性value，设置按钮的文字

单选框和复选框

type="radio" 单选框

type="checkbox" 复选框

属性：

name：给单选框或多选框分组，跟服务器进行交互

checked: 设置默认被选中的复选框或单选框，无值属性

disabled

文件

type="file"

?username=admin

提供给用户可以输入多行文字的控件

<textarea></textarea>

选项框

<select>  定义一个选项框

    <option></option>  每一个选项

</select>

属性

option:

value

selected: 无值属性，设置哪个option默认被选中

select:

size: 取值数字，设定用户可以直观看到的条数，如果选项数量超过了size的值，会出现滚动条,size默认是1

name

multiple: 可以设置多选，无值属性，前提是size>1

块级标签和行级标签

块级元素

　　特点：1.独占一行

　　　　　2.可以设置宽高，默认宽度为父元素宽度，默认高度为内容所占高度

　　　　　3.两个块级元素默认纵向排列

行内元素

　　特点：1.默认水平排列可以在一行显示

　　　　　2.不可以设置宽高，宽高有行内元素的内容决定

　　　　　3.可以设置margin和padding的左右边距，上下不可以

行内块元素

　　特点：既有行内元素特点，又有块级元素的特点

1.常用的列表

1.无序列表标签

<ul>

    <li></li>

</ul>

2.有序列表标签

<ol>

    <li></li>

</ol>

3.定义列表标签

<dl>

    <dt></dt>

    <dd></dd>

</dl>

2.常用的块级标签

1.<div></div>

2.<br/>

3.<p></p>

4.<h1></h1>...<h6></h6>

5.<ul><li></li></ul>

6.<dl></dl>

3.常见的行级标签

1.<a></a>// a标签的常用属性及作用：href属性：链接的地址；target属性：_self 在当前页打开新页面；
_blank 在新窗口打开新页面
 2.<span></span> 3.<strong></strong> 4.<em></em> 5.<i></i> 6.<b></b>

html学习笔记整理的更多相关文章

  1. python学习笔记整理——字典

    python学习笔记整理 数据结构--字典 无序的 {键:值} 对集合 用于查询的方法 len(d) Return the number of items in the dictionary d. 返 ...

  2. Deep Learning（深度学习）学习笔记整理系列之（五）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  3. Deep Learning（深度学习）学习笔记整理系列之（八）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  4. Deep Learning（深度学习）学习笔记整理系列之（七）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  5. Deep Learning（深度学习）学习笔记整理系列之（六）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  6. Deep Learning（深度学习）学习笔记整理系列之（四）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  7. Deep Learning（深度学习）学习笔记整理系列之（三）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  8. Deep Learning（深度学习）学习笔记整理系列之（二）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...

  9. Deep Learning（深度学习）学习笔记整理系列之（一）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0  2013-0 ...

  10. .NET编程和SQL Server ——Sql Server 与CLR集成 （学习笔记整理-1）

    原文:.NET编程和SQL Server ——Sql Server 与CLR集成 (学习笔记整理-1) 一.SQL Server 为什么要与CLR集成 1. SQL Server 提供的存储过程.函数 ...

随机推荐

  1. spring boot freemarker 导出word 带echarts图形报表

    创建word文件内容如下 将word导出为xml格式 将文件后缀名改为 .ftl 在springboot项目中添加freemarker依赖 <!-- 导出word文档--> <dep ...

  2. java中String和int相互转换常用方法详解

    java中int和String的相互转换常用的几种方法: String  > int s="10";int i;第一种方法:i=Integer.parseInt(s);//默 ...

  3. Linux安装httpd

    一.相关下载 1.httpd下载 官网下载:http://httpd.apache.org/ 或者 百度网盘链接: https://pan.baidu.com/s/1JPdU28tv6rePKJanB ...

  4. javascript高级笔记——内含事件，DOM，BOM等

    JavaScript高级笔记 1,DOM的简单学习 1.1,功能:用于控制HTML文档的内容: 1.2,获取页面标签对象:Element *document.getElementById(" ...

  5. 1. 全文搜索框架 Haystack

    1.什么是Haystack Haystack是django的开源全文搜索框架(全文检索不同于特定字段的模糊查询,使用全文检索的效率更高 ),该框架支持Solr,Elasticsearch,Whoosh ...

  6. 17.Linux命令

    1.网络配置 setup       配置 ifup eth0  启动网卡 文件保存在  /etc/sysconfig/network-scripts/ifcfg-eth0,修改ifcfg-eth0配 ...

  7. [NOIP2003] 传染病控制题解

    问题 F: [NOIP2003] 传染病控制 时间限制: 1 Sec  内存限制: 128 MB 题目描述 [问题背景] 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范 ...

  8. Linux查看空间大小的命令

    在linux中,常用查看空间大小的命令有df.du,下面依次介绍一下. df 命令是linux系统上以磁盘分区为单位来查看文件系统的命令,后面可以加上不同的参数来查看磁盘的剩余空间信息.Linux d ...

  9. nginx连接资源管理

    本文介绍在nginx中连接资源(即ngx_connection_t)的管理与使用. 连接池的初始化 在ngx_cycle_t结构体中维护了几个和连接相关的数据,具体如下 struct ngx_cycl ...

  10. pycharm编辑器配置（持续更新完善）

    谨记:pycharm仅是一款编辑器,不要太依赖 pycharm的提示,不然后期换了编辑器就不行了 python解释器安装.多版本共存等 去python官网下载安装,配置环境变量.多版本共存等问题请参见 ...