ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【学习笔记】HTML入门

2022-09-12 11:30:09  阅读:251  来源: 互联网

标签:一一 入门 四四 标签 五五 笔记 HTML nbsp 跳转


【学习笔记】HTML入门

网页基本信息

  1. 在html中注释

    • 方式是<!-- -->

    • 快捷键:ctlr + /

  2. DOCTYPE:告诉浏览器,我们使用的规范,默认是html5

  3. html标签,我们所有的代码必须在这个标签中,否则无效

  4. title标签是网页的标题

  5. meta标签是描述性标签,用来描述我们网站的一些信息,一般用来做SEO

    • seo是搜索引擎优化,我们可以在meta中定义keywords,这样用户就能通过这写关键字搜索到我们的网站

 

网页基本标签

  1. 标题标签

<!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>

标签从一级到六级,从六级之后就没有了,往后就是普通文本

 

  1. 段落标签 <p>

<p>第一段,一一一一一一一一一    一一一一一一一</p>
<p>第二段,二二二二二二二二二    二二二二二二二</p>
<p>第三段,三三三三三三  三三三</p>
<p>第四段,四四四四四四  四四</p>
<p>第五段,五五五五五五五五    五五五五五五五五</p>

image-20220909103240694

 

  1. 换行标签

第一段,一一一一一一一一一    一一一一一一一</br>
第二段,二二二二二二二二二    二二二二二二二</br>
第三段,三三三三三三  三三三</br>
第四段,四四四四四四  四四</br>
第五段,五五五五五五五五    五五五五五五五五</br>

image-20220909103737372

换行标签比段落标签要紧凑

 

  1. 水平线标签 <hr/>

  2. 字体样式标签

    • 粗体:<strong></strong>

    • 斜体:<em></em>

  3. 特殊符号

    • 空格:&nbsp;

    • 大于号:&gt ;

    • 小于号:&lt;

      空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

可以先输入一个&,然后再去选则自己想要的符号

 

 

图片标签<img>

  • 属性:

    • src:图片路径,推荐使用相对路径 【必填】

    • alt:如果图片没有加载出来,就显示这个文字 【必填】

    • title:悬停文字,当鼠标悬停在这张图片上时,显示的文字

    • width:设置图片的宽度

    • height:设置图片的高度

     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../resources/image/spring1.png" alt="图片1" title="悬停文字" width="300" height="300">
​
</body>
</html>

image-20220909111014572

 

 

超链接标签<a></a>

  • 属性:

    • herf:表示要跳转到那个页面 【必填】

    • target:表示窗口在哪里打开

      • _blank :在新标签中打开

      • _self:在当前网页打开

  • 可以在a标签中嵌套一个图片标签,点击图片就会跳转

<body>
<a href="http://www.baidu.com">跳转到百度</a>
<a href="1.我的第一个网页.html" target="_blank">跳转到网页一</a>
​
<a href="http://www.baidu.com" target="_blank">
    <img src="../resources/image/spring1.png" alt="图片1" title="悬停文字" width="300" height="300">
</a>
</body>

 

  • 锚标签

    • 需要一个锚标记,要有name属性

    • 跳转标签中,herf属性是 # + 要跳转的位置的name

<a name="top">顶部</a>
.
.
.
<a href="#top">回到顶部</a>

现在name属性已经废弃,可以用id属性来代替name属性

 

除了一个页面间的锚标记,页面之间也可以通过锚标记跳转

<a href="超链接标签.html#down">跳转到页面4的底部</a>
<a id="down">底部</a>

 

  • 功能性链接

    • 邮件链接:mailto:

    • qq链接:在qq推广的官网,可以生成qq的超链接

 

行内元素和块元素

  • 块元素:

    • 无论内容多少,该元素独占一行

    • (p、h1-h6)

  • 行内元素:

    • 内容撑开宽度,左右都是行内元素的可以排成一行

    • (a、strong、em)

 

列表

  • 有序列表<ol>,里面的每一项用<li>

<ol>
    <li>java</li>
    <li>python</li>
    <li>c</li>
</ol>

 

  • 无序列表<ul>,里面的每一项用<li>

  • 自定义列表,可以有表头

    • < dl > :表示自定义列表

    • < dt >:表示表头

    • < dd >:表示每一项内容

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c</dd>
​
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
</dl>

image-20220909115929778

表格

标签<table>

在table中,行用<tr>,列用<td>

table中有一个属性是border,用来设置表格的边框的大小

跨列:在td中,有属性叫做colspan,设置成几就是跨几列

跨行:在td中,有属性叫做rowsapn,设置成几就是跨几行

<table border="1px">
  <tr>
    <td colspan="3">学生成绩</td>
  </tr>
  <tr>
    <td rowspan="2">狂神</td>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td rowspan="2">秦将</td>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td>语文</td>
    <td>100</td>
  </tr>
​
</table>

image-20220912112332510

标签:一一,入门,四四,标签,五五,笔记,HTML,nbsp,跳转
来源: https://www.cnblogs.com/wztblogs/p/16685790.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有