网页前端培训（HTML）

1.安装编译器

网址：HBuilderX-高效极客技巧

选择windows标准版

2. HTML基础

学习网址：

1.HTML 基础 | 菜鸟教程

2.【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

HTML主要内容：

标题：HTML 标题（Heading）是通过<h1> - </h1> 标签来定义的。

例如：<h1>这是一个标题</h1>

段落：HTML 段落是通过标签 <p> 来定义的。

例如：<p>这是一个段落。</p>

链接：HTML 链接是通过标签 <a> 来定义的。

例如：<a href="https://www.runoob.com">这是一个链接</a>

图像：HTML 图像是通过标签 <img> 来定义的。

例如：<img src="/images/logo.png" width="258" height="39" />

3.基础语法

第一次网页前端培训：

1.常用标签

标题标签
           分为h1~h6 大小依次递减
           尽量少使用h1标签
           块级元素

段落标签
               P标签，会自动换行
               块级元素

       换行标签
               br 单标签
               <br><br/>

水平线标签
               hr 单标签
               常用属性
                   color 颜色
                   size 粗细
                   width 长度(百分比或 px)
                   align 对齐方式
          列表
               有序列表 <ol><li></li></ol>
               无序列表 <ul><li></li></ul> type选择内容前面的图案类型

div标签
               块级元素
               默认占全部的宽度，有多少内容高度占多数
               可以设置div的宽(width)高(height) 用style设置
               可以通过align设置内容的对齐方式

           span标签
               行内元素(不会自动换行且不能设置宽高)

格式化标签
               font标签
                   color 字体颜色
                   size 字体大小
                   face 字体风格
               pre 预格式化标签，保留空格和换行
               b 加粗
               i 倾斜
               u 下划线
               del 中划线
               sup 上标
               sub 下标

a标签
               超链接标签，用于链接到一个新的url
               常用属性：
                   href：需要跳转的地址(必须属性)
                   target:窗口打开方式
                       _self:当前窗口打开(默认)
                       _blank:在新窗口打开
               作为锚点：
                   a标签的name属性值：
                       <a name="top"></a>
                   其他的id属性值：
                       <div id="top"></div>
                   锚点的使用：
                       <a href="#top"></a>

img标签
               向网页中嵌入一张图片
               常用属性：
                   src：需要引入的图片的地址(必须属性)
                   alt：当图片破损或者不存在时，显示文本的内容
                   title：当鼠标悬停在图片上时显示的文本
                   width：图片的宽度
                   height：图片的高度
                   border：图片边框

table 表格
           tr 行
           td 标准单元格
           th 表头(字体居中，加粗效果)

           table属性
               width：表格的宽度
               border：边框
               align：对齐方式
               style="border-collapse: collapse;" 合并表格的边框

           tr的属性
               align：行的内容对齐方式
               bgcolor:背景颜色

代码：

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6><p>这是一个段落</p><p>这是另一个段落</p>Hello world<br />Hello <br />world<hr /><hr color="red" size="3" width="50%" align="left">
<ul type="square"><li>周杰伦</li><li>林俊杰</li><li>陈奕迅</li></ul><ol type="I"><li>周杰伦</li><li>林俊杰</li><li>陈奕迅</li></ol>
<div style="width: 500px;height: 100px;" align="center">这是一个div</div>111 <br /><span>这是一个span</span>111<hr /><font color="aqua" size="5" face="楷体">你好</font><br />hello &nbsp;&nbsp;&nbsp; world
<pre>
hello
world
</pre><p><b>以后</b>的<strong>你</strong>会<i>感谢</i>现在<u>努力</u>的<del>自己</del></p>H<sub>2</sub>O <br />2<sup>3</sup>

实例：

代码：

<img src="img/PC_880906d2a4ad95f5fafb2e540c5cdad7.png" width="500"height="400"border="2"title="百度" /><hr /><table width="400px"align="center" border="1" style="border-collapse: collapse;"><tr align="center"><th>编号</th><th>姓名</th><th>年龄</th></tr><tr align="center" bgcolor="antiquewhite"><td>1</td><td>李嘉政</td><td>18</td></tr></table>

实例：

第二次网页前端培训：

2.表单：

form标签
               表单标签，块级元素，会自动换行
               将数据传输给服务器

               常用属性
                   action 表单提交的地址url
                   id 唯一标识符
                   name 名称
                   target 表单提交方式(默认当前窗口)
                   metho 提交方式
                           get请求(默认)
                               参数会直接跟在url后面，用问号拼接
                               安全性差，传递的数据量小，效率高(是post速度的两倍)，有缓存
                           post请求
                               参数不会跟在url地址栏后面，会放在请求体中
                               安全性高，传输数量大，速度相对来说慢，无缓存

表单元素：

表单元素都需要设置name属性值，否则数据无法传递！！！
               input元素
                   type 表单元素类型
                       text 文本框
                       password 密码框
                       radio 单选框(需要设置一组相同的name属性)
                       checkbox 复选框(需要设置一组相同的name属性)
                       button 普通按钮
                       hidden 隐藏域(用来存放需要传递给服务器但不需要显示的数据)
                       file 文本域(上传文件)
                       date 日期框
                       submit 提交按钮
                       reset 重置按钮
                       image 图片按钮(一种提交按钮)
                   value 表单元素的值
                   checked 是否选中(单选框/复选框)
                   disabled 是否禁用
                   maxlength 允许输入的最大字符
               textarea 文本域
                       rows 长度即行数
                       cols 宽度
               lable标签
                   设置label标签的for属性与表单元素的id属性对于，当点击label标签时，会自动给表单元素聚焦
               button按钮双标签
                   type
                       button普通按钮
                       submit提交按钮(默认)
                       reset重置按钮
               select下拉选项
                   <select name="">
                       <option value="值">文本</option>
                   </select>
                       注：当option设置了value属性值时，提交的数据显示的是value对应的值，如果未设置value，则提交的数据是文本值
                       常用属性：
                           value 设置值
                           selected 设置选中状态
                           multiple 设置多选

常用字符实体：

代码：

<form action="http://baidu.com" method="get" id="myform" name="myform">
编号：<input type="hidden"  name="userid" value="1"/><br /><label for="username">姓名</label>:<input type="text" value="zhangsan"  id="username"  name="username"/><br />密码：<input type="password"  name="userpassword" maxlength="6"/><br />性别：男<input type="radio" value="man" name="usersex" checked="checked" />女<input type="radio" value="women" name="usersex" /><br />爱好：唱歌<input type="checkbox" value="sing" name="userhobby" />跳舞<input type="checkbox" value="dance" name="userhobby"  checked="checked"/>说唱<input type="checkbox" value="rap" name="userhobby"  disabled="disabled"/><br />生日：<input type="date"  name="userdate" /><br />头像：<input type="file"  name="userfile" /><br />简介：<textarea name="remark" rows="5" cols="50">111</textarea><br />城市：<select name="city" multiple="multiple" size="3"><option >请选择城市</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="hangzhou">杭州</option><option value="gushi" selected="selected">固始</option><option value="xinyang" disabled="disabled">信阳</option></select><br /><input type="button" value="普通按钮" /><input type="reset" value="重置按钮" /><input type="submit" value="提交按钮" /><input type="image"  src="img/百度.png" /><br /><button type="button">普通按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button></form>

实例：