HTML&CSS
2020-06-21 本文已影响0人
仙王王令
自学网站推荐------菜鸟教程
<!DOCTYPE html> <!--约束，声明-->
<html lang="zh-CN"> <!--html表示html的开始 lang='zh_CN' html标签中一般分为两部分，分别是：head和body-->
<head><!--表示头部信息-->
<meta charset="UTF-8"><!--当前页面使用UTF-8字符集-->
<title>title</title>
</head>
<!--bgcolor="green" 背景颜色属性-->
<body><!--整个html标签现实的主题内容-->
hello
</body>
</html>
注：Java 文件是需要先编译，再由 java 虚拟机跑起来。但 HTML 文件它不需要编译，直接由浏览器进行解析执行。
1.标签的格式:
- <标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
- 基本属性：bgcolor="red" 可以修改简单的样式效果
- 事件属性： onclick="alert('你好！');" 可以直接设置事件响应后的代码。
4.标签又分为，单标签和双标签。
- 单标签格式： <标签名 /> br 换行 hr 水平线
-
双标签格式: <标签名> ...封装的数据...</标签名>
image
font字体标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<!--字体标签
font 字体标签，它可以用来修改文本的字体、颜色、大小
color 颜色
face 字体
size 大小、尺寸
-->
<font color="red" face="宋体" size="7">演示文字</font>
</body>
</html>
特殊字符--HTML特殊字符编码对照表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<!--特殊字符
-->
我是<br>标签<br>
空 格
</body>
</html>
image
标题标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<!--标题标签
h1-h6 大-小
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
超链接
- 在网页中所有点击之后可以跳转的内容都是超连接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<!--超链接
href: 连链接地址
target: _self 当前页面
_blank 打开新窗口
-->
<a href="https://www.jianshu.com/u/9e9768210f1c">我的主页</a><br>
<a href="https://www.jianshu.com/u/9e9768210f1c" target="_self">我的主页</a><br>
<a href="https://www.jianshu.com/u/9e9768210f1c" target="_blank">我的主页</a><br>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 无序列表 -->
<ul type="square">
<li>赵三</li>
<li>赵四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>赵三</li>
<li>赵四</li>
<li>王五</li>
<li>赵六</li>
</ol>
</body>
</html>
img标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
src属性设置图片路径
width
height
border
alt属性设置代替文本
-->
<img src="./image/1.png" alt="图片不存在" width="200" height="200" border="1">
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
table 标签是表格标签
border 边框
...
align 设置对其
tr 是行标签
th 是表头标签
td 是单元格标签
cellspacing 设置单元格间距
-->
<!--
colspan设置跨列
rowspan设置跨列
-->
<table width="300" height="300" border="1" align="center" cellspacing="0">
<tr>
<th colspan="2">标题一</td>
<th>标题二</td>
</tr>
<tr>
<td rowspan="2">单元格1</td>
<td align="center">单元格2</td>
<td align="center">单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
</tr>
</table>
</body>
</html>
iframe
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
iframe标签可以在页面上开辟一个小区域显示一个单独的页面
iframe和a标签组合使用的步骤
1、在iframe标签中使用name属性定义名称
2、在a标签的target属性上设置iframe的name的属性值
-->
<iframe src="https://www.baidu.com/" name="abc" frameborder="0" width="500" height="300"></iframe>
<ul>
<li><a href="https://taobao.com/" target="abc">淘宝</a></li>
<li><a href="https://www.baidu.com/" target="abc">百度</a></li>
<li><a href="https://www.jd.com/" target="abc">京东</a></li>
</ul>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
action属性设置提交的服务器地址
method属性设置提交的方法GET（默认值）或POST
-->
<form action="https://www.baidu.com" method="GET">
<h1 align="center">表单注册</h1>
<input type="hidden" name="action" value="login">
<table align="center">
<tr>
<td>用户名称: *</td>
<td><input type="text" name="uname" id="uname"></td>
</tr>
<tr>
<td>用户密码: *</td>
<td><input type="password" name="upwd" id="upwd"></td>
</tr>
<tr>
<td>确认密码: *</td>
<td><input type="password" name="repwd" id="repwd"></td>
</tr>
<tr>
<td>选择性别:</td>
<td><input type="radio" name="gender">男 <input type="radio" name="gender">女</td>
</tr>
<tr>
<td>选择爱好:</td>
<td>
<input type="checkbox" name="hobby" value="C"> C
<input type="checkbox" name="hobby" value="C++"> C++
<input type="checkbox" name="hobby" value="Java"> Java
<input type="checkbox" name="hobby" value="PHP"> PHP
</td>
</tr>
<tr>
<td>选择国家:</td>
<td>
<select name="country" id="">
<option value="" selected disabled>--请选择国家--</option>
<option value="">中国</option>
<option value="">美国</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="注册"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
type="hidden" 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域 提交的时候同时发送给服务器
image
div、span、p标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
div标签默认独占一行
span标签 长度等于封装数据的长度
p段落标签 默认会在段落的上方和下方各空出一行（如果已有就不在空）
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p标签1</p>
<p>p标签2</p>
</body>
</html>
image
CSS
image
三种结合方式
- 在标签的 style 属性上设置”key:value value;”，修改标签样式。
- 在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
- 把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
略！
