html. 超文本标记语言

超文本:指页面内可以包含图片、链接、音乐、程序等非文字元素。

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

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

静态网页:静态的资源

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

HTML文档树形结构图:<!DOCTYPE html>  1.有无(demo)        

                     2.种类之间的区别

           html    haed    1.meta [页面编码]    <meta>标签有2个属性,分别是 http_equiv 属性和 name 属性,不同的属性又有不同的参数值,这些不同的参数值实现了不同的网页功能。

                       [跳转]      1.name属性主要用于描述网页,与之对应的属性是content,content中的属性主要便于搜索引擎机器人查找信息和分类信息用的。

                       [页面缓存]    2.http_equiv 相当于http文件头的作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确的显示网页的内容,与之对应的属性是

                       [关键字]      content,content中的内容就是各个参数的变量值。

                       [X-UA-compatible]

                    2.title

                    3.link [ stylesheet ]

                        [ icon ]   

                    4.style

                    5.script

                 body 1.内行     <a>、<img>、<label>、<span>、<select>、<input>

                     2.块级标签  <div>、<fieldset>、<h1>、<hr>、<p>、<ol>、<ul>

                     3.可变标签  <button>、<iframe>、<del>

                     4.自定义标签

                     5.自定义属性

什么是标签?

是由<>包裹的单词构成(所有标签中的单词不能以数字开头),(标签不区分大小写,但推介小写)

标签分为两部分:<a>开始标签和</a>结束标签。两个标签中间的部分叫做标签体。

有些标签比较简单,使用一个即可。这种标签叫做自闭和标签。例如:<br>、<hr>、<input>、<img>

标签可以嵌套,但不能交叉嵌套 <a><b></a></b>

标签的属性:通常以键值对的形式存在。例如:name=’李’

属性只能出现在开始标签中或自闭和标签中。(属性的名字全部小写,属性值必须使用单引号或双引号包裹)

如果属性值和属性名完全一致,直接写属性名即可

body标签:

一、基本标签

  <hn>  n的取值范围是1~6,从大到小,用来表示标题

  <p>   段落标签,包裹的内容被换行,并且也上下内容之间有一行空白

  <b><strong>加粗标签

  <strike>  为文本中间加上一条线

  <em>   文字变成斜体

  <br>   换行

  <sup><sub>  上角标、下角标

  <hr>    水平线

块级标签和内联标签:

  块级标签<div>:<p>、<h1>、<table>、<al>、<ul>、<from>、<div>

  内敛标签<span>:<a>、<input>、<img>、<sub>、<sup>、<textarer>、<span>

block(块)元素的特点:1.总是在新行上开始

            2.高度、行高以及外边距和内边距都可以控制

            3.宽度缺省是它的容器的100%,除非设定一个宽度

            4.它可以容纳内联元素和其他块元素

inline 元素的特点:1.和其他元素都在一行上

          2.高、行高、内边距、外边距都不可以改变

          3.宽度就是文字或图片的宽度,不可改变

          4.内联元素只能容纳文本或其它内联元素

对行行内元素注意:设置宽度width无效

         设置高度height无效,可以根据height_line来设置

         设置margin只有左右有效,上下无效

         设置padding只有左右有效,上下无效。(元素范围增大了,对元素周围的内容没有影响)

特殊字符:&it、 &gt 、&quot、&copy、&reg

二、图形标签<img>

  src :要显示图片的路径

  alt :图片没有加载成功的提示

  title:鼠标悬浮时的提示信息

  width:图片的宽度

  height:图片的高度(宽和高只使用一个属性会等比例缩放)

三、超链接标签、抛锚<a>

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

  target_blank:在新的窗口打开超链接,框架名称:在指定的框架打开连接内容

  name:定义一个页面的书签

  用于跳转href:#书签名称

四、列表标签:

  <ul>无序标签

  <ol>有序标签

    <li>列表中的每一项

  <dl>定义列表

    <dt>列表标题

    <dd>列表页

五、表格标签:<table>

  border:表格边框

  cellpadding:内边框

  cellspacing:外边框

  width:像素百分比(通过css设置)

  <tr>table rows     <th>table head cell  <td>table date cell

  rowspan:单元格竖款多少行

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

  <table header>:为表格进行分区

六、表单标签:(djingo)<form>

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

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

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

  1.表单属性:HTML表单用于接受不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。表单标签,要提交的所有内容都在该标签里面。

        action:表单提交到哪。一般指向服务器端的一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理

        methed:表单的提交方式。post/get,一般默认为get

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

        post:..................................不放在地址栏中,2.安全性较高,   3............................没有限制

  2.表单元素:

        <input>   type:  text文本输入框

                 password:密码输入框

                 radio:单选框

                 CheckBox:多选框

                 submit:提交按钮

                 button:按钮(需要配合js)使用

                 file提交文件:form表单需要加上属性

              name:表单提交项的健(和id属性的区别:name属性适合服务器通信时使用的名称,id是浏览器端使用的名称,id属性主要为了方便客户端编程,在css和JavaScript中使用)

              value:表单提交项的值

                  对于不同的输入的人,value属性的用法也不同:

                    type=“buttun”,“reset”,“submit”  定义按钮上的显示的文本

                    type=“text”,“password”,“hidden” 定义输入字段的初始值

                    type=“checkbox”,“radio”,“image” 定义与输入相关连的值

              checked:radio 和 CheckBox 默认被选中

              readonly:只读 text 和 password

              disabled:对所有的 input 都好使

          <select>下拉选标签属性:

              name:表单提交项的健

              size:选项个数

              multiple:multiple

              <option>下拉选中的每一项属性:value表单提交项的值。selecet:selecet下拉选默认会被选中

              <optgroup>为每一项加上分组

          <textarea>文本域name:表单提交项的健, cols:文本域默认有多少列。rows:文本域默认有多少行

          <label>

             <label for ="www">姓名</label>

             <input id=“www”type=“text”>

          <fieldset>

              <fieldset>

               <legend>登录吧</legend>

               <input type="text">

              </fieldset>

                 

猜你喜欢

转载自www.cnblogs.com/jacky912/p/10324163.html