1.web 工作原理:
在浏览器地址栏输入URL,浏览器往服务端发送消息,服务端接收消息,服务端返回消息(从文件中读取)
浏览器接收到服务端的消息,按照一个约定好的规则展示出来.
2.HTML:是一种标志语言
1.就是一些特殊符号,不同的符号有不同的显示效果
2.学前端就是学习怎么写HTML文件,学后端框架就是学习怎么返回写好的HTML文件
3.HMTL规则
1.HTML中把连续的空格和换行都解析成一个空格,不存在缩进的问题
2.基本标签:
h1~h6 加黑加粗
b加粗,i斜体,u加下划线,s删除,br 换行,hr水平线,p段落标签
3.块级标签和行内标签
div和span标签的特点:
没有自带的样式,方便后续使用CSS调整样式
块级标签:
自己独占一行: p,h1,hr,div
行内标签(内联标签)
默认都在一行显示:b,i,u,s,span
4.标签支持嵌套
1.块级标签可以包含内联标签
2.p标签不能忍包含p标签和div标签
5.标签分类:
1.展示给用户看的标签
2.获取用户输入 的标签
form标签(表示单标签)
4.获取用户输入的标签:
1.input
1.根据type类型划分
1.text
2.password
3.email
4.date
5.radio 单选
6.checkbox 多选
7.button 普通按钮,多用于使用JS代码绑定事件
8.submit 提交
9.reset 重置
10.file 上传文件
2.select
1.select 标签内部包含非是option,需要配置value属性
默认选中:selected="selected"
2.多选
multiple
3.textarea
注意事项:
1.所有放在form标签中获取用户输入的标签,必须要有name属性
2.form标签有action属性和method属性
1.action:控制往哪里提交数据
2.method:控制用什么方式提交
3.上传文件需要额外配置enctype="multipart/form-data"
3.form要提交数据必须要有submit按钮
5.list-style-type
list-style-type:none； 去除列表前的点 disc 为实心园 circle 为空心园 square 为正方形 decimal 为1.2.3.4... upper-alpha 为a.b.c.d.... upper-roman 为I.II.III.... lower-roman 为i.ii.ii.iv... none 为不显示任何符号
HTML文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>大中华帝国</title>
</head>
<body>
大中华帝国世界第一 强国
<b>极目冷眼笑苍云，寂寞一生傲天穹。</b>
<br>
<i>风雨亭中避风雨，苍泊市街苍泊人，落拓莫问落拓事，一片飘萍一片心。</i>
<br>
<u>天理无私，定纷止争，赏存慎法，罚加奸令。</u>
<br>
<s>天下无道，灾生四端，苍龙飞升，六祸禁绝。</s>
<br>
<p>服心不用七擒策， 御侮何劳三箭歌，高枕幽窗无一事， 西人不敢牧长河。</p>
<b>©江天一色无纤尘，鱼龙潜跃观道身；天人焉有两般义？道不虚行只在人。®</b>
<br>
<h1>笑看嫣红染半山（枫），逐风万里白云间（岫），逍遥此身不为客（主），天地三才任平凡（人）。</h1>
<h6>杀诫半斜影， 剑风不留人。</h6>
<h3>不问顶峰又为何><俯瞰天穹不是高。</h3>
<!--div与span-->
<div>裳璎珞 愿与年华凋敝罄，尘愆不染佛前灯</div>
<span>玄歌浪蹈，幻中道真，太游方外睨红尘。</span>
<!--块级标签包含内联标签-->
<p><b><i>从不入锋云，到昂首不悔锋云。</i></b></p>
<img src="D:123456.jpg" alt="美图看看">
<br>
<!--在当前页面跳转-->
<a href="http://pic.sogou.com/pics?">霹雳布袋戏</a>
<!--target,跳转到一个新的页面-->
<a href="http://www.jd.com"target="_blank">京东</a>
<a href="#p1">点我</a>
<div style="height:100px"></div>
<p id ="p1"><b>壮志凌云伐长空，漂泊天涯问侠踪。今，一夜千里；明，笑看苍穹</b></p>
<div style="height:100px"></div>
<!--无序列表-->
<ul type="square">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<!--有序的列表-->
<ol type="I" start = "10">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!--标题列表-->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>黎明</td>
<td>唱歌</td>
</tr>
<tr>
<td>2</td>
<td>黎</td>
<td>唱</td>
</tr>
<tr>
<td>3</td>
<td>明</td>
<td>歌</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--form里的action控制提交的地方-->
<form action="http://127.0.0.1:8088" method="post">
<p>用户名:
<input type="text" name="username">
</p>
<p>密码:
<input type="password" name="pwd">
</p>
<p>出生日期:
<input type="date" name="birthday">
<p>邮箱:
<input type="mail" name="email">
</p>
</p>
<p>性别:
<input type="radio" name="gender" value="male" checked="checked" >男
<input type="radio" name="gender" value="female" >女
</p>
<p>
爱好:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="volleyball">排球
</p>
<select name="city1" id="">
<option value="010">广西</option>
<option value="021">广东</option>
<option value="020">湖南</option>
<option value="0755" selected="selected">湖北</option>
</select>
<!--多选下拉框-->
<select name="city2" id="" multiple="multiple">
<option value="001">广西</option>
<option value="002">广东</option>
<option value="003">湖南</option>
<option value="004" selected="selected">湖北</option>
</select>
<p>
<b>个人简介:</b>
<textarea name="" cols="50" rows="5"></textarea>
</p>
<!--普通按钮多用于JS代码绑定事件-->
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--form里的action控制提交的地方-->
<form action="http://127.0.0.1:8088" method="post">
<p>用户名:
<input type="text" name="username">
</p>
<p>密码:
<input type="password" name="pwd">
</p>
<p>出生日期:
<input type="date" name="birthday">
<p>邮箱:
<input type="mail" name="email">
</p>
</p>
<p>性别:
<input type="radio" name="gender" value="male" checked="checked" >男
<input type="radio" name="gender" value="female" >女
</p>
<p>
爱好:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="volleyball">排球
</p>
<select name="city1" id="">
<option value="010">广西</option>
<option value="021">广东</option>
<option value="020">湖南</option>
<option value="0755" selected="selected">湖北</option>
</select>
<!--多选下拉框-->
<select name="city2" id="" multiple="multiple">
<option value="001">广西</option>
<option value="002">广东</option>
<option value="003">湖南</option>
<option value="004" selected="selected">湖北</option>
</select>
<p>
<b>个人简介:</b>
<textarea name="" cols="50" rows="5"></textarea>
</p>
<!--普通按钮多用于JS代码绑定事件-->
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>