WEB前端开发–2(HTML基础)

  • 2022 年 2 月 12 日
  • 笔记

HTML基础

HTML不分大小写

 


1.HTML概述

HTML(HyperText MarkUp Language)“超文本标记语言”,他是制作网页的标准语言

1.1 标签——元素

由尖括号包围,比如<title>,通常是成对出现

例如:<title>  百度一下,你就知道  </title>  

         开始标签                  内容                 结束标签

单独出现的标签:<img   />     图片标签单独出现

1.2 标签——嵌套

<html><body></body></html>  ——正确

<html><body></html></body>  ——错误

HTML语言中规定标签一定得有正确的嵌套关系,且要注意缩进,类似python。

标签嵌套关系可以用HTML DOM树表示.

1.3 标签——属性

<img src=”logo.jpg”  alt=”站标”   />

上面这句代码中有 src属性和alt属性两个属性。

一个标签可能由多个个属性,属性的先后顺序无关


 

2.文件

2.1 23文件结构

——————————

<html>

 <head>

  <title></title>

 </head>

</html>

——————————

在最外层有一对<html>标签,表示此部分由html来规范

<head>   头部信息:浏览器、搜索引擎所需要信息,会出现在网页标题(标签)栏里

<body>   主体部分:网页中包含的具体内容

2.2 HTML 编辑器

记事本   /    Sublime Text3     /     Webstorm

2.3  HTML5 的文件结构

——————————————

<!DOCTYPE html>

<html lang=”en”>

<head>

  <meta  charset=”UTF-8″> 

 <title>       </title>

</head>

<body>

<body>

</html>

—————————————

增加部分:

<!DOCTYOE html>  表示当前文档类型符合HTML5标准

lang 属性:搜索引擎 —— en英文  zh中文

<meta> :元数据(作者,关键字等等数据)

charset属性:字符集编码方式——浏览器UTF-8是国际编码

2.4 字符集与编码

字符(Character):   文字、符号——123    abc    一二三   !?$#

字符集(Charset):  字符的集合——英文字符集、汉字字符集、日文汉字字符集

编码:将字符和二进制码对应起来

编码方式: ASCII:数字、英文字母、符号进行了编码

        GB2312:简体中文

     Unicode:所有语言、占用空间较大

     UTF-8:所有语言、占用空间较小

2.5 乱码问题

  源文件保存时编码源文件声明<meata charset=”编码方式”>不一致就会出现乱码问题


 

3.HTML标签

3.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>

这里是正文文字

——————————————

3.2  段落p

——————————————

<p>这是段落,每个段落自动换行。</p>

<p>这是段落,每个段落自动换行。</p>

<p>这是段落,每个段落自动换行。       空格,

 

也不会显示空行, 且不会换行

——————————————

输出:

————————————————————————————

这是段落,每个段落自动换行。

这是段落,每个段落自动换行。

段落内部文字忽略连续 空格, 也不会显示空行,且不会换行

————————————————————————————

空行和多个连续空格在段落内部都会只生成一个空格

3.3  段内换行 <br/> 

<br/> 为单独出现的标签,直接结束

读到<br/>标签自动换行,类似于\n

3.4  空格字符&nbsp;

&nbsp;    为特殊字符,全小写

——————————————————————————————

<body>

  <p>段落内部文字忽略连续&nbsp;&nbsp;&nbsp;空格,

  <br/>

  也不会显示空行,且不会换行

  </p>

</body>

——————————————————————————————

输出:

——————————————————————————————

段落内部文字忽略连续      空格,

 

也不会显示空行,且不会换行

——————————————————————————————

3.5 预留格式pre

定义预格式化的文本,在pre标签内部,所有内容都会被保留源格式。

——————————————————————————————

<body>

  <pre>

  这是预留格式文本       它保留了         空格

 

  和空行

  </pre>

  <p>pre    标签很适合显示计算机代码   </p>

  <pre>

  for i=1 to 10

    print i

  next i

  </pre>

<body>

——————————————————————————————

3.6  行内组合span

  组合行内元素,以便通过CSS样式来格式化

——————————————————————————————

<style type=”text/css”>

span{

  color : blue;

  font-wieight : bold;  

}

</style>

<p> 最新<span>中国人口调查报告显示</span>显示</p>

——————————————————————————————

3.7  水平线<hr/>

——————————————————————

<p>正文段落</p>

<hr  />

<p>正文段落</p>

——————————————————————

3.8  注释内容标签  <!–   注释内容  –>

——————————————————————

<body>

  <!–  这是一段注释–>

  <!– 注释可以

  跨行 –>

</

<body>

——————————————————————

3.9  超链接   <a>

<a href=”网址”>  文字或图片   </a>

分类:

  链接到本站点的其他网页:

    <a href=”news.html”>  新闻  </a>

  链接到其他站点的网页:

    <a href=”//www.baidu.com”>  百度  </a>

  虚拟超链接:
    <a href=’#’>  板块2  </a>   ——还没设置好超链接时用虚拟超链接替代

举例:

【index.html】

——————————————————————————

<!DOCTYPE html>
<html lang=’en’>
<head>
  <meta charset=’UTF-8′>
  <title>Doucment</title>
</head>
<body>
  <h1>首页</h1>
  <h2>导航</h2>
  <a href=”news.html”> 新闻 </a>
  <a href=”technology.html”> 科技 </a>
  <a href=”//www.baidu.com”> 问问百度 </a>
</body>
</html>

————————————————————————————

【news.html】

———————————————————————————————

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title> 新闻 </title>
</head>
<body>
<h1> 新闻板块 </h1>
<p><a href=”#”>五年来###这样论述”一带一路”</a></p>
<p><a href=”#”>关于中非合作 ###这些提法有深意</a></p>
<p><a href=”#”>专家学者高度评价###提出的”五不””四不能”</a></p>
<p><a href=”#”>###将赴俄出席东方经济论坛并与普京会晤</a></p>
<p><a href=”#”>人命日报:让能干事者有舞台 中国方案 专题</a></p>
<p><a href=”#”>中国人当心 又来了两则中美贸易战的宣言</a></p>
</body>
</html>

————————————————————————————————

【technology.html】

—————————————————————————————————————

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”utf-8″>
  <title> 科技 </title>
</head>
<body>
  <h1> 科技板块 </h1>
  <p><a href=”#”>颜宁课题组70天里发3篇Sciense</a></p>
  <p><a href=”#”>不良反应≠疫苗一定有问题</a></p>
  <p><a href=”#”>自如事件:无限放大的甲醛恐慌</a></p>
  <p><a href=”#”>超越基因的遗传: 你遗传给后代的也许不只是基因信息</a></p>
  <p><a href=”#”>科学大家 |如何治愈癌症:个性化精准医疗将发挥大作用</a></p>
  <p><a href=”#”>美国无人太空飞机执行第五次任务已一年 目的仍未知</a></p>
</body>
</html>

——————————————————————————————————————

3.10  图像

3.10.1 图像格式

常见图像格式有:JPG,PNG,GIF

JPG:有损压缩的图像格式,支持色彩丰富的图片

GIF :简单动画背景透明

PNG:  无损压缩,透明、交错、动画

3.10.2 插图图像 <img />

<img src=”w3school.gif”>

img标签有两个重要属性:src属性 、 alt属性

src属性:图像路径+文件名

alt属性:当图像由于某种原因未打开时,图像的替换文本

3.10.3  绝对路径与相对路径

绝对路径:以根目录为基准<img src=”C:/site/logo.gif” />

相对路径:以该文档所在位置为基准<img src=”logo.gif” />

         同级文件夹中:<img src=”images/logo.gif” />

         上级文件夹中:<img src=”../logo.gif” />

 

3.11 区域div

——————————————

<div align=”center”>   # align=center 居中

  <h1>web 前端开发</h1>

  <p>HTML</p>

  <p>CSS</p>

  <p>JavaScript</p>

</div>

——————————————

3.12  列表

3.12.1 无序列表  <ul> <li>

可以将多个超链接变成列表项,存储为无序列表。

————————————————————————————————

<h1>Web 前端开发</h1>

<u1>

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</u1>

————————————————————————————————

3.12.2 有序列表  <ol>  <li>

例如排行榜,有些地方先后顺序很重要,故采用有序列表

————————————————————————————————

<h1>web 前端开发</h1>

<ol>

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</ol>

————————————————————————————————

3.13 表格   table  tr   td   th

以表格的方式呈现信息

table——表     tr——表格行    td——普通单元格   th——表头单元格

————————————————————————————————

<table border=”1″>

  <tr>

    <td>red</td>

    <td>yellow</td>

  </tr>

  <tr>

    <td>blue</td>

    <td>green</td>

  </tr>

</table>

————————————————————————————————

3.14 表单与表单元素

表单:是一个区域,用于采集用户信息

表单元素:文本框、按钮、单选、复选、下拉列表、文本域

3.14.1 表单 <form>

action属性:表示收集来的数据交于哪个网页处理(后端范畴)

————————————

<form action=”数据处理网页”>

  表单元素

</form>

————————————

3.14.2 文本框、密码框input

text与password的区别: text明文显示,password则是用星号显示

name属性为信息地址

——————————————————————————————

<form>

  账户:<input type=”text” name=”userName” />

  <br />

  密码:<input typy=”password” name=”userPsd” />

</form>

——————————————————————————————

3.14.3 按钮  input——

按钮:提交按钮、重置按钮

type:提交按钮——submit   重置按钮——reset

value:按钮表面的文字

——————————————————————————

<form>

  爱好:

  <input type=”text”>

  <input type=”submit” value=”确定”   />

  <input tyoe=“reset”  value=“重置”     />

</form>

——————————————————————————

3.14.4  单选框、复选框input——radio  checkbox

单选框:只能选则一项     复选框:任意选择多项

type:单选框——eadio    复选框——checkbox

value:表示要提交到后端的数据

name:当前这一项的名称(单选框name值相同,复选框name值不同)

checkd:当前这一项是否被默认选择,一般为第一项

——————————————————————————————————

<form>

  性别:

  男       <input type=”radio” value=”boy” name=”gender” checkd=”checked”  />

  女  <input type=”radio” value=”girl” name=”gender”   />

  <br   />

  爱好:

  <input type=”checkbox” value=”1″ name=”music” checkd=”checked”  /> 音乐

  <input type=”checkbox” value=”2″ name=”sport”       /> 体育

  <input type=”checkbox” value=”3″ name=”reading”   /> 阅读

</form>

——————————————————————————————————

3.14.5  下拉列表框  selected  option

selected=”selected” 即为被选择的一项

——————————————————————

<select>

  <option> 选项1 </option>

  <option  selected=”selected”>  选项2  </option>

</select>

——————————————————————

3.14.6  文本域  Textarea

<textarea  rows=”行数”  cols=“列数”>  文本  </textarea>

——————————————————————————————————

<form>

  个人简介:<br >

  <textarea  cols=”50″  rows=”10″>

    在这里输入内容

  </textarea>

  <br />

 

       <input type=”submit” value=”确定”   />

  <input tyoe=“reset”  value=“重置”     />

</form>

——————————————————————————————————

4. web语义化

4.1 概述

Web语义化:让页面具有更好的结构与含义,从而让人和机器都能快速理解网页内容

优点:1.结构清晰,利于团队的开发、维护

   2.有利于搜索引擎理解

   3.SEO(Search Engine Optimization) 搜索引擎优化

   4.容易兼容不同设备。

4.2 em strong        均成对使用

<em> = <i>:  emphasize  斜体

<strong> = <b>:strong   加粗

4.3  dl,dt,dd

————————————————

<dl>

  <dt>HTML</dt>

  <dd> 超文本标记语言 </dd>

  <dt>CSS<dt>

  <dd>层叠样式表</dt>

</dl>

————————————————

输出:

————————————————

HTML

  超文本标记语言

CSS

  层叠样式表

————————————————

5. sublime 快捷键

alt+shift+2   分成两屏

alt+shift+1   回到单屏

ctrl+s   保存

ctrl+/   注释

ctrl+shift+/  取消注释

按下ctrl单击多处,可以多处同时编辑

配合Tab快捷键:

!   HTML5文件结构

p*4   四个段落

>  嵌套 

ul>li*n   快速生成无序列表

table>tr*m>td*n    生成m*n的表格

 p{段落内容}    生成含内容的段落