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>
最新文章
- nodejs连接mongodb的方法
- 图文介绍如何在Eclipse统计代码行数
- hdu 1203
- 如果 if - 迈克.杰克逊的墓志铭
- web工程spring+ibatis单元测试
- Qt: The State Machine Framework 学习
- BAT染指影视制作 欲全面撬开互联网粉丝经济
- django post方法不能提交
- 图片与文字在div里实现垂直水平都居中
- UVA 10494-If We Were a Child Again(一流的塔尔苏斯)
- AVR编程_如何通过软件复位AVR?(转)
- Ubuntu Docker Registry 搭建私有仓库
- Scikit-learn:scikit-learn快速教程及实例
- JS里charCodeAt()和fromCharCode()方法拓展应用:加密与解密
- python预编译函数compile,exec,eval
- label标签内含有input元素,点击事件会触发两次
- 列举至少3种Support包中提供的布局或工具
- jQuery基础(四)动画
- 智能POS打印配置&;常见问题FAQ 12-14 后期持续更新
- 安装wamp 缺少msvcr100.dll
热门文章
- 基于SpringBoot的Web API快速开发基础框架
- Jenkins部署Web项目到远程tomcat
- Python面向对象知多少?
- Java EE核心框架实战(1)
- 精美的在线icon
- Excel催化剂开源第19波-一些虽简单但不知道时还是很难受的知识点
- 我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3cp8ng15g94wc
- [leetcode] 19. Remove Nth Node From End of List (Medium)
- [leetcode] 55. Jump Game (Medium)
- 【剑指offer】面试题(三)