HTML

HTML

Hyper TextMarkupLanguage的缩写是HTML

大白话：向网页上展示内容

专业术语：超文本标记语言（文字，图片，视频，音频，超链接）

标记：也叫做标签，用<>括起来的就是标记

有两种类型的标记：

双标记 ：<标记名></标记名>
单标记 : <标记名 />

每一个标记，不管是单标记还是双标记都是有属性，属性是由属性名和属性值组成，属性名和属性值是成对出现

属性是对标记的描述

双标记 ：<标记名 属性名="属性值" 属性名="属性值"></标记名>
单标记 : <标记名 属性名="属性值" 属性名="属性值" />

vscode中浏览器打开页面

下载插件

 

open in other (default) browser alt+B

HTML标记

文本标题

    <h1>最重要的标题一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

特点： 独占一行，字体加粗，自带样式，级别越高字体大小越小

段落标记

<p>香港回顾25周年</p>

特点：自带样式，独占一行

空格

 

特殊符号

 &lt;   <
 &gt;    >
 &yen;   ¥
 &copy;   ©

注释

<!-- 注释内容-->     ctrl+/
​
//注释标记中不能嵌套注释标记

其它标记

    <u>u标记--下划线</u>
    <b>b标记--加粗</b>
    <i>i标记--倾斜</i>
    <strong>strong标记---强调加粗</strong>
    <em>em标记--倾斜</em>

特点:多个在一行显示

换行标记

<br />

水平线

<hr/>

案例

超链接

 <!-- 超链接 
    href  跳转的地址  如果是网上地址一定要加 http
    target    _blank 在新窗口打开   _self  (默认不写就是默认) 在当前窗口打开
    
    -->
    <a href="http://www.baidu.com" target="_self">百度</a>
    <br />
    <a href="./news.html" target="_blank">news</a>

图片

img

<!-- 
      图片标记
      src  图片的路径
      width   设置图片宽度
      height  设置图片高度
      title  鼠标放到图片上时显示标题    
      alt  网速慢，或者图片不小心删除，影响用户体验  加载慢，或者图片不存在，使用alt属性值来提示
           利于搜索引擎优化，因为搜素引擎是无法直接读取图像的信息的,alt可以为其提供文字信息所以对搜索引擎
​
      特点：多个占一行，可以设置宽高
     -->
    <img
      src="./img/bd2.png"
      width="200px"
      title="总统"
      alt="这是一张总统照片"
    />
​
    <img src="./img/logo/logo.png" width="150" />

列表标记

有序列表

 <!-- 有序列表
      ol中只嵌套li
     特点：独占一行 ，自带样式   
    -->
    <ol>
      <li>列表内容 1</li>
      <li>列表内容 2</li>
      <li>列表内容 3</li>
    </ol>

 

无序列表

 <!-- 无序列表
       ul中只嵌套li
       特点:独占一行，自带样式
    -->
    <ul>
      <li>无序列表内容</li>
      <li>无序列表内容</li>
      <li>无序列表内容</li>
    </ul>

 

自定义列表

    <!-- 自定义列表 
    特点  独占一行
  -->
    <dl>
      <dt>中国的城市</dt>
      <dd>北京</dd>
      <dd>上海</dd>
      <dd>广州</dd>
      <dt>美国的城市</dt>
      <dd>纽约</dd>
      <dd>华盛顿</dd>
    </dl>

div标记

//特点  独占一行   不自带样式
<div>div</div>

span标记

//特点:多个占一行  不自带样式    
    <span>span标记</span>
    <span>span标记</span>
    <span>span标记</span>

表格标记

 <!-- table 
    属性： width：宽度    
    border边框   
    cellspacing单元格和单元格之间的距离
    cellpadding 内容和单元格之间的距离
   -->
    <table width="500" border="1px" cellspacing="0">
      <caption>
        <h1>表格标题</h1>
      </caption>
      <!-- tr  行
       height 高度
       align 内容水平对齐方式  居中center  居左 left 居右right
       valign 垂直方向对齐方式  middle top bottom
      -->
      <tr height="60px" align="right" valign="bottom">
        <td>单元格</td>
        <td>单元格</td>
      </tr>
      <tr>
        <td width="100" height="80" align="right" valign="bottom">xx</td>
        <td>xx</td>
      </tr>
    </table>
​

表格合并

 

表单标记

向网页上输入内容

文本框，密码框，单选框，复选框，按钮，下拉列表，文本域

  <!-- div和span -->
    <div>div标记</div>
    <div>div标记</div>
    <span>span标记</span>
    <span>span标记</span>
    <!-- 表单标记 -->
    <!-- 
​
  name  定义名字
  value 给文本框/密码框输入的值
  disabled  是否禁用  布尔类型属性，写上就有效(禁用)，不写无效
 -->
    <div>文本框: <input type="text" name="user" value="内容" /></div>
​
    <div>
      密码框: <input type="password" name="pass" value="123" disabled />
    </div>
​
    <!-- 
      name  名字
      value  值
      checked      默认选中
     -->
    <div>
      性别： <input type="radio" name="sex" value="男" checked />男
      <input type="radio" name="sex" value="女" />女
    </div>
​
    <!-- 下拉列表
    name  名字
    value  值
    selected  默认选择
    
    -->
    <select name="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州" selected>广州</option>
    </select>