html学习笔记整理
网页
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学习笔记整理的更多相关文章
- python学习笔记整理——字典
python学习笔记整理 数据结构--字典 无序的 {键:值} 对集合 用于查询的方法 len(d) Return the number of items in the dictionary d. 返 ...
- Deep Learning（深度学习）学习笔记整理系列之（五）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning（深度学习）学习笔记整理系列之（八）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning（深度学习）学习笔记整理系列之（七）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning（深度学习）学习笔记整理系列之（六）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning（深度学习）学习笔记整理系列之（四）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning（深度学习）学习笔记整理系列之（三）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning（深度学习）学习笔记整理系列之（二）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning（深度学习）学习笔记整理系列之（一）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-0 ...
- .NET编程和SQL Server ——Sql Server 与CLR集成 （学习笔记整理-1）
原文:.NET编程和SQL Server ——Sql Server 与CLR集成 (学习笔记整理-1) 一.SQL Server 为什么要与CLR集成 1. SQL Server 提供的存储过程.函数 ...
随机推荐
- 成功入职ByteDance，分享我的八面面经心得！
今天正式入职了字节跳动.办公环境也很好,这边一栋楼都是办公区域.公司内部配备各种小零食.饮料,还有免费的咖啡.15楼还有健身房.而且公司包三餐来着.下午三点半左右还会有阿姨推着小车给大家送下午茶.听说 ...
- kuangbin专题 专题一 简单搜索 Pots POJ - 3414
题目链接:https://vjudge.net/problem/POJ-3414 题意:给你两个杯子,分别容量为A(1),B(2)和一个C,C是需要经过下列操作,得到的一个升数.(1) FILL(i) ...
- 【最短路算法例题-升降梯上】-C++
描述 启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨大手柄. Nescafe之塔一共有N层,升降 ...
- 【栈-例题】网页跳转-C++
描述 蒜头君每天都在用一款名为 "蒜厂浏览器" 的软件.在这个浏览器中,一共三种操作:打开页面.回退和前进.它们的功能如下: 打开页面:在地址栏中输入网址,并跳转到网址对应的页面: ...
- 洛谷P3905 道路重建
题目:https://www.luogu.org/problemnew/show/P3905 分析: 此题是显然的最短路算法,只是看到一起删掉的一堆边感到十分棘手,而且还要求出的是最短添加边的总长度 ...
- CSS画出三角形（利用Border）
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
- c++ 动态规划(数塔)
c++ 动态规划(dp) 题目描述 观察下面的数塔.写一个程序查找从最高点到底部任意位置结束的路径,使路径经过数字的和最大. 每一步可以从当前点走到左下角的点,也可以到达右下角的点. 输入 5 13 ...
- thinkphp 数据库操作
//所有的数据中,查出某个字段$result = $music->field('music')->select();$hotlist = M('News')->where('stat ...
- linux初学者-软件安装与管理篇
linux初学者-软件安装与管理篇 在linux的学习和工作中需要安装许多的软件.在redhat的linux操作系统下,软件一般都是rpm格式的.以下将介绍一些软件安装和管理的内容. 1.软件名称 在 ...
- 一文搞懂List 、List<Object>、List<?>的区别以及<? extends T>与<? super T>的区别
前段时间看<Java编程思想>泛型时对 <? extends T>与<? super T>很懵逼,接着看到泛型与集合的更蒙蔽,随后又翻开<码出高效>时, ...