前端HTML5学习笔记

小白初学前端可看

前端HTML5

Hyper Text Markup Language（全称）

W3C（World Wide Web Consortium）万维网联盟

W3C标准包括

1. 结构化标准语言（HTML XML)

2. 表现标准语言（CSS)

3. 行为标准（DOM ECMAScript）

流程

先setting一个包，然后删掉.src，然后再建一个包

1. head标签代表网页头部

2. body代表网页主体，以后所有内容写在里面

3. title代表网页标题

1. meta为描述标签，他用来描述我们网站的一些信息，一般用来做SEO

标签

注释的模板：<!- - 开头 - ->结尾 快捷方式：ctrl+/

标签分为开放标签和闭合标签

<..>开放标签 </..>闭合标签

标题标签

模板：h1+tab（一级标签）

h2+tab (二级标签)

 

段落标签

快捷方式：p+tab 先打出p，然后按tab键

换行标签

模板：br/+tab

 

水平线标签

模板：hr/+tab 会生成分割线

字体样式标签

粗体模板：strong+tab

斜体模板：em+tab

注释和特殊符号

空格：模板：& + nbsp + ；

大于号：模板：& + gt + ；

小于号：模板：& + lt + ；

版权符号：& + copy + ； 其后面可以加上文字，效果图如下

特殊符号记忆方式：一个&开头，然后以；（分号）结尾，再看后面的注释，即可选择你想要的特殊符号。

图像标签

模板：img+tab

ctrl+alt+c：选中你所想要的图像，然后ctrl+v，把图像拷到image的包中去

src:图片地址（必填）
相对地址（常用），绝对地址（少用）
../  代表上一级目录
./   代表本级目录

绝对地址如下：

相对地址如下：

alt：图像代替文字（即当图片显示不出来的时候，文字代替了图片）

title：悬停提示文字，即将鼠标放在图片上所出现的文字

链接标签

模板：a + tab

href：必填 ，表示要跳转到哪个页面
targer: 表示图片在哪里打开
_blank：在新标签中打开
_self:在自己的网页中打开

也可以在其中可以插入图片标签（即通过图片进入另一个网址）

模板（例子）：

<a href="first.html">
    <img src="./resource/image/1.jpg" alt="史迪仔" title="点击查看详情">
</a>

效果图如下

锚标记：

模板：前方要有一锚标记，后面接上锚链接的

例如：

<a name="top">顶部</a>
。。。
。。。
。。。
<a href="#top">回到顶部</a>

功能性链接

邮件性连接：

<a href="mailto:1758541318@qq.com">点击联系我</a>

效果如下：

块元素和行内元素

1. 块元素：无论内容多少，该元素始终独占一行

   例如：换行标签（p + tab） 标题标签（h1 + tab）

2. 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

列表

1. 有序列表

   模板：ol + tab（一般需要子列表）子列表模板：li + tab

   应用范围：试卷，问答......

   <ol>
     <li>java</li>
     <li>python</li>
     <li>运维</li>
     <li>前端</li>
     <li>C/C++</li>
   </ol>

   效果如下：

1. 无序列表

   模板：ul + tab

   应用范围：导航，侧边栏...

   <ul>
     <li>java</li>
     <li>python</li>
     <li>运维</li>
     <li>前端</li>
     <li>C/C++</li>
   </ul>

   效果图如下：

   

2. 自定义列表

   模板：dl + tab

   应用范围：公司网页的底部

   <dl>
     <dt>titile</dt>
     <dd>content1</dd>
     <dd>content2</dd>
     <dd>content3</dd>
     <dd>content4</dd>
   </dl>

效果图如下

表格

模板：table + tab

行：tr
列：td
一般是行里面插入列
border：一般用来设置表格边框
colspan：跨列
rospan：跨行

<table border="1px">    这个border就设置了这个表格的边框
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr >
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>

效果图如下：

跨行跨列的运用

<table border="1px">
  <tr>
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

效果图如下

例子：学生成绩如下

<table border="1px">
<tr >
    <td colspan="3">学生成绩</td>
</tr>
  <tr>
      <td rowspan="2">向轩</td>
      <td>语文</td>
      <td>100</td>
  </tr>
  <tr>
      <td >数学</td>
      <td >100</td>
  </tr>
  <tr>
      <td rowspan="2">向驰</td>
      <td>语文</td>
      <td>99</td>
  </tr>
  <tr>
      <td >数学</td>
      <td >99</td>
  </tr>

总结：

1. 先考虑列宽，比如第二行是3个列宽，所以在第一个td语法中，要把colspan设置为3。

2. 再考虑行高，比如在名字的位置，其所对应的是2行高，所以要在td语法中，把rowspan设置为2.

3. 表格的制作大概思考流程如此。

媒体元素

视频模板：video + tab

<video src="./resource/video/短视频.mp4" autoplay controls></video>

1. autorplay：表示视频自动播放

2. controls：给视频增加进度条

音频模板：audio + tab

<audio src="         " controls autoplay>           </audio>

image一般用来放图片资源

video一般用来放视频资源

页面结构分析

一般用header/footer/section构建成一个主体内容

iframe内联框架

模板：iframe + tab

<iframe src="" frameborder="0" width="300px" height="300px"></iframe>

效果图如下

表单语法（*）

所需登录的就是表单

例如：

模板：form + tab

子模板：input +tab

<form action="first.html" method="post">
<p>名字 : <input type="text" name="username"> </p>
<p>密码 : <input type="password" name="pwd"></p>
<input type="submit">
<input type="reset">
</form>

例图如下：

form语法中的action表示指向的网址，method表示是如何到达指向的网址。如果是get，则会在网址栏显示出账号，密码，其特点是高效，但不够安全。如果是post，则比较安全，可以用来传输大文件。

1. input语法中，在type中输入text，表示文本框类型输入。

   <input type="text" name="username"> 

2. input语法中，在type中输入password，表示密码框

   <input type="password" name="pwd">

3. input语法中，在type中输入radio，表示单选框

   <input type="radio" value="boy" name="sex" checked/>男
   <input type="radio" value="girl" name="sex"/>女

   value：表示单选所选的值
   name：表示组，用来限制单选，同一组才有限制
   如果在语法中加入checked，就表示该选项默认选中。（比如在第一行代码中输入了checked，表现为该选项成为首选）

4. input语法中，在type中输入checkbox，表示多选

   <p>爱好
       <input type="checkbox" value="sleep"  name="hobby">睡觉
       <input type="checkbox" value="code"  name="hobby checked">敲代码
       <input type="checkbox" value="chat"  name="hobby">聊天
       <input type="checkbox" value="guitar"  name="hobby">弹吉他
   </p>

   value：
   name：
   按钮的名字还是在input语法外
   如果在语法中加入checked，就表示该选项默认选中。（比如在第二行代码中输入了checked，表现为敲代码成为默认选项）

5. input语法中，在type中输入button，表示按钮

   <input type="button" name="btn1" value="点击变长">

   下面的submit和reset也是属于按钮一类
   图片按钮：
   
   

   <input type="image" src="./resource/image/1.jpg">

   需要通过src来表示所引用的图片的路径

6. input语法中，在type中输入select,表示下拉框，并且用option表示子选项

   <p>下拉框：
       <select name="列表名称" >
           <option value="china">中国</option>
           <option value="us">美国</option>
           <option value="eth" selected>瑞士</option>
           <option value="yingdu">印度</option>
       </select>
   </p>

   如果在语法中加入checked，就表示该选项默认选中。比如在瑞士这个选项中加入了selected，表示瑞士成为默认的首选项

    8. input语法中，在type中输入file，表示文件域

<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

   9. 文本域语法

模板：textarea + tab

<p>反馈：
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
</p>

cols：表示行宽
rows：表示列宽

1. 功能性表单

   input语法中，在type中输入email，表示邮件这个一功能性表单

   

   <p>邮箱
       <input type="email" name="email">
   </p>

input语法中，在type中输入number，表示数量

<p>商品数量
    <input type="number" name="num" max="100" min="0" step="1">
</p>

max：表示最大值
min：表示最小值
step：表示跨度大小，可用来调节数据变化

input语法中，在type中输入range，表示滑块

<p>音量：
    <input type="range" max="100" min="0" name="voice" step="2">
</p>

max：表示最大值
min：表示最小值
step：表示跨度大小，可用来调节数据变化

input语法中，在type中输入search，表示搜索框

<p>搜索
    <input type="search" name="search">
</p>

1. 一般还需要配上submit和reset指令。

<input type="submit">表示提交
<input type="reset">表示重置

1. 只要是属于表单语法，所有代码都必须写在form语法中！！！

value:表示一进去，所显示出来的值，即默认初始值
maxlength：表示框内所能输入的最大长度
size：表示文本框的长度

1. 输入的小语法（点击前面标题可以进入输入框）

   模板：label + lab

<label for="mark">你点我试试</label>
<input type="text" id="mark">

label语法中的for是个标记。若要使用label语法，则必须设计另一个标记。在别的input语法中，设一个id，使这个id等于for所引用的标记。

表单的属性

需特别关注

1. 只读：readonly：限制输入框（不可改动）

2. 禁用：在选择的语法中用disabled，可以禁止此选项被选择。

3. 默认：在选择的语法中用checked，可以将此选项设为默认

4. 隐藏域：hidden表示隐藏标签，在input语法中使用此词，可以隐藏相应的框（主键不能使用。因为主键很常用）

表单验证

1. 提示信息：在表单中输入placeholder，可以输入想提示的内容

<p>名字 : <input type="text" name="username" placeholder="请输入用户名"> </p>

2.非空判断：在表单中输入required，可以使此表单作为必填表单

<p>名字 : <input type="text" name="username" placeholder="请输入用户名" required> </p>

3.**正则表达式：在表单中输入pattern

常用的网址：https://www.jb51.net/tools/regexsc.htm（查询正则表达式）

不要光看笔记或者看别人的操作，自己也要动手。

所有学的东西都需要练，我们作为码农，更需要练，平时闲暇的时候，在idea练习吧。