本文介绍了Web前端开发中的HTML基础知识，包括Web概述、工作原理、URL介绍、HTML网页结构、标签使用等。重点讲解了HTML的基本结构、文本标签、换行、列表、图片、超链接、锚点、表格、表单、下拉列表、文本域和按钮等，并提供了相关标签的属性和用法示例。
文章目录
Web前端开发介绍
Web概述
Web起源
Web的特点
1.易导航和图形化界面
2.与平台无关
3.分布式结构
4.动态性
5.交互性
Web工作原理
URL介绍
URL统一资源定位器可以理解为网址。
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
例子：
http://www.westos.org/bbs/index.html
HTML网页结构
HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。
超文本指的是超链接
标记指的是标签
1).HTML文件用编辑器打开显示的是文本，可以用文 本的方式编辑.
2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页 链接跳转到另外一个网页。
HTML基本结构
HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
HTML文档规范与注释
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
5、html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释 的方法是：
<!-- 这是一段注释 -->
HTML标签
文本标签
换行标签
列表标签
div与span标签
图片标签img
<img> 标签定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。
属性：
- src: 图片名及url地址
- title：文字提示属性
- alt: 图片加载失败时的提示信息
- width/height： 图片宽度/高度
超链接标签
超级链接标签
<a href=" ">...</a>
属性：
- href: 必须，指的是链接跳转地址;
- target: 表示链接的打开方式。
_blank 新窗口 ,
_self 本窗口（默认） - title：文字提示属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<b style="color: #2b99ff; font-size: 30px">
今日头条
</b>
<br/>
<span style="font-size: 10px;color: #999999">
nwes
</span>
<hr>
<b style="font-size: 25px;">
<a href="#">
<font color="black">分栏一</font>
</a>
</b>
<ul style="color: #555555">
<li><a href="#"><font color="#778899">新闻一</font></a></li>
<li><a href="#"><font color="#778899">新闻二</font></a></li>
<li><a href="#"><font color="#778899">新闻三</font></a></li>
<li><a href="#"><font color="#778899">新闻四</font></a></li>
</ul>
<hr>
<b style="font-size: 25px">
<a href="#"><font color="black">分栏二</font></a>
</b>
<ul style="color: #555555">
<li><a href="#"><font color="#778899">新闻一</font></a></li>
<li><a href="#"><font color="#778899">新闻二</font></a></li>
<li><a href="#"><font color="#778899">新闻三</font></a></li>
<li><a href="#"><font color="#778899">新闻四</font></a></li>
</ul>
</body>
</html>
锚点链接
定义一个锚点
<a id="a1"></a> 百度一下 <a name="a1"></a>
使用锚点
<a href="#a1">跳到a1处</a>
表格标签
表格标签:table
- 行标签:tr
- 单元格(表示列的概念):td
- 表头:th :加粗并且居中
- 表格标题:caption
标签合并:
- 行合并:rowspan
- 列合并:colspan
标签常用属性:
- border:边框
- width:宽度
- height:高度
- algin:对齐方式
center,left,right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="500px" style="background-color: deeppink">
<tr align="center">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr align="left">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr align="right">
<td>3-1</td>
<td>3-2</td>
<td>3-2</td>
</tr>
</table>
<table border="1px" bordercolor="blue" width="50%" style="text-align: center">
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
</tr>
<tr>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
</tr>
<tr>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
<td>DD</td>
</tr>
</table>
</body>
</html>
form表单标签
常用属性：
- action属性:提交的目标地址(URL)
- method属性:提交方式:get(默认)和post
get方式:
- URL地址栏可见
- 长度受限制
- 相对不安全.
post方式:
- URL地址不可见
- 长度不受限制
- 相对安全.
表单项标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" background="./img/mailphoto.jpg" width="535px" height="300px">
<tr style="height: 300px">
<td>
<form action="#" method="get">
<table align="right">
<tr>
<td align="right" height="40px">用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td align="right" height="40px">密码</td>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<td align="right" height="40px"><input type="submit" value="登陆"></td>
<td align="center"><input type="reset" value="重置"></td>
</tr>
<tr>
<td><a href="#">找回密码</a></td>
<td align="center"><a href="#">注册</a></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
下拉列表标签
创建下拉列表
<select>...</select>
常用属性：
- name属性:定义名称,用于存储下拉值的
- size：定义菜单中可见项目的数目，html5不支持
- disabled 当该属性为 true 时，会禁用该菜单。
- multiple 多选
下拉选择项标签,用于嵌入到标签中使用的
<option>... </option>
- value属性:下拉项的值
- selected属性:默认下拉指定项.
文本域标签
多行的文本输入区域
<textarea>...</textarea>
常用属性：
- name :定义名称,用于存储文本区域中的值。
- cols ：规定文本区内可见的列数。
- rows ：规定文本区内可见的行数。
- disabled： 是否禁用
- readonly： 只读
按钮标签
标签定义按钮
<button>...</button>
元素可将表单内的相关元素分组
<fieldset>...</fieldset>
html内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架)
- src属性来定义另一个html文件的引用地址
- frameborder属性定义边框
- scrolling属性定义是否有滚动条
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
内嵌框架与a标签配合使用
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中,代码如下
案例代码
<body>
请选择你的出生地：
<select name="biradd">
<option value="">---请选择---</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
</select><br>
*********留言板**********<br>
<form aution"发送地址"="" method="post">
<textarea cols="30" rows="10">请在这里输入...</textarea><br>
<input type="submit" value="提交">
<input type="reset" value="重置"><br>
</form><br>
********请选择你要上传的文件*******<br>
<input type="file" name="myfile">
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
