一、HTML概述
1、简介
超文本标记语言,是最基本的网页开发语言;
标记语言不是编程语言,没有什么逻辑性;
2、概述
①html文档后缀名:.html或者.htm;
②标签分为:
围堵标签:有开始标签和结束标签,例如<html></html>;
自闭标签:开始标签与结束标签在一起,例如<br/>;
③标签可以嵌套;
④在开始标签中定义属性,属性由键值对构成,但需要用引号(单双引号都可以)引起来;
⑤html标签字母不区分大小写,但是建议使用小写;
3、元素和属性
一个HTML标签称为一个元素,一个元素内部可以设置例如id,title等信息,这些信息称为属性;
属性值一般用双引号引起,若属性值内部有双引号,则用单引号引起;
4、基本代码框架
<!-- html文档声明 -->
<!DOCTYPE html>
<!-- 根布局标签 -->
<html>
<!-- 头部标签 -->
<head>
<!-- 指定字节编码 -->
<meta charset="utf-8">
<!-- 标题 -->
<title>这是标题</title>
</head>
<!-- 网页的主体 -->
<body>
</body>
</html>
二、HTML标签
1、文件标签
<!DOCTYPE html>:
文档标记;
html:
html文档的根标签;
head:
头标签,用于指定html文档的一些属性,引入外部资源;
title:
标题标签;
body:
主体标签;
2、文本标签
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题</title>
</head>
<body>
<!-- HTML标题H1_H6 -->
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
<!-- HTML段落和水平线:颜色、宽度、高度、对齐方式 -->
<p>段落</p>
<hr color="aqua" width="200px" size="5" align="left"/>
<p>段落</p>
<!-- HTML注释 -->
<!-- 这就是注释 -->
<!-- HTML换行 -->
<p>换行前<br/>换行后</p>
<!-- 文本居中+字体加粗 -->
<center><b>加粗</b></center>
<i>斜体</i>
</body>
</html>
运行结果:
属性取值说明:
color的三种取值方式:
①英文单词:red、green、blue等;
②rgb(值1,值2,值3):值的范围是0~255,如rgb(0,0,255);
③#值1值2值3:值的范围00~FF,如#FF0000;
width的两种取值方式:
①数值:单位默认是px,例如width="20px";
②百分比:相对于父元素的比例;
3、图片标签
<img src="图片地址" alt="图片说明" width="宽度" height="高度" align="对齐方式"/>
图片地址的三种写法:
①本地图片资源:绝对路径,指的是图片在本机上的绝对位置;
②本地图片资源:相对路径,指的是图片相对于本html文件的位置:
写法:./:目录名/文件名(当前目录)或者直接写文件名;目录名/文件名(同级目录);../:目录名/文件名(上级目录);
③网络图片资源:写入图片资源的网址;
4、列表标签
代码:
<!-- 有序列表 -->
<ol>
<li>大哥</li>
<li>二哥</li>
<li>三哥</li>
<li>四哥</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>大姐</li>
<li>二姐</li>
<li>三姐</li>
<li>四姐</li>
</ul>
运行结果:
5、链接标签
代码:
<!-- 超链接标签 -->
<a href="连接地址">连接文字</a>
运行结果:
说明:
地址可以是网络地址、相对文件路径、或者绝对文件路径;类似图片;
6、块标签(跟CSS结合)
代码:
<!-- 块标签 -->
<div>这是div</div>
<span>这是span</span>
备注:
div独占一行;span的文本信息在一行内展示;
7、语义化标签
代码:
<header>
<!-- 块标签 -->
<div>这是div</div>
<span>这是span</span>
</header>
<footer>
<!-- 块标签 -->
<div>这是div</div>
<span>这是span</span>
</footer>
备注:
语义化标签也是主要结合CSS使用,语义化标签是为了提高代码的可读性,提供的一些标签;
8、表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标签</title>
</head>
<body>
<!-- 表格根标签 -->
<!-- 一般表格的样式也是由CSS控制的 -->
<table border="1" width="50%">
<caption>表格的标题</caption>
<!-- 定义表格头的部分,方便CSS控制 -->
<thead>
<!-- 行标签 -->
<tr>
<!-- 列标签 -->
<th>1哥</th>
<th>2哥</th>
<th>3哥</th>
<th>4哥</th>
</tr>
</thead>
<!-- 定义表格体的部分,方便CSS控制 -->
<tbody>
<tr>
<!-- 合并单元格 -->
<td rowspan="2">1姐</td>
<td>2姐</td>
<td>3姐</td>
<td>4姐</td>
</tr>
<tr>
<!-- 合并单元格 -->
<td colspan="2">2姐</td>
<td>4姐</td>
</tr>
</tbody>
<!-- 定义表格脚的部分,方便CSS控制 -->
<tfoot>
<tr>
<td>1姐</td>
<td>2姐</td>
<td>3姐</td>
<td>4姐</td>
</tr>
</tfoot>
</table>
</body>
</html>
三、表单标签
1、概述
form:
用于定义表单,它的范围代表了采集用户数据的范围;
属性简介:
action:
指定提交数据的URL;
method:
指定提交方式:get、post(一共七种,常用两种);
get:
①请求参数会在地址栏中显示,会封装在请求行中,显示在浏览器地址栏;
②请求参数的长度有限制;
③不太安全;
post:
①请求参数不会在地址栏中显示,会封装在请求体中;
②请求参数的长度没有限制;
③较为安全;
注意:
表单项中的数据要想被提交就必须指定name属性;
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
用户名:<input name="username" /><br />
密码:<input name="password" /><br />
<input type="submit" name="login" id="login" value="登录" />
</form>
</body>
</html>
运行结果:
2、表单项input
可通过不同的type取值改变元素展示的样式;
text
文本输入框(默认);
password
密码输入框;
radio
单选框
注意:
①要想使多个单选框实现单选的效果,则必须设置相同的name值;
②一般会给每一个单选框一个value值,指定其被选中后提交的值;
③checked属性,用来指定默认值;
checkbox
复选框
注意:
①一般会给每一个单选框提供value属性,指定被选中后提交的值;
②checked属性,用来指定默认值;
file
文件选择框
hidden
隐藏域,用于提交一些信息;
按钮
submit提交按钮;
button普通按钮;
image图片按钮;
label
指定输入项的文字描述信息;
注意:
label的for属性一般会和input的id属性值对应,如果对应了,则点击label区域,会让input输入框获取焦点;
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
账号:<input name="username" /><br />
密码:<input name="password" /><br />
头像:<input type="file" name="file" /><br />
隐藏域:<input type="hidden" /><br />
职业(单选):<br />
学生<input type="radio" name="radio" value="学生"/>
教师<input type="radio" name="radio" value="教师"/>
校长<input type="radio" name="radio" value="校长"/><br />
爱好(多选):<br />
运动<input type="checkbox" name="radio" value="运动"/>
读书<input type="checkbox" name="radio" value="读书"/>
Java<input type="checkbox" name="radio" value="Java"/><br />
<input type="submit" name="login" id="login" value="提交" />
<input type="button" name="login" id="common" value="普通按钮" />
<input type="image" name="login" id="image" value="图片按钮" />
</form>
</body>
</html>
运行结果:
3、表单项select
下拉列表
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<select>
<option value ="0">--请选择--</option>
<option value ="1">北京</option>
<option value ="2">上海</option>
<option value ="3">杭州</option>
</select>
</body>
</html>
运行结果:
4、表单项textarea
文本域
cols指定列数,rows指定行数;
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本域</title>
</head>
<body>
<textarea cols="20" rows="20">
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
这是文本域啊!这是文本域啊!这是文本域啊!
</textarea>
</body>
</html>
运行结果:
标签:这是,标签,代码,E001Web,html,笔记,HTML,文本,属性 From: https://blog.51cto.com/u_13272819/6079186