html学习笔记整理

时间 2019-11-16

标签 html 学习笔记整理栏目 HTML 繁體版

原文原文链接

网页html

1.网页的组成部分git

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

2.浏览网页经常使用的五大主流浏览器后端

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

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

　　　 IE => trident服务器

　　　火狐 => geckoide

欧朋 => prestopost

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

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>