前端语言-html-CFANZ编程社区

一、html介绍

1、什么是HTML：

HTML指的是超文本标记语言，用来描述网页的一种语言，不是编程语言

2、简介：

web浏览器，简称浏览器，一种用于检索并展示万维网信息资源的应用程序

3、信息资源：

这些信息资源可为网页、图片、影音或其他内容。由统一资源标识符标识

4、统一资源标识符：

用于标识某一互联网资源名称的字符串

5、内核：

浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

6、web标准构成：

结构(HTML)
表现(CSS)
行为(Javascript)

二、基本结构

1、标签结构

<!DOCTYPE html>          #这个文本是html的文本
<html lang="en">         #lang=en是英文语言，<!--根标签，页面中最大的标签-->
<head>                   # <!--头部，必须要设置它当中的title标签-->
    <meta charset="UTF-8">
    <title>Title</title>        #<!--标题，自己网页的标题-->
</head>
<body>                          # <!--文档主体，页面内容基本都放这里-->

</body>
</html>

2、语法规范

所有的标签都放在<> 中，例如<html>

大多数标签都是成对出现的，即双标签，例如<html></html>，当然，有双标签也就会有单标签，后面会慢慢学到

标签的关系：

包含

前端语言-html_ide

并列

前端语言-html_html_02

由尖括号包裹单词构成， e g ：<html>,所以标签不可能以数字开头

三、常用标签

1、标签使用样式：

开始标签<a>标签体</a>结束标签
自闭合标签，eg：<br>,<hr>,<input><img>

2、标签属性：

通常为键值对形式出现，eg：color=“red” id = ‘eat’
属性只能出现在开始标签和自闭标签内
属性名字全部小写，属性值必须用单引或者双引包裹
如属性名和属性值完全一样，直接写属性名即可，eg： “readonly”（input标签属性）

标题标签 (header)：一般用在文章的标题，有h1~h6
段落标签 (Paragraph)：会把 HTML文档分割成若干段落
列表标签：列表标签分为：有序列表、无序列表以及定义列表
div 标签

①文本标签:<h1> </h1> ,标题6级h1-h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>一级标签 </h1>          #自动换行
<h2>二级标签 </h2>
<h3>三级标签 </h3>
<h4>四级标签 </h4>
<h5>五级标签 </h5>
<h6>六级标签 </h6>
</body>
</html>

②段落标签:<p> </p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p1>段落1 </p1>
<p2>段落2 </p2>
<p3>段落3 </p3>
</body>
</html>

③换行标签 :<br> 自闭标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我要换行了<br>我要换行了
</body>
</html>

④水平标签:<hr> 自闭标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
</body>
</html>

⑤文本加粗标签 :<b></b> 或<strong></strong>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<b>字体加粗</b>
<strong>字体加粗有强条的作用</strong>
</body>
</html>

⑥倾斜标签:<em></em> 或<i></i>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<em>哈哈 </em>
<i>哼哼</i>
</body>
</html>

⑦删除线标签:<s></s> 或<del></del>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<s>我是 </s>
<del>他是</del>
</body>
</html>

3、预留字

①空格：&nbsp；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>今天是一个好天气  这是真的吗</p>
</body>
</html>

②小于号：<

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>今天是一个好天气<这是真的吗</p>
</body>
</html>

③大于号:>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>今天是一个好天气>这是真的吗</p>
</body>
</html>

④和号:&

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>今天是一个好天气&这是真的吗</p>
</body>
</html>

⑤div 会独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- div 会独占一行  span不会换行 -->
<div>第一块</div>
<div>第二块</div>
</body>
</html>

⑥span不会换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span>凤娄</span>
<span>萌豆</span>
</body>
</html>

4、列表

①定义有序列表：ol

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol>
  <li>吃饭</li>
  <li>睡觉</li>
  <li>约会</li>
  <li>学习</li>
  <li>喝酒</li>
</ol>
<ol type="A">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>约会</li>
  <li>学习</li>
  <li>喝酒</li>
</ol>
<ol type="a">
  <li>吃饭</li>
  <li>睡觉</li>
  <li>约会</li>
  <li>学习</li>
  <li>喝酒</li>
</ol>
<ol type="I" start="2">
<!-- type表示序号的类型  start表示序号从哪个开始 -->
  <li>吃饭</li>
  <li>睡觉</li>
  <li>约会</li>
  <li>学习</li>
  <li>喝酒</li>
</ol>
</body>
</html>

②定义无序列表：ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
  <li>时倾</li>
  <li>神兽</li>
  <li>王善</li>
</ul>
</body>
</html>

③定义列表项：li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul type="circle">
  <li>时倾</li>
  <li>神兽</li>
  <li>王善</li>
</ul>
<ul type="square">
  <li>时倾</li>
  <li>神兽</li>
  <li>王善</li>
</ul>
<ul type="none">
  <li>时倾</li>
  <li>神兽</li>
  <li>王善</li>
</ul>
</body>
</html>

④定义列表：dl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 自定义列表 -->
<dl>
  <dt>兮云</dt>
  <dd> --年方二八</dd>
  <dt>披萨</dt>
  <dd> -- 是一种容易上瘾的食品</dd>
</dl>
</body>
</html>

⑤自定义列表项目：dt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
<dt>兮云</dt>
  <dd> --年方二八</dd>
<dt>披萨</dt>
  <dd> -- 是一种容易上瘾的食品</dd>
</dl>
</body>
</html>

⑥定义自定列表项的描述：dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 自定义列表 -->
<dl>
  <dt>兮云</dt>
<dd> --年方二八</dd>
  <dt>披萨</dt>
 <dd> -- 是一种容易上瘾的食品</dd>
</dl>
</body>
</html>

5、其他好玩标签

①图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 图片 -->
<!-- width宽度，height高度 -->
<img src="R-C.jpg" width="300" height="300" title="这是风景图片">   #src很后面跟上路径
</body>
</html>

②音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 音频 -->
<!-- controls显示空间，不写出不来 -->
<video src="支付宝到账铃声.mp3" controls></video>
</body>
</html>

③视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 视频 -->
<video src="小姐姐.mp4" controls width="300" height="300"></video>
</body>
</html>

④链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 链接 -->
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>