HTML介绍

HTML是什么?

即超文本标记语言,超文本:就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。

标记语言:标记(标签)构成的语言。

网页==HTML文档,由浏览器解析,用来展示的

静态网页:静态的资源,如xxx.html

动态网页:html代码是由某种开发语言根据用户请求生成的

html文档树形结构

什么是标签?

  • 由一对尖括号包裹的单词构成,例如: <html> *所有标签中的单词不可能以数字开头.
  • 标签不区分大小写。<html>和<HTML>推荐使用小写
  • 标签分为两部分:开始标签<a>和结束标签</a>.两个标签之间的部分,我们叫做标签体
  • 有些标签功能特别简单,使用一个标签即可。这种标签叫做自闭和标签。例如:<br/>,<hr/>,<input/>,<img/>
  • 标签可以嵌套,但不可以交叉嵌套。

标签的属性

  • 通常是以键值对的形式出现,例如name="alex"
  • 属性只能出现在开始标签和自闭和标签中
  • 属性名字全部小写,属性值必须用双引号或单引号包裹
  • 如果属性和属性名完全一样,直接写属性名即可,eg. readonly

head标签

<meta>

  meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数,这些不同的参数就实现了不同的页面功能。

  1、name属性主要用于描述页面,与之对应的属性值为content,content中的内容主要搜索引擎机器人查找信息和分类信息用的。

  2、http-equiv顾名思义,相当于http的文件开头,它可以向浏览器传回一些有用的消息,以帮助正确和精确的显示页面内容,与之对应的属性值为content。

body标签

一、基本标签(块级标签和内联标签)

1 <hn>:n的取值范围是1-6;从大到小,用来表示标题
2 <p>: 段落标签,包裹的内容被换行,并且上下内容之间有一行空白。
3 <b>,<strong>: 加粗标签
4 <strike>: 为文字加上一条中线
5 <em>:文字变成斜体
6 <sup><sub>: 上角标和下角标
7 <br>: 换行
8 <hr>: 水平线
9 <div><span>

 

块级标签:<p> <h1> <table> <ol> <ul> <form> <div>

内联标签:<a> <input> <img> <sub> <sup> <textarea> <span>

block块元素的特点 

  • 总是新行上开始
  • 宽度缺省是它的容器的100%,除非设定一个宽度
  • 它可以容纳内联元素和其他元素

inline元素的特点

  • 和其他元素都在同一行上
  • 宽度就是它的文字或图片的宽度,不可改变
  • 内联元素只能容纳文本或者其他内联元素

特殊字符

  &lt;&gt; &quot; &reg

二、图形标签<img>

 

src:要显示图片的路径
alt:图片没有加载成功时的提示
title:鼠标悬浮时的提示信息
width:图片的宽
height:图片的高

 

 

三、超链接标签(锚标签)

href:要链接的资源路径 格式如下: href="http://www.baidu.com"

target: _blank: 在新的窗口打开超链接。 框架名称:在指定框架中打开链接内容

name: 定义一个页面的书签

用于跳转 href: #id

 

四、列表标签

<ul>:无序列表

<ol>:有序列表
         <li>:列表中的每一项

<dl>:自定义列表
          <dt> 列表标题
           <dd> 列表项

 

五、表格标签

border: 表格边距
cellpadding: 内边距
cellspacing: 外边距
width:像素 百分比 

<tr>:table row
            <th>: table head cell
            <td>: table data cell

rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)  

 六、表单标签<form>

  表单用于向服务器传输数据

  表单能够包含input元素,比如文体字段、复制框、单选框、提交按钮等等。

  表单还可以包含textarea、select、fieldset和label元素

1、表单属性

  HTML表单用于接受不同类型的用户输入,用户提交表单向服务器传输数据,从而实现用户与Web服务器的交互。表单标签,要提交的所有内容都应该在该标签中。

  action:表单提交到哪,一般指向服务器段一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应的处理,比如https://www.sogou.com/web

  method: 表单提交的方式 post/get 默认取值 就是get(信封)

      get: 1、提交的键值对,放在地址栏中url后面  2、安全性相对较差  3、对提交内容的长度有限制

      post:1、提交的键值对 不在地址栏  2、安全性相对较高  3、对提交内容的长度理论上无限制

      get/post 是两种常见的请求方式

2、表单元素

type:    text    文本输入框
            password    密码输入框
            radio    单选框
            checkbox    多选框
            submit    提交按钮
            button    按钮(需要配合js使用)
            file    提交文件:    form表单需加上属性 enctype="multipart/form-data"

name:    表单提交项的键,注意和id属性的区别:name属性是和服务器通信时使用的名称,而id属性是浏览器端使用的名称,该属性主要是为了方便客户端,而在css和javascript中使用的

value:    表单提交项的值,对于不同的输入类型,value属性的用法也不同

checked:    radio和checkbox默认被选中

readonly:    只读 text和password

disabled:    对所有input都好使

 

上传文件注意两点:

1、请求方式必须是post

2、enctype="multipart/fprm-data"

 

<textarea>文本域

name:    表单提交的键

cols:    文本域默认有多少列

rows:    文本域默认有多少行

 

block块元素的特点 

posted @ 2019-10-13 12:34  John_Lzf  阅读(127)  评论(0编辑  收藏  举报