前端之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. 更多详细内容
版权声明：本文为hgzero原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。