前端html5基础

2020-02-15

HTML

HTML概述

1.HTML(HyperTEXT MarkUp Language)
"超文本标记语言",它是制作网页的标准语言 HTML不区分大小写
2.标签
由尖括号包围,比如<title> , 通常成对出现如<title></title> 不能交叉嵌套 并且要注意缩进 如:


<html>                外层:父元素
 <head>             内层
 </head>
 <body>             内层为同级
 </body>
</html>

一个标签可以有多个属性,且与属性先后顺序无关

HTML文件结构

文件结构为:.htm .html 文件

<html>                头部:浏览器,搜索引擎所需信息
 <head>      
  <title> </title>
 </head>
 <body>              主体:网页中包含的具体内容
 </body>
</html>

HTML5文件结构

<!DOCTYPE html>           文档类型:符合HTML5标准
<html lang="en">         lang属性:en英文zh中文
<head>      
 <meta chraset="UTF-8">  <meta>:元数据 用于指定关于HTML文档的信息  chraset属性:字符集编码方式   浏览器:UTF-8 是国际编码
 <title> </title>
</meta></meta></head>
<body>              主体:网页中包含的具体内容
</body>
</html>

字符集与编码

ASCII 数字,英文字母,符号进行了编码
GB2312 简体中文
Unicode 所有语言
UTF-8 所有语言,占用空间更小


乱码问题

  • 源文件保存时的编码方式
  • 源文件声明<meta charset="编码方式">

不一致时就会出现乱码

HTML标签(1)

标题h1~h6

即分级标题,一个页面建议只有一个h1

<h1>一级标题 heading 1</h1>
<h2>一级标题 heading 2</h2>
<h3>一级标题 heading 3</h3>
<h4>一级标题 heading 4</h4>
<h5>一级标题 heading 5</h5>
<h6>一级标题 heading 6</h6>
这集里正文文字

段落p

<p></p>

<p>段落内容</p>

由于对html源文件会自动去掉空格空行,对于源代码连续多个空格空行只生成1个空格空行
空行解决方式

段内换行br

<br/>

单独出现的标签,直接结束

<p>这是段落。<br/> 换行,多个则为空行。</p>

空格解决方式

空格字符 &nbsp;

&nbsp;
特殊字符 全小写
使用该字符为增加空格的方法

<body>
 <p>连续三个空格&amp;nbsp;&amp;nbsp;&amp;nbsp;</p>
</body>

更简单解决方式

预留格式pre

<pre> </pre>
定义预格式化的文本,文本总的空格和换行符会被保留
pre标签很适合显示计算机代码

<body>
 <pre>
内容格式不会变,空格空行会保留
 </pre>
</body>

行内组合span

<span> </span>
组合行内元素,以便通过CSS样式 来格式化 需要单独标记出来的信息所用

html部分
<p>将<span>需要特殊标识出来的文字放在该标签内</span></p>
在学到CSS利用代码对该标签进行设置如:
<style type="text/css" span{="" color:blue;(蓝色)="" font-weight:bold;(加粗)="" }="" <="" style="">

</style>

水平线hr

<hr/>
单独出现
添加水平线来分割网页的不同部分

<p>
<hr/>单独出现 默认网页左端到右端 在需要添加的位置直接书写该标签即可
</p>

注释

<!--注释内容-->

<body>
 <!--注释内容 主要对代码功能进行说明,增加可读性-->
 <!--注释不会在浏览器中显示-->
 <!--注释可以
 跨行-->
</body>

HTML标签(2)

超链接

<a href="网址">文字或图片</a>
此标签成对出现
链接到本站点其他网页
<a href="news.html">新闻</a> 即单击到新闻页面
链接到其他站点
<a href="http://www.baidu.com">百度</a>即单击百度 要带上协议部分的名字 跳转百度
虚拟超链接
<a href="#">板块2</a>不知道跳转到哪个页面当鼠标停留在链接的文字或图片上时,依然会出现超链接的效果 比如光标变小,但不会单机链接到任何位置。






如部分代码需要其他html文件配套
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</meta></head>
<body>
  <h1>首页</h1>
  <h2>导航</h2>
  <a href="news.html">新闻</a>
  <a href="technology.html">科技</a>
  <a href="www.baidu.com">问问百度</a>
</body>
</html>

HTML标签(3)

img标签

<img src="图片" alt=“图片替换文本”/>

常见图像格式

1.JPG:有损压缩,色彩丰富图片。
2.GIF:简单动画,背景透明。
3.PEN:无损压缩、透明、交错、动画。

插入图像

<img src="图片" alt=“图片替换文本”/>
比如有以下两个文件 要在index.htm中添加logo.gif
绝对路径:以根目录为基准
C:/site/index.htm
C:/site/logo.gif
<img src="C:/site/logo.gif" />
相对路径:以该文档所在的位置为基准
图片直接在站点文件夹内<img src="logo.gif" />
图片在站点文件夹内images文件夹<img src="images/logo.gif"/>
图片在站点文件夹内 网页在站点文件夹内的文件夹两个点表示上一级文件夹 <img src="../logo.gif">
图片和网页分别在站点文件夹子文件夹内 <img src="../images/logo.gif"/>









HTML标签(4)

区域:div

<div></div>
成对出现,确定一个单独的区域,如页面的一个组成部分,一个栏目板块

<div align="center">  align属性:表示对齐
   <h1>web 前端开发</h1>
   <p>HTML</p>
  <p>CSS
  <p>JavaScript</p>
</p></div>

列表

无序列表 ul li

无序列表<ul></ul> 列表项<li></li> 成对出现

<h1>web 前端开发</h1>
<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JS</li>
</ul>

有序列表 ol li

有序列表<ol></ol> 列表项<li></li>成对出现 出现序号

<h1>web 前端开发</h1>
<ol>
 <li>HTML</li>
 <li>CSS</li>
 <li>JS</li>
</ol>

表格

table tr td

<table></table> 表示要绘制表格
<tr></tr> 表示行数
<td></td> 表示单元格(列)

下列代码表示两行三列的表格
<table>
   <tr>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
   </tr>
   <tr>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
   </tr>
</table>
下面表是2*3有边框表格
<table border="1"> border属性表示 边框的粗细 
   <tr>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
   </tr>
   <tr>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
     <td>此处填写内容</td>
   </tr>
</table>

table tr th

<table></table> 表示要绘制表格
<tr></tr> 表示行数
<th></th> 表示表头单元格tablehead 加粗显示

下面代码表示4*3且第一行为表头单元格的表格
<table border="1">
   <tr>  <th>内容</th>  <th>内容</th>  <th>内容</th>  </tr>
   <tr>  <td>内容</td>  <td>内容</td>  <td>内容</td>  </tr>
   <tr>  <td>内容</td>  <td>内容</td>  <td>内容</td>  </tr>
   <tr>  <td>内容</td>  <td>内容</td>  <td>内容</td>  </tr>
</table>    

HTML标签(5)

表单:是一个区域,采集用户信息
表单元素:文本框,按钮,单选,复选,下拉列表,文本域

表单form标签

<form></form>成对出现

<form action="数据处理网页"> action属性:表示收集来的数据交由那个页面处理
表单元素
</form>

文本框,密码框input----text password

<form>
<input type="text|password"
</form>
type属性:
文本框:type="text"
密码框:type="password"




例子:
<form>
 账户:<input tpye="text" name="userName"/>

 密码:<input tpye="password" name="userPsd"/>
</form>:
PS:通常不会自动换行所以要添加标签, 
name属性代表名字是什么,当表单元素数据需要交给后端处理,后端处理数据就要知道数据来源于哪个表单元素,通过name属性读取到是哪个表单元素的数据。

提交重置按钮input----submit

按钮:提交按钮 重置按钮
提交按钮需要将type属性设置为submit
重置按钮需要将tpye属性设置为reset
value属性:用来规定表面文字是什么


例子
<form>
   姓名:
   <input type="text" value="" name="myName"/>
   <input type="submit" value="提交”  name=" submit"=""/>
</form>
例子
<form>
   爱好:
   <input tpye="text">
   <input tpye="submit" value="确定"/>
   <input type="reset" value="重置"/> 
</input></form>

单选框 复选框input----radio checkbox

单选框需要将type属性设置为radio:只能选择一项
复选框需要将type属性设置为checkbox:任意选择多项
name属性:当前这一项它的名称叫什么
checked属性:表示是否被默认选择当为checked为默认选择
value属性:表示要提交给后端的数据



格式
<form>
  <input type="radio|checkbox" value="值" name="名称" checked="checked"/>
</form>
例子:男 音乐被默认选择
<form>
   性别:
   男   <input type="radio" value="boy" name="gender" checked="checked"/>
   女   <input type="radio" value="girl" name="gender"/>
   爱好:
   <input type="checkbox" value="1" name="music" checked="checked"/>音乐
   <input type="checkbox" value="2" name="sport"/>体育
   <input type="checkbox" value="3" name="reading"/>阅读
</form>

下拉列表框select option

<select></select>标签对表示一个下拉列表框
<option></option>标签对表示列表项
option标签有一个selected属性:当selected="selected"表示是否默认被选

例子:旅游被默认选择
<form>
 爱好:
 <select>
   <option>看书</option>
   <option selected="selected">旅游</option>
   <option>运动</option>
   <option>购物</option>
 </select>
 </form>

文本域Textarea

<textarea></textarea>成对出现 表示出现一块大段的文本输入区域
rows属性表示行数
cols属性表示列数
<textarea rows="行数" cols="列数">文本</textarea>


例子
  <form>
     个人简介:<br>
     <textarea cols="50" rows="10>
      在这里输入内容
     </textarea>
     <input type=" submit"="" value="确认" <input="" type="reset" <="" form="">

</textarea>
</form>

原文链接:segmentfault.com

上一篇:大前端之路-vuex 速览
下一篇:6 小时京东前端大咖带你玩转 Webpack4.0
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部