day01-html

HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>

HTML的主要作用:

设计网页的基础,HTML5

HTML语法规范

	<!--
		1. 上面是一个文档声明
		2. 根标签 html
		3. html文件主要包含两部分. 头部分和体部分
			头部分 : 主要是用来放置一些页面信息
			体部分 : 主要来放置我们的HTML页面内容
		4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
		5. 标签不区分大小写, 官方建议使用小写
	-->

• 文字标签：修改文字的样式

  • <font></font>

  • 属性：

    • size：文字的大小 取值范围1~7，超出了7，默认还是7

    • color：文字颜色

      • 两种表示方式

        • 英文单词：red green yellow blue black white

        • 应用十六进制数表示 #ffffff ：RGB

          • 通过工具实现不同的颜色 #66cc66

• 注释标签

  • html的注释：<！-- html的注释 -->

• 换行标签

  • html的换行：<br/>

• 标题标签

  • <h1></h1> <h2></h2> <h3></h3> …… <h6></h6>
  • 从h1到h6，大小是依次变小，同时会自动换行

• 水平线标签

  • ---

  • 属性

    • size：水平线的粗细 取值范围 1~7
    • color：颜色

  • 代码 <hr size="5" color="blue"/>

• 列表标签

  • <dl></dl>：表示列表的范围

    • 在dl里面<dt></dt>：上层内容
    • 在dl里面<dd></dd>：下层内容

  • <ol></ol>：有序列表的范围

    • 属性 type：设置排序5方式 1(默认) a I
    • 在ol的标签里面<li>具体内容</li>

  • <ul></ul>：表示无序列表的范围 属性 type ：空心圆circle，实心圆disc，实心方块square，默认disc 在ul里面<li></li>

• 图像标签（**重点*）

  • <img src="图片的路径"/>

    • src：图片的路径

    • width：图片的宽度

    • height：图片的高度

    • alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容

      • 有些浏览器下不显示（没有效果）

• 超链接标签（**重点**）

  • 链接资源（**重点**）

    • <a href="链接到资源的路径"> 显示在页面上的内容</a>

      • href ：链接的资源的地址（默认不填是当前文件夹）

      • target ：设置打开的方式，（默认是在当前页打开）

        • _blank ：在一个新窗口打开
        • _self ：在当前页打开(默认)

    • 当超链接不需要到任何的地址，在href里面加#

      • <a href="#">这是一个超链接，无效果的</a>

  • 定位资源

    • 如果想要定位资源：定义一个位置 <a name="top">顶部</a>
    • 回到这个位置 <a href="#top">回到顶部</a>
    • 引入一个标签 pre：原样输出

• 表格标签（重要的标签*）

  • 可以对数据进行格式化，是数据显示更加清晰

  • <table></table>：表示表格的范围

    • border：表格线
    • bordercolor：表格线的颜色
    • cellspacing：单元格之间的距离
    • width：表格的宽度
    • height：表格的高度

    • 在table里面<tr></tr>

      • 设置显示方式 align：left（居左）center（居中）right（局右）

        • 在tr里面<td></td>

      • 设置显示方式 align：left（居左）center（居中）right（局右）

    • 使用th也可以表示单元格

      • 表示可以实现居中和加粗

  • 代码 <table border="1" bordercolor="blue" cellspacing="0">

  • 画图分析表格的写法

    • 首先定义一个表格的范围使用table

      • 定义一行使用tr

        • 定义一个单元格使用td

  • 操作技巧：

    • 首先数有多少行，数每行里面有多少个单元格

  • 表格的标题 <caption></caption>

  • 合并单元格

    • rowspan：跨行

      • <td rowspan="3">人员信息</td>

    • colspan：跨列

      • <td colspan="3">人员信息</td>

• 表单标签（****重要的标签****）

  • 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现

  • <form></form>：定义一个表单的范围

    • 属性

      • action：提交到地址，默认提交到当前页面

      • enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性

      • maethod：表单的提交方式

        • 常用的有两种 get 和post，默认是get请求

      • 面试题目：get和post区别

        • 1.get请求地址栏会携带提交的数据，post不会携带（请求体里面）
        • 2.get请求安全级别较低，post较高
        • 3.get请求数据大小的限制，post没有限制

  • 输入项：可以输入内容或者选择内容的部分

    • 大部分的输入项 使用 ：<input type="输入项的类型"/>

    • *****在输入项里面需要有一个name属性

    • 普通输入项：<input type="text"/>

    • 密码输入项：<input type="password"/>

    • 单选输入项：<input type="radio"/>

      • 在里面需要属性 name
      • name的属性值必须相同
      • 必须有一个value值

      • 实现默认选中的属性

        • checked="checked"

    • 复选输入项：<input type="checkbox"/>

      • 在里面需要属性 name
      • name的属性值必须相同
      • 必须有一个value值

      • 实现默认选中的属性

        • checked="checked"

    • 文件输入项（上传文件需要）

      • <input type="file"/>

    • 下拉输入项（不是在input标签里面的）

      <select name="birth">
      	<option value="1991">1991</option>
      	<option value="1992">1992</option>
      	<option value="1993">1993</option>
      	<option value="1994">1994</option>
       </select>
      

      • 实现默认选中的属性

        • selected="selected"

    • 文本域 <textarea cols="10" rows="10"></textarea>

    • 隐藏项（不会显示在页面上，但是存在于html代码里面） <input type="hidden"/>

    • 提交按钮 <input type="submit"/> <input type="submit" value="注册"/>

      • ？输入项name的值=输入的值&
      • 参数类似于key-value形式

    • 使用图片提交 <input type="image" src="图片路径"/>

    • 重置按钮 回到输入项的初始状态 <input type="reset"/>

    • 普通按钮(和js一起使用) <input type="button" value=""/>

• 案例：使用表单标签实现注册页面

  • 使用表格实现页面效果
  • 超链接不想要他有效果 href=“#”
  • 如果表格里面的单元格没有内容，使用空格作为占位符&nbsp；
  • 使用图片提交表单<input type=“image” src=“图片的路径”/>

• html中其他常用标签的使用

  • b：加粗

  • s：删除线

  • u：下划线

  • i：斜体

  • pre：原样输出

  • sub：下标（b圆在下）

  • sup：上标（p圆在上）

  • p：段落标签比br标签多一行

  • div：自动换行  ，用来整体的布局。

  • span：在一行显示，用来展示少量信息 。有多少东西就占据多少空间 ，height 和width 对它无用，除非调用style的display转换属性。

第一天的很简单 ，多记记标签 就好