前端之HTML
1. 前端概述
1.1 前端
前端和后端，站在代码执行位置的角度来区分的话，服务端所执行的代码被称为后端代码，也就是这部分代码是在服务器上运行的。
而我们所看到的网页内容，是我们的浏览器获取到服务器处理后发来的结果（代码）之后，在本地进行渲染后所呈现的效果。
也就是说，这部分代码是在客户端本地执行的，那么这些在客户端本地执行的代码就叫前端代码。
总的来说，前端就是在客户端执行的代码，而后端，就是在服务端执行的代码。
1.2 HTML
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言。
这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页。
html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
2. HTML的基本标签
<!DOCTYPE> <!--告诉浏览器，以下的html文本按照标准模式(W3C标准)渲染-->
<!--html标签不区分大小写-->
<!--html标签分为闭合标签和自闭合标签-->
<!--html标签的属性通常是以键值对的形式出现，且只能出现先开始标签中-->
<!--如果属性值和属性名完全一样，直接写属性名即可-->
<!--标签存在的意义是为了方便让css、js对指定内容进行操作-->
<html lang="en">
<head>
<!-- html页面的标题，head标签中的内容除了title，其他用户都看不见 -->
<title>Pray の 小破站</title>
<!-- 设置字符编码，下面两者等价，选一种即可 -->
<meta charset="UTF-8"> <!-- 这里其实是下面写法的简写 -->
<meta http-equiv="content-type" charset="UTF-8">
<!-- 设置搜索引擎搜索关键字和网站描述 -->
<meta name="keywords" content="生活,日常,分享,扯淡">
<meta name="description" content="人生天地之间，如白驹之过隙">
<!-- 自动刷新 -->
<!-- <meta http-equiv="refresh" content="5;URL=http://cnblogs.com/hgzero">-->
<!-- 显示页面的图标，浏览器上方显示的图标 -->
<link rel="icon" href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/my_head_phote.png">
</head>
<body>
<div id="first">这里是顶部，这里设了一个a标签的锚点</div>
<h1>1. 最基本的几个标签</h1>
<!-- h1到h5的字体大小依次递减 -->
<h2>1.1 几个特殊图标和符号</h2>
<p>这里的nbsp代表一个空格 </p>
<p>这里的>和<分别表示大于和小于</p>
<p>这里的br标签是<br>换行标签</p>
<h2>1.2 几个字体格式</h2>
<strong>这是加粗标签，行内元素，表示非常重要的内容</strong>
<hr> <!--这里的hr标签是用来打印一条横线的-->
<b>加粗，行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名</b>
<strike>这个标签是在文本上加删除线</strike>
<em>斜体标签，行内元素，表示语气中的强调词</em>
<h2>1.3 块级标签和内联标签，所有的标签都分为块级标签和内联标签</h2>
<span>这是一个内联标签，</span>
<span>span标签只占它所包含的内容的范围，</span>
<span>这里定义了三个span标签，它们显示在同一行了。</span>
<div>div是一个块级标签</div>
<div>每个div独占一行</div>
<div><a href="http://hgzerowzh.com">Pray の 小破站</a></div>
<h3>块级标签</h3>
<div>h1到h5的h系标签，h系列标签的自身特性是加大加粗</div>
<div>div标签是块级标签，div的特性就是一个白板</div>
<div>p标签，p标签的特性是段落和段落之间有间隙</div>
<h3>行内标签</h3>
<div>span标签，它的特性就是一个白板</div>
<h2>1.4 图片和超链接标签</h2>
<a href="http://hgzerowzh.com" target="_blank">
<img src="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/null-b836ed.jpg"
alt="图片显示失败后显示这里的内容" title="鼠标悬浮此图片上就显示这里的内容" width="150px" height="160px">
</a>
<div></div>
<!--这里的target="_blank"表示点击a标签后会新开一个窗口进行a标签的跳转-->
<!--a标签是行内标签-->
<a href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/wechat_code_money.png"
target="_blank">打赏一下</a>
<!-- 通过a标签跳转到指定的锚点-->
<a href="#top">回到首部</a>
</body>
</html>3. 列表和table表格
<!DOCTYPE>
<html lang="en">
<head>
<title>Pray の 小破站</title>
<meta charset="UTF-8">
</head>
<body>
<h1>1. 列表和表格</h1>
<h2>列表</h2>
<h3>有序列表</h3> <!--有序列表，开头以数字序号表示-->
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<h3>无序列表</h3> <!--无序列表，开头以点号表示-->
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h3>自定义列表</h3> <!--自定义列表-->
<dl>
<dt>第一章</dt>
<dd>第一节</dd>
<dd>第二节</dd>
<dt>第二章</dt>
<dd>第一节</dd>
<dd>第二节</dd>
</dl>
<h2>table表格</h2>
<table border="1px" cellpadding="5x" cellspacing="2px">
<!--border表示表格的边框的厚度占用1px-->
<!--cellpadding表示内边距，cellspacing表示外边距-->
<thead>
<tr>
<th rowspan="2">111</th> <!--rowspan表示单元格竖跨多少行-->
<th>222</th>
<th>333</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td colspan="2">222</td> <!--colspan表示单元格横跨多少列-->
</tr>
</tbody>
</table>
<!--写表格也可以直接用tr、th、td来写-->
<table border="1px" cellpadding="5px" cellspacing="2px">
<tr>
<th rowspan="2">111</th> <!--rowspan表示单元格竖跨多少行-->
<th>222</th>
<th>333</th>
<th>444</th>
</tr>
<tr>
<td colspan="2">222</td> <!--colspan表示单元格横跨多少列-->
<td>333</td>
</tr>
</table>
</body>
</html>4. form表单和input标签
<!DOCTYPE>
<html lang="en">
<head>
<title>Pray の 小破站</title>
<meta charset="UTF-8">
</head>
<body>
<h1>1. 登录注册页面,form表单,input系列</h1>
<form action="http://127.0.0.1:8080/index" method="POST" enctype="multipart/form-data">
<!-- method默认以get方式提交, 这里后面的enctype属性是为了上传文件-->
<!-- get方式提交会将内容添加作为url的后缀-->
<!--这里的placeholder中的值是显示在input框中的文本内容-->
<p>姓名<input type="text" name="username" placeholder="姓名"></p>
<p>密码<input type="password" name="password" placeholder="密码"></p>
<!--多选框-->
<p>爱好：
音乐<input type="checkbox" name="hobby" value="music">
电影<input type="checkbox" name="hobby" value="movie" checked="checked">
电影<input type="checkbox" name="hobby" value="talking">
</p>
<!--单选框-->
<p>性别：
男<input type="radio" name="gender" value="man" checked="checked">
女<input type="radio" name="gender" value="women">
</p>
<!--上传文件时，必须在form表单中添加一个enctype的属性-->
<p><input type="file" name="put_file"></p> <!-- 这是上传文件按钮 -->
<p><input type="submit" value="提交注册"></p> <!-- 这里的value值就是此提交框中显示的文本内容 -->
<p><input type="reset" value="重置"></p> <!-- 这是一个重置按钮 -->
<p><input type="button" value="只是一个按钮"></p>
<!--input框的属性：-->
<!--name:表单提交项的键-->
<!--value：表单提交项的值-->
<!--checked：radio和checkbox默认被选中-->
<!--readonly：只读模式， text和password-->
<!--disabled：禁用，失去所有的功能，对所有的input框都好使-->
<!-- 以上表单标签中的name属性其实是传递给server端的键值对中的键(key)，对应的值(value)就是用户选择或输入的选项-->
<!-- 以上传递信息被封装成了一个字典传递给server端 ： {"username":"hgzero", "password":"12345", "hobby":["music", "movie"], "gender":"man"}-->
</form>
</body>
</html>5. select标签和其他
<!DOCTYPE>
<html lang="en">
<head>
<title>Pray の 小破站</title>
<meta charset="UTF-8">
</head>
<body>
<h1>4. select标签和其他杂项</h1>
<h2>select标签</h2>
地区：
<!--这里的multiple是表示可以多选,size表示显示的最大个数-->
<select name="place" multiple="multiple" size="3">
<option value="beijing" selected="selected">北京市</option> <!--这里的selected表示默认选中-->
<option value="shanghai">上海市</option>
<option value="hefei">合肥市</option>
<option value="chongqing">重庆市</option>
<option value="chengdu">成都市</option>
</select>
安徽：
<select name="place" multiple="multiple" >
<!--这里的optgroup标签表示只是一个标题，不可选中-->
<optgroup label="安徽省">
<option value="anqing" selected="selected">安庆市</option>
<option value="合肥">合肥市</option>
</optgroup>
</select>
<h2>其他杂项</h2>
<!--一个大的文本输入栏，cols：文本默认有多少列，rows：文本默认有多少行-->
简介
<textarea name="desc" cols="20" rows="5"></textarea>
<div></div>
<input id="www" type="text">
<!--这里的label标签for中的值要与上面id中的值相同，以完成点击label标签中的文字就可以激活input输入框的特效-->
<label for="www">姓名</label>
</body>
</html>6. 更多详细内容
相关推荐
liduote 2020-11-13
chenhaotao 2020-11-13
localhost0 2020-11-12
小秋 2020-11-12
lxhuang 2020-11-03
学习web前端 2020-10-27
小焊猪web前端 2020-10-24
杏仁技术站 2020-10-23
南昌千网科技 2020-10-18
liduote 2020-10-16
BlueSkyUSC 2020-10-15
Doniet 2020-10-08
zjutzmh 2020-09-25
PncLogon 2020-09-24
趣IT 2020-09-22
杏仁技术站 2020-09-18
拾光璇旅 2020-09-17
kiven 2020-09-11
lfbooo 2020-09-09