初识HTML

最新推荐文章于 2024-10-17 06:11:29 发布

小怪不怪

最新推荐文章于 2024-10-17 06:11:29 发布

阅读量199

点赞数 2

分类专栏： html+css 文章标签： html

本文链接：https://blog.csdn.net/hxtxsdcxy/article/details/109212236

版权

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这次的笔记内容主要为10.17宏奕工作室培训的心得和问题。

什么是visual studio code？

简称vscode，是一个编写web的编辑器软件。可以安装各种插件，支持多种语言和文件格式的编写。

vscode的安装和设置

vscode在官网下载，下载安装后在应用商店下载Chinese language插件重启即可设置为中文简体模式。在文件中的首选项下的颜色主题，可以更改主题为浅色（白色）。

怎么创建html文件夹？

在桌面新建一个文件夹以英文名命名，用vscode打开，在vscode的文件夹处点击新建文件，命名以.html为文件后缀名。进入文件后，输入！+tab可生成一个html文档，Ctrl+S可保存。返回桌面打开文件夹，看到新建文件，用浏览器打开（用Chrome浏览器较好）。此时已成功新建。

网页制作三结构的初步理解

网页制作分为UI、前端、后端。UI主要偏向页面设计，前端偏向页面制作（代码编写完成）是用户所能看到的展示界面，后端偏向数据逻辑功能，是用户不可见的。

html的框架

新建文件后，输入！+tab会出现一整个框架，主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。

只有使用<!DOCTYPE>声明，浏览器才能将该网页作为有效文档并进行解析。

<html>标志文档的开始</html>标记文档的结束。（切记“/”不可少！！！）他们之间是文档的头部和主体内容。

<head>跟在<html>后，封装其他文档头部的标记，如<title>,<meta>,<link>等。（注意：一个文档只能含有一对<head>标记！！）

<body>内为浏览器中显示的所有文本图像音频视频等最终展示给用户看的信息。（一个文档只能含有一对，且与头部标记为并列关系。）

html内容之语法

1.标签不区分大小写

2.属性值可不使用引号（最好使用）

3.部分属性的属性值可以省略

4.<>中的表示某个功能的编码命令，称为标签或元素

5.html标记分为双标记<标记名>标记名</>，单标记</标记名>，注释标记（快捷键Ctrl+/）被标记则不会再浏览器中显示

6.标记可以嵌套，如<p>中可包含<strong>标记。

7.文档头部相关标记有<title>,<meta/>,<link>,<style>
<title>定义网页版标题

<meta/>（单标记）定义页面的元信息，本身不含内容，加一个属性定义相关参数。
如设置网页关键字<meta name="keywords“ content="xxxx，xxxx" />，设置网页描述<meta name="description" content=”xxxxx，xxxx" />

<link>引用外部文件（可使用多个标记引用多个文件）<link rel="stylesheet" type="text/css" href="style.css"/>

rel两个文档的关系，type外部文档类型，href外部文档的地址

<style> 语法格式<style 属性=”属性值”>样式内容</style>

html内容之文本控制标记

标题标记：<hn align="对齐方式">标题文本</hn>

段落标记;<p align="对齐方式">段落文本</p>
水平线标记：<hr 属性="属性值"/> 输入一个<hr/>就添加了一条默认样式水平线（属性值包括align，size，color，widith）
换行标记：<br/>
粗体： <b></b>定义文本粗体、<strong></strong>定义强调文本
斜体：<i></i>定义斜体字、<em></em>定义强调文本
删除线：<del></del>
下划线：<ins></ins>
高亮标记：<mark>

在这里插入图片描述

html内容之图像标记

图像标记：<img src="img/去水印.jpg" alt="报名系统图片" title="快来报名噢"> src属性用于指定图像文件的路径和文件名。alt属性为替换文本，在图片无法显示时告诉用户图片内容。title属性为鼠标悬停图像时的提示文字。

绝对路径：带有盘符的路径或完整的网络地址。（不推荐）
相对路径：以html网页文件为起点，通过层级关系描述图像的位置。（操作方法：将图片拉倒同一个文件夹下，复制相对路径即可）（若位于下一级文件夹则输入文件夹名/文件名，若位于上一级文件夹则输入../文件名，上两级则../../文件名）

html内容之超链接标记

创建超链接：用<a></a>标记环绕需要被链接的对象，

如<a href="http://www.baidu.com/" target="_self" target="_self">百度一下啊，原窗口打开</a>

target可取_self为在原窗口中打开，_blank为在新窗口中打开

锚点连接：快速定位到目标内容。

如

<li>《a href="#one">平面广告设计</a》</li>

     <h3 id="one">平面广告设计</h3>

    <p>课程涵盖 Photoshop 图像处理、Illustrator 图形设计、平面广告创意设计、字体设计与标志设计。</p>

html内容之列表

ul元素：无序列表<ul> <li>列表项1</li> ...... </ul>
ol元素：有序列表<ol> <li>列表项1</li> ......</ol>
dl元素：定义列表，对术语或名词进行解释和描述

   <dl> <dt>名词1</dt>

         <dd>名词1解释1</dd>

         <dd>名词1解释2</dd>

         ...

     </dl>

html内容之页面交互

 1. details和summary元素：点击标题时会显示或隐藏details中的其他内容

        <details>

        <summary>选择</summary>

        <ul>

          <li>1.是</li>

          <li>2.否</li>

        </ul>

      </details>

 2. progress元素 ：进度条 

    <p><progress value="50" max="100" ></progress></p>

 3. meter：有最小最大（血条）

    <p>

      小红：<meter value="65" min="0" max="100" low="60" high="80" title="65

       分" optimum="100">65</meter><br/>

    </p>

html内容之全局属性

    1. draggable属性：<article draggable="faluse">文字 </article>，图片 <img src="./tong/报名系统.png" draggable="true"

    2. hidden属性：属性为true时会被隐藏，反之显示

    3. spellcheck属性：对input和textarea文本输入框文本内容进行拼写和语法检查，值为true时检测输入框中的值，反之。

    4. contenteditable属性：规定可否编辑元素的内容，true时可编辑，反之。

       ## 小结

       这次培训初步了解到网页的结构和html的使用，在照片显示和格式上遇到问题，通过咨询学姐和引擎搜索解决。