HTML+CSS学习笔记

发布时间 2023-09-17 15:32:29作者: 小xxxx程序员
HTML骨架:(VS Code 可以快速生成骨架:在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键)
  html:整个网页
  head:网页头部,用来存放给浏览器看的信息,例如 CSS
  title:网页标题
  body:网页主体,用来存放给用户看的信息,例如图片、文字
 
常用标签:
  1、标题标签:(文字加粗、字号逐渐减小、独占一行(换行))  
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>.
  2、段落标签:(独占一行、段落之间存在间隙)
    <p>段落</p>
  3、换行和水平线:
    <br>、<hr>
  4、文本格式化标签:
    <strong></strong>:加粗
    <em></em>:倾斜
    <ins></ins>:下划线
    <del></del>:删除线
  5、图像标签:(在网页中插入图片)
    <img  src="图片的 URL" alt=“替换文本” title=“提示文本”>:src用于指定图像的位置和名称,使用相对路径
    图像属性:
      1、alt:替换文本。图片无法显示的时候显示文字
      2、title:提示文本。鼠标悬停在图片上面的时候显示的文字
      3、width:图片的宽度。值为数字,没有单位
      4、height:图片的高度。值为数字,没有单位
  6、超链接标签:(点击跳转到其他页面)
    <a href="https://www.baidu.com">跳转到百度</a>
    属性:
      1、href :href 属性值是跳转地址,是超链接的必须属性。开发初期,不确定跳转地址,则 href 属性值写为 #,表示空链接,页面不会跳转,在当前页面刷新一次
      2、target:超链接默认是在当前窗口跳转页面,添加 target="_blank" 实现新窗口打开页面。
  7、音频:(插入一段音频)
    <audio src="音频的 URL" loop=“loop” autoplay=“autoplay”></audio>
    属性:
      1、src:音频URL,必备属性
      2、control:显示音频控制面板
      3、loop:循环播放
      4、autoplay:自动播放
  8、视频:(插入一段视频)
    <video src="视频的 URL"></video>
    <video src="./media/vue.mp4" controls loop muted autoplay></video>
    属性:
      1、src:视频URL,必备属性
      2、control:显示视频控制面板
      3、loop:循环播放
      4、autoplay:自动播放
      5、muted:静音播放
  9、列表
    1、无序列表
      布局排列整齐的不需要规定顺序的区域。
      标签:ul 嵌套 liul 是无序列表,li 是列表条目。
      
 1 <ul>
 2   <li>第一项</li>
 3   <li>第二项</li>
 4   <li>第三项</li>
 5   ......
 6 </ul>
 7 <ol>
 8   <li>第一项</li>
 9   <li>第二项</li>
10   <li>第三项</li>
11   ......
12 </ol>
View Code
     2、有序列表
      作用:布局排列整齐的需要规定顺序的区域。
      标签:ol 嵌套 li,ol 是有序列表,li 是列表条目。
 
1 <ol>
2   <li>第一项</li>
3   <li>第二项</li>
4   <li>第三项</li>
5   ......
6 </ol>
View Code
     3、定义列表
      标签:dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述 / 详情。