HTML基础

HTML标签

简单标签

• p元素是块级元素，会自动将光标移至下一行类比“\n”
• em是内联元素即不会换行,可以起强调(斜体),i也有斜体作用
• ins元素表示插入的文本(加下划线)
• small元素表示较小的文字
• del元素表示已删除的文本(在文字内划线)
• kbd元素表示键盘文字
• code元素是计算机代码文本
• strong元素表示重要文字(加粗)，b也能使字体加粗
• a元素的内容里用cite元素可以使字体呈斜体
• sub 下标,sup 上标
• <br />换行类似“\n”
• adress元素表示联系方式
• var元素表示变量名
• samp元素表示计算机的输出
• pre元素保留空白字符
• <hr />为水平分隔符，在两个块中分隔一条线

html布局

• header- 定义文档或部分的标题
• nav- 定义一组导航链接
• section- 定义文档中的部分
• article- 定义独立、自包含的内容
• aside- 定义内容之外的内容（如侧边栏）
• footer- 定义页脚文档或部分
• details- 定义用户可以根据需要打开和关闭的其他详细信息
• summary-定义元素的标题

如何创建超链接

• <a>标签的属性

• href = "外部链接"
• title = "鼠标停留时显示的文本信息，最好写上"
• target = "去往的标签页如_blank空白标签页，可不写，则会进入此标签页"

嵌套cite元素可以使字体呈斜体

target的值

• _self 默认，在单击时的同一窗口/选项卡中打开文档
• _blank 在新窗口或选项卡中打开文档
• ​_parent 在父框架中打开文档
• ​_top 在整个窗口中打开文档

普通链接

<p>A link to my <a 
href="https://www.bilibili.com/" 
title="BiliBili" 
target="_blank"><cite>favorite website</cite></a>.</p>

效果

A link to my favorite website.

图像链接

若找到图片，则会显示图片，点击会进入a元素内的网站，若未找到对应图片则会显示alt的值

<a href="https://bilibili.com/">
<img src="bilibili.gif" alt="bilibili" style="width:21px;height:21px;">

邮箱链接

<a href="mailto:someone@example.com">Send email</a>
<!--mailto的值为邮箱地址-->

我的邮箱 Send email

书签&锚点

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

效果

Jump to Chapter 4

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

如何创建不同文本

1.dl块引用,dt类似标题,dd标题下的文本

<dl>
  <dt>ACGN</dt>
  <dd>
    Animation(动画) Comic(漫画)
  </dd>
  <dd>
    Game(游戏) Novel(小说) 
  </dd>
</dl>  

效果

ACGN

Animation(动画) Comic(漫画)

Game(游戏) Novel(小说)

2.无序列表ul,li

<ul>
<li>p元素是块级元素，会自动将光标移至下一行类比“\n”</li>
<li>而em是内联元素即不会换行</li>
<li>em斜体</li>
<li>code元素是计算机代码文本</li>
<li>strong元素可以使字体加粗</li>
<li>a元素的内容里用cite元素可以使字体呈斜体</li>
<li>sub 下标,sup 上标</li>
<li>&LT;br /&gt换行类似“\n”</li>
</ul>

显示效果见目录 - 简单标签

3.有序列表ol，li

有序即加了1234等数字表示顺序，语法相同

4.块引用和行内引用

可以使其内容内缩进
blockquote元素，有cite属性，值为要引用的来源，可以是网站
q元素，行内引用，也有cite属性

<p>
  According to the
  <a href="/zh-CN/docs/Web/HTML/Element/blockquote">
    <cite>MDN blockquote page</cite></a
  >:
</p>

<blockquote
  cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/q"
    >intended for short quotations that don't require paragraph breaks.</q
  >
  — <a href="/zh-CN/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a
  >.
</p>

效果

According to the MDN blockquote page: The HTML

Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. The quote element — — is intended for short quotations that don't require paragraph breaks. — MDN q page.

5.上标与下标

sup和sub标签

6.缩略语

abbr元素，属性title="全写的名字"

<abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr>

7.时间和日期

time元素，属性datetime="2023-01-20T19:30:01.856+01:00"

time标签里放时间的其他表述，而datetime里面的时间必须是如上格式，可以不用太精确，适当省略

<time datetime="2023-0120T19:30">7.30pm, 20 january 2023</time>

如何嵌入图片和视频

嵌入图片

<figure>
  <img
    src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
    alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
    width="400"
    height="341" />
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

嵌入视频和音频

1. autoplay使视频立即播放
2. loop循环播放
3. muted关闭声音
4. poster封面

<video src="01-数据通信基础.mp4"controls>
<video controls
		width="400"
		height="400"
		autoplay
		loop
		muted
		poset="网络.png">
  <source src="01-数据通信基础.mp4" type="video/mp4" />
  <source src="01-数据通信基础.webm" type="video/webm" />
<audio src="viper.mp3">
<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

通过嵌入一个网页(使用iframe元素)

属性

• src属性
• 值为想要引入的网页
• style属性
• border的值边框大小，样式，颜色，若为none则无边框
• title属性
• height属性
• 网页高度
• width属性
• 网页宽度
  链接url后加autoplay=1&mute=1可指定自动静音播放
  再&上playlist=url&loop=1可循环播放，=0为播放一次

<iframe src="//player.bilibili.com/player.html?aid=19390801&bvid=BV1bW411n7fY&cid=31621681&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

效果

如何改变文本样式

• 可以在head元数据中使用style标签， 再创建一个类 “.”+“创建的名字”(最好语义化，容易理解) ，再接一个大括号里面放各种css属性如border，每个属性间用“;”隔开，以后在body中的标签只要class="创建的名字"，即可使该标签内的内容变成所需要的样式
• 在head元数据内用布局标签(见html布局中的元素)直接接大括号其他同理
• 在body中的标签中添加style属性，再使用css中的属性如border
• 创建一个css的文件，用css修改，对应标签+大括号+css中的属性 或“.”+“创建的名字”+大括号+css中的属性，之后在head中link该css文件即可

常用样式

• list-style
  可以指定li标签的圆点样式 如none为去掉，还有方点等等
• margin指周围空白的大小px(margin:top right bottom left)
  margin-top,right,bottom,left
• padding文本与边框的距离px
• width,height单位px，或用百分比(继承父级)
• letter-spacing字边距单位px
• text-intent首行空几个em
• display
  flex
• justify-content，和display放一起
  center,left,right,space-between(中心居中，两侧顶格)
• background背景颜色

• <h1 style="background-color:powderblue;">This is a heading</h1>
  <p style="background-color:tomato;">This is a paragraph.</p>
  

• color文本颜色

• <h1 style="color:blue;">This is a heading</h1>
  <p style="color:red;">This is a paragraph.</p>
  

• font-family字体

• h1 style="font-family:verdana;">This is a heading</h1>
  <p style="font-family:courier;">This is a paragraph.</p>
  

• font-size大小

• <h1 style="font-size:300%;">This is a heading</h1>
  <p style="font-size:160%;">This is a paragraph.</p>
  

• font-weight粗细(1,1000)
  normal，bold
• test-align文本对齐
  left，right，center

• <h1 style="text-align:center;">Centered Heading</h1>
  <p style="text-align:center;">Centered paragraph.</p>
  

• border边框
  可直接用border，也可用border-width，还可以单独指定一边框的样式border-top:width style color

  border:width style color
         宽度   样式  颜色

• border-width的值

  thin ( 细边框 ) , medium ( 默认,中等边框 ) , thick ( 粗边框 )length (允许自定义边框宽度 )

  值也可为数，单位px(像素点)或百分比(与父元素相比)

  border-style的值

  none ( 无边框 ) , dotted ( 点状边框 ) , dashed ( 虚线 ) , solid ( 定义实线 ) double ( 双线, 宽度等于 border-width 的值)groove ( 3D 凹槽边框 ) , ridge ( 3D 垄状边框 ) , inset ( 3D inset 边框) outset ( 3D突出边框 ) hidden 与 "none" 相同

  border-color的值

  所有颜色的值

  <h1 style="border:2px solid Tomato;">Hello World</h1>
  <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
  <h1 style="border-width:2px;
  border-style:solid 
  border-color:Violet;">Hello World</h1>
  

  颜色的多种指定方式

  1. 直接用blue，red之类的值，共140种
  2. RGB(红,绿,蓝)
     红，绿，蓝的值为0到255 共256^3=16777216种 如RGB(0,0,255)等价于blue
  3. #加三个十六进制数
     #rrggbb红绿蓝, #000000到#ffffff, 如#0000ff等价于blue
  4. hsl(色调,饱和度,亮度) 色调为0到360的度数
     0为红色，120是绿色，240是蓝色
     饱和度是一个百分比值
     0% 表示灰度，100% 表示全色
     饱和度为0无论调什么颜色都是灰色
     亮度也是一个百分比值
     0% 为黑色，100% 为白色 颜色鲜艳的程度

  如何创建一个表格

  表格组成

  table元素表示一个表格 tr元素为表行 th元素为表头 td元素为每一行的单元格
  表格相当于将每个元素都加了个默认的solid边框， 里面嵌套 tr元素， 每一个 tr为一行， tr中嵌套 td元素， td内容为一行中的每个元素， 嵌套 th代表表头 (可以不用，表头中的元素会自动居中，非表头元素不居中)

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>
  

  效果(不准确，真实效果请自行在浏览器中查看)

  Company	Contact	Country
  Alfreds Futterkiste	Maria Anders	Germany
  Centro comercial Moctezuma	Francisco Chang	Mexico

  表格样式

  前面说到solid边框，当然也可以修改表格样式， 通过运用之前的style样式相关知识即可