概念

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

Hyper Text Markup Language 超文本标记语言

超文本

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

标记语言

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

快速入门

语法

html文档后缀名: .html 或者 .htm
标签分为
- 围堵标签：有开始标签和结束标签。如 <html> </html>
- 自闭和标签：开始标签和结束标签在一起。如 <br/>
标签可以嵌套：
- 需要正确嵌套，不能你中有我，我中有你
- 错误：<a><b></a></b>
- 正确：<a><b></b></a>
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
html的标签不区分大小写，但是建议使用小写html的标签

代码示例

<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

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

width

数值：
- width=’20’ ,数值的单位，默认是 px(像素)
数值%
- 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>:定义一个超链接

属性

href：指定访问资源的URL(统一资源定位符)
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>

注意/提示

是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

提示：请使用

元素来组合块级元素，这样就可以使用样式对它们进行格式化。

全局属性

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

事件属性

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

span

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

代码示例

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

注意/提示

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

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

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

HTML:

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

CSS:

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

全局属性

标签支持 HTML 中的全局属性。

事件属性

标签支持 HTML 中的事件属性。

语义化标签

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

<header>：页眉
<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>

HTML：基础网页开发语言

概念

超文本

标记语言

快速入门

语法

标签学习

文件标签

文本标签

属性定义

color

width

图片标签

属性

代码

列表标签

有序列表

注意

无序列表

注意

链接标签

属性

代码

div

属性

代码示例

注意/提示

全局属性

事件属性

span

代码示例

注意/提示

全局属性

事件属性

语义化标签

表格标签

表单标签

<form>中的属性

注意

表单项标签

<input>

type属性

<label>

<select>

<textarea>

表单案例

上一页

[转]MySQL数据类型：UNSIGNED注意事项

笔记 MySQL

评论

相关推荐

`<form>`中的属性

`<input>`

`<label>`

`<select>`

`<textarea>`