HTML基础知识（常复习，常修正）

时间 2019-11-10

标签 html 基础知识复习修正栏目 HTML 繁體版

原文原文链接

####html基本结构 `<!dcotype html>css

<html> <head> <meta></meta> <title></title>html

</head> <body></body>浏览器

</html>`服务器

说明：app

<!dcotype html>（h5文档声明) <!doctype>的做用是指示浏览器页面使用哪一个html版本进行编写。框架

meta用于描述页面的元信息 [author/keywords/description/others]oop

####块级元素与行级元素：块级元素：占据整行,能够容纳其余元素或者行元素 div/h1-h6/p/hr/ol/ul/post

行级元素：与其余行元素占同一行，能够容纳其余行元素，不能够容纳块元素 strong/em/s/u/a/span/img/input动画

####强调文本： <em>文本</em>强调默认斜体网站

<strong>文本</strong>强调默认加粗

<span>文本</span> 没有语义，做用就是为了设置单独的样式

####引用文本：引用单行文本：<q>引用文本</q>

引用多行文本：<blockquote>引用段</blockquote>

特殊格式

分行显示：<br/>     水平线： <hr/>
    特殊符号：空格：&nbsp;  大于：&gt  小于：&lt
    输入地址：<address>地址信息</address>
    一行代码：<code>代码</code>
    多行代码： <pre>多行代码</pre>

####列表无序列表： <ul><li>文本</li><li>文本</li></ul>

有序列表：<ol><li>文本</li><li>文本</li></ol>

####表格： `<table>

<caption>表格标题</ caption> <thead>  <tr> <th></th> 浏览器对th样式默认粗体居中显示 </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> <td></td> </tr> <tfoot> </table>`

<thead><tbody><tfoot>虽然对于网页显示不会有影响，可是能够方便搜索引擎更好的解析结构

######table样式取消表格内部之间的距离：设置table的css样式：border-collapse:collapse;

cellpadding: n px; 单元边沿与其内容在之间的距离，通常不建议规定；

cellspacing: n px 规定单元之间的空隙通常不建议规定;

合并行： <td rowspan="跨度行数">

合并列： <td colspan="跨度列数">

####超连接 a标签语法： <a href="目标网址" title="鼠标滑过显示的文本" target="打开方式">连接文本</a>

target属性： "_self;    _blank;    _parent;    _top"

外部连接：连接其余网站

内部连接：网站的其余页面或者当期页面（连接地址用相对路径)

锚点连接：连接到当前网页的其余部分语法：1.设置目标锚点的id属性 2.设置a标签的超连接

####图片img标签语法: <img src="图片地址" alt="下载失败时的替换文本" title = "鼠标移到图片时的提示文本">

src:相对路径（网站开发用)和绝对路径(少用)

图片格式：位图和矢量图位图(点阵图）由像素的单个点组成，有8位，24位和32位 8位：即28(2的8次方） 24位：真彩图（224) 网页制做经常使用24位 32位：2**24 位图格式：.jpg/.png/.gif

.jpg格式可以很好的处理大面积色调的图片， .png支持透明信息，即图像能够浮如今其余页面文件之上。网页制做经常使用png格式做用banner,icon和简单线条构图; gif通常用于制做动画图片

矢量图：向量图。用点、直线或者多边形等基于数学方程的几何图形表示图像，矢量图不管放大、缩小等操做都不会失真，可是难以表现层次色彩丰富的逼真图像效果。经常使用于印刷行业、网页logo或矢量插图。

矢量图格式：.ai/.cdf/.fh/.swf .ai静帧矢量图 .cdf工程图较多 .swf flash格式

####表单表单最重要的做用就是在客户端收集用户的信息，而后将数据递交给服务器进行处理

<from>标签属性: action="表单的处理程序（表单要提交的地址，该地址的用来处理从表单收集来的信息" ）

method="get/post"

enctype="编码方式"默认是：application/x-www-form-urlencoded multipart/form-data:MIME编码，对于“上传文件”这种表单必须选择该值。

target=" ”目标窗口的打开方式"同a标签

表单对象：input / textarea/ select+option

<input type=""/>

type='text'属性： value（文本框内文字) size(文本框长度) maxlength(最多输入字符串）

type="password"属性：同text

type="radio"属性： name和value都是必填项 (! ! 同一组的单选按钮，name取值必定要一致)

type="checkboox"属性： value checked="" 复选框是没有文本的，在本文内容前加上label for='id'能够将要捆绑id的值与for值绑定在一块儿,当点击label时，会触发相应的input元素

补充：单纯的label标签只是起展现做用，不能绑定id

type="button" 通常配合js脚原本进行表单的实现

type="reset" 重置按钮只能重置当前<form>标签内部的表单元素的信息，不能清除外部信息

type="submit" 提交按钮与服务器交互

type="image" 图片（不推荐）

type="hidden" 隐藏域

type="file" 上传文件：使用file时，必须在form标签中说明enctype="multipart/form-data"

#####<textarea rows=" " cols=" ">文本内容</textarea>

<select> +<option> 相似 ul+li

<select multiple="multiple" size="可见列表数“> <option vaule=" " selected="selected" >文本</option> </select>

####插入音频和视频(含flash)<embed>标签语法： <embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面高度">

####网页中插入背景图片<bgsound>标签语法： <bgsound src="背景音乐的地址" loop="播放次数"> loop=n/infinte/-1(无限循环) 加入音频没有操做界面

####浮动框架:iframe

浮动框架是嵌套在浏览器窗口中的子窗口，整个页面不必定是框架页面，可是要包含一个框架窗口

语法：<iframe src="浮动框架的源文件" width=" " height=" " scrolling=" "> <iframe>

scrolling属性值：auto (默认左对齐) yes(老是显示滚动条) no(不显示)