HTML
一.HTML结构
1.HTML文件结构
- !DOCTYPE html
- html根标签
- head头标签
- meta: 标签可提供有关页面的元信息
- title:标题
- body体标签,网页内容都在里面
<!--
html项目结构
-->
<!DOCTYPE html> <!-- 声明html的版本 告诉浏览器html版本 去进行解析-->
<html> <!-- 根标签 所有内容都必须写在根标签中,方便解析查询-->
<head> <!-- 头标签 写一些对网页的设置-->
<meta charset="utf-8" /> <!-- 标签可提供有关页面的元信息(meta-information)
指定网页编码 还可以写一些关键字,作者名称..供搜索引擎搜索-->
<meta name=“keywords” content=“手机,家电">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content=“jim">
<link rel="icon" href="ico地址"> <!-- 给标题处添加图标 rel必须写不然网页显示不出来-->
<title></title> <!-- 标题-->
</head>
<body> <!-- 网页体 网页内容都写在body中-->
</body>
</html>
2.标签结构
- 标签
HTML中的标记指的就是标签。
HTML使用标记标签来描述网页。
结构:
<标签名>标签内容</标签名> 闭合标签(有标签内容)
<标签名/> 自闭合标签 (无标签内容)
-
标签属性:标签可以拥有属性。属性进一步说明了该标签的显示或使用 ,属性对标签的显示进行各种设置
特性。如:
1.属性的格式 :属性名 = “属性值“
-
属性的位置: 开始标签中 <标签名 属性名 = “属性值“ >xxx</标签名>
-
添加多个属性: <标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>
-
二.常用标签
1.标签
标题标签
—
六级标签
段落标签
换行标签
列表 无序列表 有序列表
超链接 超链接有一个重要且我以前不知道的属性 精确定位看以下第二段代码
图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 标题标签 块级标签 占一行 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!-- 段落标签 段落与段落之间由距离 -->
<p>2. 四指继续按主屏幕,向上滑动就会显示后台启动的程序
(其实连按两下home键或者单只从屏幕下方往上拖效果也是一样的);
</p>
<p>2. 四指继续按主屏幕,向上滑动就会显示后台启动的程序
(其实连按两下home键或者单只从屏幕下方往上拖效果也是一样的);
</p>
<!-- 换行标签-->
拉<br>啦
<!-- 列表-->
<!-- 1.有序列表 -->
<ol type="I"> <!-- type 显示风格-->
<li>知识预习</li>
<li>知识学习</li>
<li>知识回顾</li>
<li>知识在回顾</li>
</ol>
<!-- 2.无序列表 -->
<ul type="square"> <!-- type 显示风格-->
<li>知识预习</li>
<li>知识学习</li>
<li>知识回顾</li>
<li>知识在回顾</li>
</ul>
<!-- 超链接-->
<a href="https://www.zhihu.com/" target="_blank">知乎内容</a>
<!-- href 资源位置 target 打开文件的方式 如_blank 在当前窗口打开-->
<!-- 图片标签 -->
<img src="img/hao123.png" alt="hao123,上网从这里开始">
<!-- src 图片存放的地址 alt 图片不能显示显示的内容-->
</body>
</html>
超链接定位标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a>
<a href="#one">产品一</a>
<a href="#two">产品二</a>
<a href="#three">产品三</a>
<a href="#four">产品四</a>
<a href="#five">产品五</a>
<h3><a name="one">产品一</a></h3>
<img src="img/1.png" alt="">
<h3><a name="two">产品二</a></h3>
<img src="img/2.png" alt="">
<h3><a name="three">产品三</a></h3>
<img src="img/3.png" alt="">
<h3><a name="four">产品四 </a></h3>
<img src="img/4.png" alt="">
<h3><a name="four">产品五</a></h3>
<img src="img/5.png" alt="">
<a href="#top" style="position: fixed; right: 20px; bottom: 20px;" > 返回顶部</a>
</body>
</html>
2.表格
表格的基本构成标签
table标签:表格标签
tr标签:表格中的行
th标签:表格的表头
td标签:表格单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="50%" border="1" cellpadding="0"
cellspacing="0" align="center" background="img/1.png" bgcolor="aquamarine" height="600">
<tr>
<th> 学号</th> <th>班级</th> <th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>
表格属性和表格结构
3.表单
form标签:表单
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终 提交表单,把客户端数据提交至服务器.
(1) 单行文本框
(2)密码框
(3)单选按钮
(4)复选框
注:
(5)文件选择框
(6)下拉框
(7)多行文本输入框
(8)按钮
三种按钮
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
input 输入框
type="text" 文本框
属性:
id="" 值唯一 ,值自定义值 唯一标记是网页用来区分它的
name="" 值自定义 向服务器
value="" 输入的内容最终向服务器提交
pleaceholder="请输入用户名" 提示信息不属于值
readonly="readonly" 只读不能输入 如果里面有值可以向服务器发送
disabled="disabled" 禁用 不能向服务器发送
type="password" 密码框
type="radio" 单选框 name相同为一组,互斥只能选中一个,选中的组件必须给value因为如果不定义
value值这个组件没办法像服务器发值
-->
<form action="" method="get">
<label for="textid">用户名:</label>
<input type="text" id="text1id" name="text1" placeholder="请输入内容" ><br>
<label for="pwdid">密码:</label>
<input type="password" name="pwd1" id="pwdid" placeholder="请输入密码"><br>
性别:<input type="radio" name="radio1" id="radio1id" value="男" />男
<input type="radio" name="radio1" id="radio2id" value="女" / checked="checked">女<br>
<!-- 复选框 -->
请选择学习内容:<input type="checkbox" name="checkbox1" value="java" checked="checked">java
<input type="checkbox" name="checkbox1" value="html">html
<input type="checkbox" name="checkbox1" value="css">css
<input type="checkbox" name="checkbox1" value="xml">xml<br>
<!-- 下拉框 -->
请选择城市:<select name="sekect1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="西安" selected="selected">西安</option>
</select><br>
附件:<input type="file" accept=".jpg.png"> <br>
备注:<textarea rows="30" cols="50" name="textarea1">
</textarea>
<input type="submit" id="submit1" name="" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" onclick="alert()">
</form>
</body>
</html>
结果
三.内联样式
内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的 页面