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>

 

posted @ 2019-08-12 19:24  倾城的森林  阅读(178)  评论(0编辑  收藏  举报