HTML基础
一、标签
1、单标签
<meta charset = "utf-8">
<input />
2、双标签
<html> </html>
<body> </body> //头部为文档控制信息
<title> </title>
<head> <head>
<h1> <h1>
<p> <p>
3、结构
<html>
<head>
<title>标题</title>
<meta charset ="utf-8">
</head>
<body>
<h1> 一级标题 </h1>
<p>段落</p>
</body>
</html>
4、水平线标签
<hr />
5、换行标签
<br />
6、文字字体和大小设置
| span字体设置 |
//行内元素
<span style ="color:red; font-size:30px; background-color:yellow"> 字体设置 </span>
| Div字体设置 |
//块元素
<div style ="color:red; background-color:yellow">Div字体设置</div>
7、超链接标签
百度首页
one网页
<a href="www.baidu.com " target="_blank"> 百度首页 </a>
<!-- href后面为绝对路径 target的作用为在新的标签中打开 -->
<a href="./one.html" target="_blank">one网页</a>
<!-- href后面为相对路径为本地的文件路径 target作用在新窗口打开 -->
8、图片标签
图片来源于网络，如果侵权请联系及时删除
<img src="E:\壁纸\324321.jpg" style="zoom: 25%;" ></img>
<!-- style="zoom:25%;"表示缩放比例为25%-->
9、HTML字体实体
10、HTML表格
<table></table> <!-- 定义表格-->
<tr></tr> <!--定义行-->
<td></td><!--定义列-->
rowspan="2" <!--跨两行-->
实例：
<html>
<head>
<meta charset="utf-8">
<h1>Grade Table<h1>
</head>
<body>
<table border="1"> <!-- 设置表格边框宽度 border值任意，如果不写是看不见的 -->
<tr>
<td rowspan="2">MONKEY</td> <!--为两行大小-->
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>110</td>
</tr>
</table>
</body>
</html>
二、HTML表单
1、表单介绍
<form></form>
<!-- action 数据提交到服务器的URL，如果为空提交当前页面，可以是相对路径也可以是绝对路径
method 提交方法
get
url 中有显示
URL 长度有限制
post
上传文件
file文件域可以上传文件
hidden 隐藏内容
enctype
application/x-www-form-urlencoded 默认值
multipart/form-data 上传文件时的值
-->
2、实例介绍（包含文本框、单选按钮、单选框、下拉菜单、文本域、文件上传、隐藏项）
<html>
<head>
<title> 表单</title>
<meta charset="utf-8">
</head>
<body>
<h1>用户注册页面<h1>
<form action="#" method="post" enctype="multipart/form-data">
用户名：<input name="user" type="text" /> <br/>
<!-- text 明文模式 -->
密码：<input name ="password" type = "password" /> <br/>
确认密码：<input name ="passwordSure" type = "password" /> <br/>
<!-- password 密码模式 -->
性别：<input name = "sex" value = "1" type = "radio" > 男
<!-- radio 单选按钮-->
<input name = "sex" value = "0" type = "radio">女 <br/>
<!-- value为传送的服务器的变量值 sex = 1/0 -->
<!-- 爱好 -->
<!-- checkbox选项框，可以多选 -->
爱好：<input name = "hobby1" value = "eat" type = "checkbox"> 吃饭
<input name = "hobby2" value = "sleep" type = "checkbox"> 睡觉
<input name = "hobby3" value = "Game" type = "checkbox"> 游戏 <br/>
出生年月日：
<!--Year--> <!--设置下拉菜单-->
<select name = "year" >
<option value = "0" selected = "selected">选择年份
<option value = "1" >2020</option>
<option value = "2" >2021</option>
</select>
<!--Month-->
<select name = "month" >
<option value = "0" selected = "selected">选择月份
<option value = "1" >1</option>
<option value = "2" >2</option>
</select>
<!--Days-->
<input type = "text" name="day" size ="2" > 日<br/>
文件上传：
<input type ="file" /><br/>
附件内容：
<!-- 文本域 -->
<textarea name="other" > </textarea> <br/>
<!-- 隐藏项 -->
<input name="token" type ="hidden" value="jsdlkfjl"><br/>
<!--重置与提交-->
<input type="reset">
<input type="submit" name = "submit" value = "提交" >
</form>
</body>
</html>
三、HTML CSS
1、CSS介绍
①、元素内容的颜色 color
②、元素内容的背景色 background-color
③、字体大小 font-size
2、CSS与HTML结合的方式
1）内联样式
| 内联样式字体 |
<span style = "color:red ; background-color:yellow; font-size:20px;">内联样式字体</span>
2）内部样式
在 《stytle》里面不能写注释
<html>
<head>
<meta charset="UTF-8">
<!-- 设置内部字体样式 -->
<style type = "text/css">
.cla {
color:black;
background-color:red;
font-size:40px;
}
#good {
color:red;
background-color:green;
font-size:40px;
}
span {
background-color:pink;
font-size:30px;
}
</style>
</head>
<body>
<span> 事实胜于<span id="good">雄辩</span>，实战<span class="cla">战胜</span>一切。</span>
<span>没有实战，就没有<span class="cla">能力</span>！</span><br/>
<h1 class="cla">Hellow</h1>
<!-- 类标签 class -->
</body>
</html>
3）外部样式
在单独的CSS文件里
.cla {
color:black;
background-color:red;
font-size:40px;
}
#good {
color:red;
background-color:green;
font-size:40px;
}
span {
background-color:pink;
font-size:30px;
}
HTML的具体
<html>
<head>
<meta charset="utf-8">
<title>CssTest</title>
<link rel="stylesheet" type = "text/css" href = "./css.css"> <!---href 为Css文件的位置，要带扩展名-->
</head>
<body>
<span> 事实胜于<span id="good">雄辩</span>，实战<span class="cla">战胜</span>一切。</span>
<span>没有实战，就没有<span class="cla">能力</span>！</span><br/>
<h1 class="cla">Hellow</h1>
</body>
</html>
四、HTML的嵌套iframe
1、iframe参数介绍
| 属性 | 作用 | 举例 | 含义 |
|---|---|---|---|
| src | 在iframe中显示的文档或网站的URL | src=“http://www.baidu.com” | 引用的URL为“www.baidu.com” |
| height | iframe的高度 | height=“300” | iframe高度为236px |
| width | iframe宽度 | width=“400” | iframe宽度为400px |
| frameborder | 是否显示框架的边框 | frameborder=“1” | 显示边框 |
| frameborder=“0” | 不显示边框 | ||
| name | 框架标识名 | name=“mainFrame” | 框架标识名 |
| scrolling | 是否显示滚动条 | scrolling = “no” | 不显示滚动条 |
| scrolling =“yes” | 显示滚动条 | ||
| scrolling=“auto” | 根据内容确定是否显示滚动条 |
2、单个嵌套
//嵌入百度
<html>
<head>
<title> TestIframe </title>
<meta charset = "utf-8" >
</head>
<body>
<iframe src = "http://www.baidu.com" width="100%" height="100%">
</iframe>
</body>
</html>
//嵌入本地页面
<html>
<head>
<title> TestIframe </title>
<meta charset = "utf-8" >
</head>
<body>
<iframe src = "./insideCss.html" width="100%" height="100%">
</iframe>
</body>
</html>
3、做页面导航
<html>
<head>
<title> TestIframe </title>
<meta charset = "utf-8" >
</head>
<body>
<a href = "http://www.baidu.com" target ="MyFrame">baidu</a>
<a href = "http://www.qq.com" target ="MyFrame">QQ</a>
<a href = "http://www.sohu.com" target ="MyFrame">搜狐</a>
<iframe name= "MyFrame" width="100%" height="100%">
</iframe>
</body>
</html>
扫一扫
2557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
