.html
了解一些简单的前端操作，这样我们可以做一点简单的网站。
创建
初始界面
.html是自带基本框架的
操作
文本标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<h2>二级</h2>
<p>你要加入的一段文字</p>
<h2>【#中国队获乒乓球男团金牌#马龙说夺冠的感觉就那样】</h2>
<p>当地时间8月6日晚，在东京奥运会乒乓球男团决赛中，由马龙、樊振东和许昕组成的中国队以3：0战胜德国队，获得冠军。赛后，马龙表示，夺冠的感觉“也就那样”。
</p>
</body>
</html>
插入图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<h2>二级</h2>
<p>你要加入的一段文字</p>
<h2>【#中国队获乒乓球男团金牌#马龙说夺冠的感觉就那样】</h2>
<p>当地时间8月6日晚，在东京奥运会乒乓球男团决赛中，由马龙、樊振东和许昕组成的中国队以3：0战胜德国队，获得冠军。赛后，马龙表示，夺冠的感觉“也就那样”。
</p>
<img src="../img/马龙.jpeg">
</body>
</html>
列表
ul 无序列表
ol 有序列表
注意：需要加点或标号的行前加li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<ul>
<li>北京</li>
<li>深圳</li>
<li>上海</li>
<li>广州</li>
</ul>
<!--有序列表-->
<ol>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ol>
</body>
</html>
颜色、下划线、斜体和粗体
在尖括号里面空格+style回车+color回车+想要的颜色调整颜色；
在文字外部加尖括号包裹的u后自动出现后半部分，下划线;
在文字外部加尖括号包裹的i后自动出现后半部分，斜体;
选中需要的部分+Ctrl+B，自动呈现加粗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<h1 style="color: #0000FF;"><strong><u><i>蓝色、加粗、下划线、斜体的一级标题</i></u></strong></h1>
<p style="color: #FF0000;" >红色的段落</p>
</body>
</html>
div
div 将区域划分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<div align="center"> <!-- 调整到中间-->
<!-- div块，不能以其他元素共享一行 -->
<div style="color: red;width: 1000px;"><!-- 调整颜色、区域大小 -->
京东是中国的综合网络零售商，是中国电子商务领域受消费者欢迎和具有影响力的电子商务网站之一，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等12大类数万个品牌百万种优质商品。京东在2012年的中国自营B2C市场占据49%的份额，凭借全供应链继续扩大在中国电子商务市场的优势。京东已经建立华北、华东、华南、西南、华中、东北六大物流中心，同时在全国超过360座城市建立核心城市配送站。2012年8月14日，京东与苏宁开打"史上最惨烈价格战" 。2013年3月30日19点整正式切换了域名，并且更换新的logo [1] 。
</div>
<div style="color: blue;width: 1000px;">
互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155
Copyright © 2004 - 2019 京东JD.com 版权所有|消费者维权热线：4006067733经营证照|(京)网械平台备字(2018)第00003号|营业执照
</div>
</div>
</body>
</html>
span
span 设置行
与div相似，但是不能独占一行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<span><strong>北半球</strong><u>中国</u><i>北部</i></span>
</body>
</html>
块级元素和行内元素
块级元素：单独成为一行。h、ul、ol、div
行内元素：不能独占一行。img、a、span、input
换行和水平线
br/ 换行
hr/ 水平线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<h2>啦啦啦啦啦啦啦</h2>
<br />
<h2>啦啦啦啦啦啦啦</h2>
<hr />
</body>
</html>
空格折叠现象
普通的空格在html里面如果连续出现多个会被当成一个空格，如果想显示多个连续的空格就需要使用特殊的符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
谁 知 盘 中 餐<br/>
粒 粒 皆 辛 苦<br/>
</body>
</html>
表格
th table head 加粗+居中
tr table row 行
td table data 单元格 列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<!--border：边框 cellspacing：单元格间隙-->
<table border="1" cellspacing="0" width="400px">
<tr>
<th>姓名</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>202101</td>
</tr>
<tr>
<td>李四</td>
<td>202102</td>
</tr>
<tr>
<td>王五</td>
<td>202103</td>
</tr>
</table>
</body>
</html>
跨行跨列操作
跨2列：td rowspan=“2”
跨2行：td colspan=“2”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1"; cellspacing="0";width="350px">
<tr>
<th>讲师姓名</th>
<th>科目</th>
</tr>
<tr>
<td colspan="2">wang</td>
</tr>
<tr>
<td rowspan="2">zhang</td>
<td>Chinese</td>
</tr>
<tr>
<!-- <td>wang</td> -->
<td>Math</td>
</tr>
<tr>
<td>li</td>
<td>English</td>
</tr>
</table>
</body>
</html>
输入
输入单行文本：input type=“text” /
输入密码（输入的文本呈现********）：input type=“password” /
单选：input type = “radio” name = “XXX”
下拉选项：option
多选：input type=“checkbox” /
输入多行文本：textarea
提交按钮会（信息汇入自己设置的网站）：input type=“submit” value=“提交”/
重置按钮：input type=“reset” value=“重置”/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HELLO Html</title>
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select>
<option>---请选择---</option>
<option>青岛</option>
<option>济南</option>
<option>烟台</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<input type="checkbox" />音乐<br />
<input type="checkbox" />看书<br />
<input type="checkbox" />爬山<br />
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea> </textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" />同意该协议
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交"/>
</td>
<td>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
