HTML基础

最新推荐文章于 2024-07-25 11:26:35 发布

叙白大人

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量882

点赞数 16

文章标签： html 前端

本文链接：https://blog.csdn.net/Nieweishan/article/details/134896309

版权

一.html结构

1.认识html标签

HTML 代码是由“标签”构成的；
例如：

<body> hello</body>
<body id="myId">hello</body>

其中body为标签名，为开始标签，为结束标签，少数标签为单标签。例如。开始标签与结束标签之间写的是标签内容（hello).
开始标签中也可能带属性，id 属性相当于给这个标签设置了一个唯一的标识符。

2.html文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

其中html是根标签，head是页面属性，body是页面上显示的内容，title是页面标题。
在这里插入图片描述

3快速生成代码框架

在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件. 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译). 描述页面的字符编码方式. 没有这一行可能会导致中文乱码. name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域. content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放.

二.HTML常见标签

1.注释标签

<!-- 我是注释 -->
<!-- <body> hello</body>-->

ctrl + / 快捷键可以快速进行注释/取消注释.

2.标题标签

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

从 h1 - h6. 数字越大, 则字体越小.

3.段落标签

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落。
可以把他放在

<p>这是一个段落</p>

p标签和p标签之间会有一个间隙，段落前面没有缩进，会根据浏览器宽度来排版，html 内容首尾处的换行, 空格均无效. 在 html 中文字之间输入的多个空格只相当于一个空格. html 中直接输入换行不会真的换行, 而是相当于一个空格.

4.换行标签

是一个单标签，不会留有间隙

5.格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

在这里插入图片描述

6 图片标签

img 标签必须带有 src 属性. 表示图片的路径.

<img src="路径">

可以是网络路径，绝对路径和相对路径

img的其他属性：

1 alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
2 title: 提示文本. 鼠标放到图片上, 就会有提示.
3 width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
4 border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

注意：

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以换行.
属性之间不分先后顺序
属性使用 “键值对” 的格式来表示.

7.超链接

属性：

1.herf：必须具备, 表示点击后会跳转到哪个页面.
2.target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

<a href="http://www.baidu.com">百度</a>

链接的几种形式：

1.外部链接: href 引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

2.内部链接: 网站内部页面之间的链接. 写相对路径即可.

同一目录下的两个html文件
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

3.下载路径：herf对应路径是一个文件。

<a href="test.zip">下载文件</a>

4.描点链接:可以快速定位到页面中的某个位置.

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br> 
...
</p>
<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
    ...
</p>

在这里插入图片描述

8.表格标签

基本使用

属性

这些属性都要放到 table 标签中:
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" 
height="500">
 <tr>
        <td>姓名</td>
        <td>性别</td>
       <td>年龄</td>
  </tr>
    <tr>
      <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

在这里插入图片描述

9 from标签

叙白大人

关注

16
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
HTML基础

p标签和p标签之间会有一个间隙，段落前面没有缩进，会根据浏览器宽度来排版，html 内容首尾处的换行, 空格均无效. 在 html 中文字之间输入的多个空格只相当于一个空格. html 中直接输入换行不会真的换行, 而是相当于一个空格.2.target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.其中html是根标签，head是页面属性，body是页面上显示的内容，title是页面标题。1 alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
复制链接

扫一扫