HTML入门1

最新推荐文章于 2024-10-16 11:23:07 发布

琼霄

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量323

点赞数

文章标签：前端 HTML

本文链接：https://blog.csdn.net/qq_28785209/article/details/79648084

版权

1 HTML基本概念

HTML即超文本标记语言，由一些标签来将网页的内容表示出来。不需要编译，直接由浏览器执行，其实质是一个后缀名为.html或者是.htm的文本文件。对大小写不敏感。

2 基础语法

HTML基本结构

<!DOCTYPE html><!-- 声明文档类型版本，不属于HTML标签 -->
<html lang="en">
<head><!-- 网页头部信息，浏览器不显示 -->
    <meta charset="UTF-8"><!-- 编码形式是UTF-8 支持中英日韩文等，还有gb2312支持简体中文-->
    <title>网页标题</title>
</head>
<body><!-- 网页主体，所有能看到的部分都写在body里 -->
    网页主体内容
</body>
</html>

HTML标签：一般成对出现，分为开始标签（如<p>）和结束标签（如</p>）。也有单标签，即只有结束标签（如</hr>）。
HTML元素：从开始标签到结束标签的所有代码，称为HTML元素。
标签属性：可以在开始标签里定义元素的属性。
语法：<标签名属性名1=”值” 属性名2=”值”… … >… …</标签名>

3 常用标签

3.1 文字和段落

标题： h1~h6
段落： p
align对齐属性值：可以选择p标签里的段落内容的对齐方式

换行： br/ 是单标签
空格：  
预格式： pre 保持编辑器里的格式，在编辑器里是什么格式，在浏览器中显示的就是什么格式，不必再输入空格  和换行标签。
水平线： hr/ 是单标签

3.2 格式

斜体： i 或 em
粗体： b 或 strong
上标： sup
下标： sub
特殊符号：

3.3 列表

无序列表基本语法

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

ul的type属性值：可以设置列表项前面的样式，默认样式是实心圆点

有序列表基本语法

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

ol的type属性值：可以设置列表项前面的样式，默认样式是数字

定义列表基本语法
注意：dl、dt、dd标签组合使用。dt和dd是同级标签。dd前面自动缩进。

<dl>
    <dt>列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    <dt>列表项</dt>
    <dd>列表项描述</dd>
    ...
</dl>

列表标签使用场景：网站导航条、新闻列表、电商网站商品分类、商品排行榜等。
注意，在实际开发中，往往需要把ul和ol前面的默认编号去掉，不使用type属性而使用图片代替。

3.4 图片

img是单标签，基本语法：

<img src="图片链接地址" alt="当图像无法显示时显示的文本">

img属性值：

绝对路径：从盘符开始写起，写到需要的图片为止。
相对路径：从当前正在编辑的HTML文件开始写起，写到需要的图片为止。
当图片与当前HTML文档在同一目录中，直接写即可。<img src="1.jpg"/>
当图片在当前HTML文档的上一级一目录中，用../定位到上级目录。<img src="../1.jpg"/>
当图片在当前HTML文档的下一级一目录中，用下一级的文件夹名定位到下一级文件夹。<img src="images/1.jpg"/>
开发中要用相对路径，不用绝对路径。因为一旦整个网站的文件夹移动了位置，用绝对路径方式就会导致图片加载失败。

宽和高如果设置成定值，图片大小固定为该定值；如果设置成百分比，该百分比是以图片的父容器大小为基准的。

3.5 超链接

基本语法：

<a href="链接地址">内容</a>

其中，当链接到同一个网站内时，使用相对路径；当链接到外部网站时，使用绝对路径。

target属性：_self是默认值，效果是在当前窗口打开新的页面； _blank的效果是创建新的窗口打开新的页面。
title属性：当鼠标移动到超链接上时的提示文字。

同一页面内的锚链接：当一个网页内容太多，需要先定义一个目录，然后点击目录跳转到页面的相应位置。锚链接实现在同一个页面内跳转到不同的位置。
首先在页面内需要跳转到的地方定义锚点，用到的是a标签的name属性。接着在页面最上方添加目录，把相对应的锚点绑定到目录上，用到的是a标签的href属性，属性值是#号加上name的值。点击目录，目录就可以根据name属性跳转到相应位置了。
基本语法：

<a name="top"></a>这里是顶部<br/><!--定义锚点位置-->
<!--目录部分-->
<a href="#fruit">水果</a><br/>
<a href="#vegetable">蔬菜</a><br/>
<a href="#sport">运动</a><br/>

<!--内容部分-->
<a name="fruit"></a><!--定义锚点位置-->
<h4>水果</h4>
<ul>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
</ul>
<a href="#top">返回顶部</a>

<a name="vegetable"></a><!--定义锚点位置-->
<h4>蔬菜</h4>
   <ul>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
       <li>西红柿</li>
   </ul>
   <a href="#top">返回顶部</a>

<a name="sport"></a><!--定义锚点位置-->
<h4>运动</h4>
<ul>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
    <li>游泳</li>
</ul>
<a href="#top">返回顶部</a>

不同页面的锚链接：如果需要点击第一个网页的某个目录，跳转到另一个网页的某个位置，则需要在href属性的值的#号前面加上跳转的网页的名称（当两个网页在同一级目录下时）。
基本语法：例子中的目录在index.html文件里，而跳转到index2.html页面的不同位置

<!--以下内容写在index.html文件中-->
<a name="top"></a><!--定义锚点位置-->
这里是顶部<br/>
<!--目录部分-->
<a href="index2.html#fruit">水果</a><br/>
<a href="index2.html#vegetable">蔬菜</a><br/>
<a href="index2.html#sport">运动</a><br/>

<!--以下内容写在index2.html文件中-->
<a name="fruit"></a><!--定义锚点位置-->
    <h4>水果</h4>
    <ul>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
    </ul>
    <a href="index.html#top">返回顶部</a>

    <a name="vegetable"></a><!--定义锚点位置-->
    <h4>蔬菜</h4>
    <ul>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
        <li>西红柿</li>
    </ul>
    <a href="index.html#top">返回顶部</a>

    <a name="sport"></a><!--定义锚点位置-->
    <h4>运动</h4>
    <ul>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
        <li>游泳</li>
    </ul>
    <a href="index.html#top">返回顶部</a>

邮件应用：给文字添加邮件链接，点击链接文字时即可打开电脑上的邮件发送软件进行发送。
基本语法：

<a href="mailto:1234567@qq.com">意见反馈</a>

文件下载：给文字添加下载链接，点击链接文字即可下载对应的文件。href属性直接写该文件所在位置的路径。注意文件一定是要压缩的，如果不压缩，点击链接文字会直接打开该文件而不是下载。
基本语法：

<a href="image.zip">点我下载</a>

琼霄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫