Web前端（第一章）HTML学习笔记

HTML

HyperTextMarkupLanguage:超文本标记语言
纯文本: 指只包含文本内容不包含其它任何信息
超文本: 指不仅仅是纯文本,还包括字体效果和多媒体信息(音频/视频/图片)
ML标记语言: 指以一对尖括号表示元素的语言格式
意义：学习HTML实际上就是学习有哪些HTML标签, 以及这些标签的使用方式
HTML常见标签
一、常见文本相关标签
1.内容标题h1-h6
显示特点: 数值越小字体越大, 自带加粗和上下间距,独占一行

• 段落标签p
  显示特点: 独占一行 自带上下间距
• 文本相关
  加粗b
  斜体i
  小字small
  下划线u
  代码样例：
  内容标题代码样例：

<!--常见文本相关标签-->
<!--内容标题-->
<!--显示特点:数值越大，字体越小， 自带加粗，上下间距,独占一行-->
<!--align 对齐方式  center居中 right右对齐-->
<h>文本标签</h>
<h1 align = "center">文本标签</h1> 
<h1 align = "right">文本标签</h1> 
<h1>文本标签</h1> 
<h2>文本标签</h2> 
<h3>文本标签</h3> 
<h4>文本标签</h4> 
<h5>文本标签</h5> 
<h6>文本标签</h6>

段落标签代码样例：

<!-- 显示特点: 独占一行 自带上下间距 -->
<!--段落标签-->
<!--align 对齐方式  center居中 right右对齐-->
<p align = "center">hello,world,html</p>
<p align = "right">hello,world,html</p>
<p>hello,world,html</p>

文本字体相关效果代码样例

<!--字体相关-->
<!--在html中如果需要换行需要使用br标签 -->
<b>字体加粗</b><br>
<i>字体斜体</i><br>
<small>字体变小</small><br>
<u>下划线</u>

二、列表标签
1.无序列表 ul 和li
2.有序列表 ol和li type类型 start起始值 reversed降序

• 列表嵌套 有序和无序可以任意无限嵌套
  代码样例：
  无序列表样例代码：

<!--type="circle" 空心圆，去掉这个则是实心圆-->
<ul type = " ">
    <li>Java</li>
    <li>C</li>
    <li>C++</li>
    <li>go</li>
    <li>python</li>
</ul>

有序列表样例代码

<!--i罗马数字排序,1阿拉伯数字排序,a安装字母排序-->
<!--默认为阿拉伯数字排序-->
<ol type="a">
    <li>Java基础语法</li>
    <li>面向对象</li>
    <li>Api</li>
    <li>线程</li>
</ol>

有序和无序标签的互相嵌套代码样例：

<ul>
    <li>凉菜
        <ol>
            <li>拍黄瓜</li>
            <li>花毛一体</li>
            <li>东北大拉皮</li>
        </ol>