Html基础总结笔记整理

最新推荐文章于 2024-04-30 22:06:17 发布

GiGi_

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量485

点赞数

分类专栏： Web基础文章标签： html

本文链接：https://blog.csdn.net/gigi_/article/details/53240121

版权

Web基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前学过一些Html,平时不怎么用,忘的差不多了,学习Android之前看视频把Html一些先要知识点标签啥的总结理清了一遍,拿出来分享一下,毕竟学Android这一方面懂的不一定要有多深,但基础的要知道

Html规范

html不区分大小写
html结构:
- 1,文档的声明:告诉浏览器,页面用的html标准是啥标准
  - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  - //HTML 4.01 Transitional,比较严谨的
- 2,head部分,
  - <meta charset="UTF-8"> //编码
  - <meta name="Generator" content="EditPlus"> //编辑器
  - <meta name="yyshui" content=""> //作者author
  - <meta name="Keywords" content=""> //关键字,给个值,可以在服务端拿到
  - <meta name="Description" content=""> //描述,提供给搜索引擎,提高搜索速度
- 3,body身体
  - 需要写的代码都要放在body里面

排版标签

<p></p>段落,单独占一行
* 内标签align,属性:left,center,right
<br>换行
* p标签多了一个空行,br标签是没有空行的
* br标签没有属性
<hr>线:默认是一条线,单独占一行,不能跟别的放在一行,如果实在想,可以用表格解决
- 属性:
  - width(长度)(html中单位只有一个:像素px)
    - 绝对width = "500";相对,用百分比width = "50%"(浏览器宽度的一半)
  - size(粗细)
  - color颜色
  - noshade不要阴影
    - < hr width = "500" size = "10" color = "red">
    - 竖向:width = "5" size = "100"
<center>里面的内容都在浏览器的中间
<pre></pre>预格式化
注释,eclipse中快捷键Ctrl+Shift+/就可以调出
<div></div>块级标签
* 把它作为一个整体,一个块来对待,可以一块一块的来设计
* 块级标签必须单独占一行
- 属性:
  - align
<span></span>作用和div一样
* 区别:<span>不换行
* 作用:比较填一个表单

字体标签

<h></h>规定字体的大小
- 从h1到h6
- 属性:align
字体标签
- 属性(3个)
  - face字体
  - size大小,取值只能从1到7,大于7按7算
    - 再大不行了,还想再大必须通过css来解决
  - color颜色(写法有三种)
    - 1,英文单词
    - 2,16进制,加#(红,绿,蓝)#FF0000红
    - 3,三原色new RGE(122,233,10)
特殊字符：解决出现冲突的情况
* 空格:&nbsp
* <小于 >大于, & &符号 " 双引号'单引号
© 版权 ™商标  空格
扩展：绐
<b></b>粗体bold
<strong></strong>粗体
<i></i>斜体italic
<em></em>斜体
<u></u>下划线
<s></s>删除线(中划线)

图片标签`<img>`

src图片位置
title提示性文本(公有属性)
Alt替代,当图片显示不出来的时候代替图片显示的内容
border: 边框
图片加超链:
* <a href = "XXX.html"><img src = "images/1.jpg" width = "300" height = "300"></a>
- 点一个图片的特定位置可以进去,其它地方进不去(局部区域加超链)
  - 用dreamweaver(热点)做,可以在里面找到坐标
图片align属性
* 指图片和周围文字的一个相对位置(不是指图片的居中),默认是在底部(文字在图片的底部),还有top,middle
* left图片在文字的左边

超链接

<a></a>三种形式
- 1,外部链接:连接到一个外部文件
  - <a href = "XXX.html">XXX</a>
- 2,锚链接:是指连接到本页面或者其他页面的特定位置
  - 首先要建立一个锚
    - <a href = "XXX.html" name = "a">XXX</a>
    - <a href = "#a">回到顶部</a>(必须加#,这样不会把它当作一个文件夹来对待)
    - 如再想到某页面的锚点<a href = "XXX.html#a">回到顶部
- 3,邮件链接
  * <a href = "mailto:XXX@163.com">进入我的邮箱</a>
target:用来告诉浏览器该用什么方式打开目标页面
* _self:本浏览器中打开(当前页面所在的浏览器)
* _blank:打开一个新的浏览器(新选项卡)
* _parent(只能用在框架中)
* _top(只能用在框架中)

清单标签(3种)

<ul></ul>无序(unorderlist)
- 里面的每一项是<li></li>
- 默认情况下是圆点
- 属性type:清单标签显示的图标是什么(w3c规定了3个,如果想放其它的要通过css来解决),也可以在li上用
  - 圆点disc
  - 方形square
  - 空心圆circle
<ol></ol>orderlist有序
- 默认阿拉伯数字
- type取值:1,a,A,i,I
- start从几开始
<dl></dl>difineList定义清单
- <dt>清单标题
- <dd></dd>清单项,相当于li

表格标签

<table></table>表格
- 表格是由行组成<tr></tr>
- 列叫作单元格<td></td>
属性
- border边
- align中center表格居中,要想让里面的内容居中,得设td的属性
- width,height
- cellpadding,
  - cell单元格,padding内容到边的距离
  - 默认字紧挨着左边的
- cellspacing,
  - spacing间距,单元格与单元格的间距,即边的粗细
- bordercolordark
  - 边框颜色的暗色,对于外面的表格是右边和下边,对于单元格来说是上边跟左边
- bordercolorlight
  - 边框颜色的亮色,对于外面的表格是上边跟左边,对于单元格来说是右边和下边
  - //想要它有一种3D的效果
- bgcolor,设置起个表格的背景颜色
- background,背景图片
  - 注:如果两者同时出现的话,background的优先级比bgcolor高
- 公有属性dir(方向direction)
  - 告诉浏览器表格里的内容方向排列是从左到右还是从右到左,只有这两个
  - rtl(right to left)
  - ltr(left to right)
tr行,里面可以有bgcolor属性,但是没有background属性,想要一行里面加,可以在css里加
td单元格,bgcolor,background
* align(水平居中) = "center",可以内容居中,让表格中所有的内容都居中,用css
* valign(垂直居中) = "top","middle","bottom"
合并单元格
- rowspan = "2",表示占两行,还要删个单元格
- solspan = "2",占两列
<th></th>相当于td+b,将里面的内容加粗,其它属性跟td一模一样
<caption>标题
- 放在哪都行
- 属性align,默认是上边的中间,还有left和right,bottom(底下)
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
* 写与不写有两个区别:
* 1,写了顺序可以任意用,浏览器解析时还是按照thead,tbody,tfoot的顺序显示
* 2,当表格的内容非常多的情况下,不传所有的传了才能显示
* 3, 写了可以边传输边显示

框架(可以一个浏览器中显示多个页面)

不要把框架写到body标签中,写在里面意味着只显示一个页面
先把它分成上下两个部分,用<frameset></frameset>框架集来分
* <frameset rows = "200,*">,分成上下两部分上面200个像素,"*"是剩下的
* 下面形成两个<frame></frame>,每个框架可以放一个页面
* 然后用src链接网址
* cols分成左右两个框架集
- 想要分成多少行多少列就会有多少个逗号
- noresize不想让你拖动,在frame里加
- scorolling = "no",不让用滚动条
- bordercolor框架边颜色,所有的都想要颜色就写在frameset标签里
框架当中的超链
* 给名字,name属性,然后用target属性来调用
内嵌框架:在页面上挖了一块来显示
* 只有ie浏览器支持,其它的都出不来效果
- <iframe></iframe>(i就是inner)
- 可以设定大小width,height
- 不想要滚动条scrolling = "no"

表单标签(非常重要!!!)

作用:用来搜集数据
<form></from>
提交的方式action="页面.html",要把它提交到哪个页面,提交到服务器上的是value的值,键值对(有名字的)
method,默认get方式
* 把提交的内容附加在网址的后面
* 还有一种post,地址栏后面没有附加,这种方式安全
* 区别1,安全;2,数据大小,get有限,不得超过1k
- 文本框<input>(3种)(type属性是指这个框是一个什么样的框)
  - type = "txt",是一个输入框(普通)
    - value指文本框中的内容,里面的值是我们要传给服务器的值,是需要提交的信息
    - size长度,单位不是像素,是字符,表示可以显示多少个字符
    - readonly只能读不能写
    - 连光标都不见disable(公有属性)
  - 密码框type = "password"
  - 隐藏框type = "hidden",里面的内容不是让你输的,也不想让你看到,提供给程序员你自己发送一些数据
  - 单选按钮type = "radio",默认把页面上名字相同的作为一组,才会达到单选的功能 ,里面value是提交给服务器的
    - 必须给一个名字,checked默认选中
  - 多选框checkbox,
    - name可以不一样,区别只在于服务端拿的方式不同,名字一样,拿的时候是个数组,不一样时只能一个一个的拿
  - button普通按钮,value按钮上显示的文字
    - <input type = "button" value= "普通按钮"></input>
    - 主要提供给javascrip,来调用javascrip来进行一些动态的效果
  - 提交按钮submit
    - <input type = "submit" value= "提交按钮"></input>
    - 将会把表单里的信息提交给action所规定的页面
  - 重置按钮reset
    - <input type = "reset" value= "重置按钮"></input>
    - 重新置换到表单中的控件初始的状态(form里面)
  - 图片按钮image
    - <input type = "image" src = "image.jpg" width = "80" height = "30"></input>
    - 功能和提交按钮完全一致,就是让看着好看一点
- 下拉框<select></select>
  - 里面的每一项叫<option></option>
  - value可以写中文也可以写英文
  - multiple可以进行多选
- 备注(多行文本框)textarea
  - 行:rows
  - 列:cols
- 普通按钮<button></button>作用跟上面完全一样,可以把type当作一个标签来使用,同样可以给它加事件
表单的语义化
- 一个是必填的一个是选填的<fieldset></fieldset>,就会给你加两个框,只起一个美化作用
  - 下面加一个标签<legend>必填信息</lengend>(标题一样的)

多媒体标签(希望页面上播放一些音乐,视频)

<bgsound></bgsound>播放背景音乐src属性
- loop播放多少遍,负数永远不会停
<embed></embed>播放视频4.0标准里面的
* 属性:autostart="false",是否自动开始
* volume音量
* loop次数
<video></video>播放视频html5(对后缀名有一定的要求mp4,wav,au能播放)
<marquee></marquee>滚动
- direction目标方向,direction = "right",从左向右跑,默认从右向左跑
  - 上下跑,先给个高度width=,height,上下跑down
- behavior行为,跑动的一个方式,三个值
  - slide移动一次
  - alternate来回移动
  - scroll转着圈滚
- scrollamount一次移动的距离,可以加快速度
- loop移动几圈
- scrolldelay移动一下休息一下,单位是ms,移动感觉一顿一顿的

头标签

<html>我们这个页面是一个html页面
- 属性lang(language),我们所用的语言en英语
<head>头,提供给服务器
- <meta>键值对提供一些信息
  - http-equiv = "reflesh"刷新用的,content = "3;url=http://www......"3秒后刷新到后面的页面
- <title>页面的标题
<body>
- bgcolor背景颜色
- background背景图片
- text,body里面的文本用什么颜色来显示,默认是黑色(所有文本)
- link超链没有点击之前的颜色
- alink鼠标点上去而没有松开的颜色
- vlink点击完之后的颜色