本文最后更新于:4 个月前

概念

HTML是最基础的网页开发语言

Hyper Text Markup Language 超文本标记语言

超文本

  • 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本

标记语言

  • 由标签构成的语言。
  • <标签名称> ,如 <html><xml>
  • 标记语言不是编程语言

快速入门

语法

  1. html文档后缀名: .html 或者 .htm
  2. 标签分为
    • 围堵标签:有开始标签和结束标签。如 <html> </html>
    • 自闭和标签:开始标签和结束标签在一起。如 <br/>
  3. 标签可以嵌套:
    • 需要正确嵌套,不能你中有我,我中有你
    • 错误:<a><b></a></b>
    • 正确:<a><b></b></a>
  4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
  5. html的标签不区分大小写,但是建议使用小写html的标签
  6. 代码示例
    <html>
    	<head>
    		<title>title</title>
    	</head>
    	<body>
    		<FONT color='red'>Hello World</font><br/>
    		<font color='green'>Hello World</font>
    	</body>
    </html>

标签学习

文件标签

构成html最基本的标签

  • html

    • html文档的根标签
  • head

    • 头标签。用于指定html文档的一些属性。引入外部的资源
  • title

    • 标题标签。
  • body

    • 体标签
    • html5中定义该文档是html文档

文本标签

和文本有关的标签

  • <!-- -->:注释
  • <h1>~<h6>:标题标签
    • h1~h6:字体大小逐渐递减
  • <p>:段落标签
  • <br>:换行标签
  • <hr>:展示一条水平线
    • 属性:
      • color:颜色
      • width:宽度
      • size:高度
      • align:对其方式
        • center:居中
        • left:左对齐
        • right:右对齐
  • <b>:字体加粗
  • <i>:字体斜体
  • <center>:文本居中
  • <font>:字体标签
    • 属性:
      • color:颜色
      • size:大小
      • face:字体

属性定义

color

  1. 英文单词:
    • red,green,blue
  2. rgb(值1,值2,值3):
    • 值的范围:0~255 如 rgb(0,0,255)
  3. #值1值2值3:
    • 值的范围:00~FF之间。如: #FF00FF

width

  1. 数值:
    • width=’20’ ,数值的单位,默认是 px(像素)
  2. 数值%
    • width=’20%’,占比相对于父元素的比例

图片标签

<img>:展示图片

属性

src:指定图片的位置

  • 相对路径:以.开头的路径
    • ./:代表当前目录, 如 ./image/1.jpg
    • ../:代表上一级目录

代码

<!--展示一张图片 img-->
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">

列表标签

有序列表

最外层用<ol>
内层<li>:列表项

注意

  • 默认为 数字1 开始排序。
  • 可使用 type 属性,规定排序方式为“1/A/a/Ⅰ/ⅰ”。建议使用CSS样式。
  • 也可以用 start 属性,规定起始位置。但是 HTML5 不赞成使用。建议使用CSS样式。

无序列表

最外层用<ul>
内层<li>:列表项

注意

  • 默认列表项符号为 实心圆点·
  • 可使用 type 属性,规定符号为“disc/square/circle” 。但是HTML5不支持。建议使用CSS样式。

链接标签

<a>:定义一个超链接

属性

  1. href:指定访问资源的URL(统一资源定位符)
  2. target:指定打开资源的方式
    • _self:默认值,在当前页面打开
    • _blank:在空白页面打开

代码

<!-- 文本 -->
<a href="http://www.itcast.cn">点我</a>	
<a href="http://www.itcast.cn" target="_self">点我</a>
<a href="http://www.itcast.cn" target="_blank">点我</a>		

<!-- 图片 -->
<a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>

div

<div>:每一个div占满一整行。块级标签

属性

align

  • left
  • right
  • center
  • justify

不赞成使用。请使用样式取而代之。

代码示例

<div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>

注意/提示

  1. 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
  2. 如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
  3. 提示:请使用
    元素来组合块级元素,这样就可以使用样式对它们进行格式化。

全局属性

标签支持 HTML 中的[全局属性](https://www.w3school.com.cn/tags/html_ref_standardattributes.asp)。

事件属性

标签支持 HTML 中的[事件属性](https://www.w3school.com.cn/tags/html_ref_eventattributes.asp)。

span

<span>:文本信息在一行展示,行内标签 内联标签

代码示例

<p><span>some text.</span>some other text.</p>

注意/提示

可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

可以对同一个 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

提示:事实上,您也许已经注意到了,W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多,但是我们的做法是:使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。

HTML:

<p class="tip"><span>提示:</span>... ... ...</p>

CSS:

p.tip span {
	font-weight:bold;
	color:#ff9955;
	}

全局属性

标签支持 HTML 中的全局属性

事件属性

标签支持 HTML 中的事件属性

语义化标签

html5中为了提高程序的可读性,提供了一些标签。

  1. <header>:页眉
  2. <footer>:页脚

表格标签

  • <table>:定义表格
    • width:宽度
    • border:边框
    • cellpadding:定义内容和单元格的距离
    • cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
    • bgcolor:背景色
    • align:对齐方式
  • <tr>:定义行
    • bgcolor:背景色
    • align:对齐方式
  • <td>:定义单元格
    • colspan:合并列
    • rowspan:合并行
  • <th>:定义表头单元格
  • <caption>:表格标题
  • <thead>:表示表格的头部分
  • <tbody>:表示表格的体部分
  • <tfoot>:表示表格的脚部分

表单标签

  • 概念:用于采集用户输入的数据的。用于和服务器进行交互。
  • <form>:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围

<form>中的属性

  • action:指定提交数据的URL
  • method:指定提交方式
    • 分类:一共7种,2种比较常用
      • get:
        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
        2. 请求参数大小是有限制的。
        3. 不太安全。
      • post:
        1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
        2. 请求参数的大小没有限制。
        3. 较为安全。

注意

表单项中的数据要想被提交:必须指定其name属性

表单项标签

<input>

可以通过type属性值,改变元素展示的样式

type属性
  • text:文本输入框,默认值

    • placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
  • password:密码输入框

  • radio:单选框

    注意:

    1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
    2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
    3. checked属性,可以指定默认值
  • checkbox:复选框

    注意:

    1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
    2. checked属性,可以指定默认值
  • file:文件选择框
  • hidden:隐藏域,用于提交一些信息。
  • 按钮:
    • submit:提交按钮。可以提交表单
    • button:普通按钮
    • image:图片提交按钮
      • src属性指定图片的路径

<label>

指定输入项的文字描述信息

注意:
label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。

<select>

下拉列表
select 元素可创建单选或多选菜单。

注意:<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

<textarea>

文本域

属性:

  • cols:指定列数,每一行有多少个字符
  • rows:默认多少行

表单案例

<!--定义表单 form-->
<form action="#" method="post">
<table>
    <tr>
        <td class="td_left"><label for="username">用户名</label></td>
        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
    </tr>

    <tr>
        <td class="td_left"><label for="password">密码</label></td>
        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
    </tr>

    <tr>
        <td class="td_left"><label for="email">Email</label></td>
        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
    </tr>

    <tr>
        <td class="td_left"><label for="name">姓名</label></td>
        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
    </tr>

    <tr>
        <td class="td_left"><label for="tel">手机号</label></td>
        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
    </tr>

    <tr>
        <td class="td_left"><label>性别</label></td>
        <td class="td_right">
            <input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"></td>
    </tr>

    <tr>
        <td class="td_left"><label for="birthday">出生日期</label></td>
        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
    </tr>

    <tr>
        <td class="td_left"><label for="checkcode" >验证码</label></td>
        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
            <img id="img_check" src="img/verify_code.jpg">
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
    </tr>
</table>
</form>

 目录