Html初步认识及使用

最新推荐文章于 2022-07-18 17:21:36 发布
原创 最新推荐文章于 2022-07-18 17:21:36 发布 · 610 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

首先在虚拟环境里面安装Webstorm，HTML是一种用来描述网页的标记性语言。

Html结构
<!--****************    1. <!DOCTYPE> 是HTML5声明      *************-->
    <!--，<!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前。
    <!DOCTYPE>是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html>
<html lang="en">
<!--************************    2. head标签       *************************-->
    <!-- head标签是所有头部元素的容器。head标签内的元素可包含脚本、样式表和提供页面的元信息等等。
    以下标签都可以添加到 head 部分：title、base、link、meta、script 以及style。
    头部的内容不会显示在浏览器的。 -->
<head>
<!--***********************     3. 设置字符集    ***********************    -->
    <!-- 设置字符集，如果字符集不对，可能导致乱码。一般建议utf-8国际编码 -->
    <!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />-->
    <meta charset="UTF-8">
<!--**************************  4.SEO标签     *****************************    -->
    <!-- SEO相关标签，title定义文档的标题,百度建议一般不要超过32位,
         meta定义页面关键词和页面的描述-->
    <title>个人博客</title>
    <meta name="keywords" content="python程序员,技术博客,个人博客">
    <meta name="description" content="博客是一个优秀的个人技术博客。博客记录了Linux学习，
    python开发与编程，Web前端开发，MySQL学习和教程，NoSQL数据库教程以及个人的人生经历和观点。">
    <!--关联其他让页面更加美化的css和javascripts-->
    <link rel="stylesheet" type="text/css", href="main.css"/>
    <script type="text/javascripts" src="main.js"></script>
</head>
<!--************************    5. 正文部分 ************************-->
<!-- 正文部分，所有在浏览器上可见的内容必须写在body标签内部 -->
<body>
this is a first html page!
hello world
</body>

</html>

Html常用标签

<!--**************      1. div标签    **********************-->
<!--<div> 可定义文档中的分区或节（division/section）。-->
<!--<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符-->
<!--<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
    如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。-->
<!--<div class="test">hello</div>-->
<!--<div class="test">world</div>-->
<!--<div id="navfirst">-->
<!--<ul id="menu">-->
<!--<li id="h"><a href="/h.asp" title="html教程">html教程</a></li>-->
<!--<li id="x"><a href="/x.asp" title="XML教程">XML教程</a></li>-->
<!--<li id="b"><a href="/b.asp" title="浏览器脚本">浏览器脚本</a></li>-->
<!--<li id="s"><a href="/s.asp" title="服务器脚本">服务器脚本</a></li>-->
<!--<li id="d"><a href="/d.asp" title="dot net教程">dot net教程</a></li>-->
<!--<li id="m"><a href="/m.asp" title="多媒体教程">多媒体教程</a></li>-->
<!--<li id="w"><a href="/w.asp" title="建站手册">建站手册</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--**************      2. aside标签    **********************-->
    <!--<aside> 标签是 HTML 5 的新标签。-->
    <!--aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。-->
<!--<p>Me and my family visited The Epcot center this summer.</p>-->
<!--<aside>-->
<!--<h4>Epcot Center</h4>-->
<!--The Epcot Center is a theme park in Disney World, Florida.-->
<!--</aside>-->

<!--**************      3. header标签    **********************-->
    <!--header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。-->
<!--<header> hello world </header>-->

<!--**************      4. section标签    **********************-->
    <!--section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。-->

<!--<section>-->
  <!--<h1>PRC</h1>-->
  <!--<p>The People's Republic of China was born in 1949...</p>-->
<!--</section>--

<!--**************      5. footer 标签    **********************-->
    <!--footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。-->

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-表格标签</title>
</head>
<body>
<h2> 案例1: 学生信息标签</h2>
<table width="500" cellpadding="8" cellspacing="5"  border="'1">

    <caption>学生信息表格</caption>
    <tr bgcolor="antiquewhite">
        <th>姓名</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>学生1</td>
        <td>地址1</td>
    </tr>
    <tr>
        <td>学生2</td>
        <td>地址2</td>
    </tr>
    <tr>
        <td>学生3</td>
        <td>地址3</td>
    </tr>
    <tr>
        <td>主机4</td>
        <td>IP4</td>
    </tr>
</table>
<h2>案例2:合并列单元</h2>
<table border="1" cellpadding="10" width="500">
    <caption>主机信息表格</caption>
    <tr>
        <th>主机名</th>
        <th colspan="2">IP地址</th>
    </tr>
    <tr>
        <td>主机1</td>
        <td>IP1</td>
        <td>IP1</td>
    </tr>
    <tr>
        <td>主机2</td>
        <td>IP2</td>
        <td>IP2</td>
    </tr>
    <tr>
        <td>主机3</td>
        <td>IP3</td>
        <td>IP3</td>
    </tr>
    <tr>
        <td>主机4</td>
        <td>IP4</td>
        <td>IP4</td>
    </tr>
</table>
</body>

</html>


超链接标签

<h1><a name="C1">案例1：创建超级链接</a></h1>
<a href="http://www.baidu.com">不创建新窗口-百度一下</a>
<br/>
<a href="http://www.baidu.com" target="_blank">创建新窗口-百度一下</a>

<h2><a name="C2">案例2： 将图像作为链接</a></h2>
<a href="http://www.westos.org/" target="_blank"><img src="westosLogo.png"></a>

序列化标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-序列化</title>
</head>
<body>
<h2>无序列表</h2>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascripts</li>
</ul>
<h2>无序列表</h2>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascripts</li>
</ol>
<h2>嵌套列表</h2>
<dl>
    <dt>HTML</dt>
    <dd>h1-h6</dd>
    <dd>span</dd>
    <dd>div</dd>
    <dd>hr</dd>
    <dt>CSS</dt>
    <dd>CSS-1</dd>
    <dd>CSS-2</dd>
    <dd>CSS-3</dd>
</dl>
</body>

</html>


表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-表单标签</title>
</head>
<body>
<h2>用户注册</h2>
<from action="#" method="get">
    <span>用户名：</span><input type="text"><br/>
    <span>密码：</span><input type="password"><br/>
    <span>确认密码：</span><input type="password"><br/>
    <span>个人简介：</span><input type="password"><br/>
    <textarea></textarea>
    <br/>
    <span>性别：</span>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女<br/>
    <span>邮箱：</span><input type="text"><br/>
    <span>出生日期：</span><input type="text"><br/>
    <span>籍贯：</span>
    <select name="籍贯">
        <option value="python">Python</option>
        <option value="java">JAVA</option>
        <option value="python">Python</option>
        <option value="c">C</option>
        <option value="c++">C++</option>
    </select>
    <input type="submit" value="注册">
    <input type="reset" value="重置"》
</from>
</body>

</html>


HTML的基础及入门认识
11-07
该文档是对HTML的基本介绍，很适合零基础的想了解HTML技术的人查阅！
HTML标签入门，对于HTML的基本认识
09-09
HTML入门，对于新手来说，比较适用，后续将继续上传后面章节。
HTML的初次认识
m2282475145的博客
10-21 158
1.html介绍 HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是 由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。 超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超 级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接
html的初步认识
青烟小生的博客
10-30 353
HTML（英文 Hyper Text Markup Languag的缩写）中文翻译为：超文本标记语言。主要通过HTML标签对网页中的文本，图片，声音等等内容进行一个描述 ###html的骨架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
HTML初步认识
darkcode007的博客
12-16 2563
HTML初步认识本篇博客给大家带来html最基础的东西，也就是初步认识html，打算从以下几个方面给大家介绍： 认识什么是纯文本文件txt HTML是负责描述文档语义的语言 HTML骨架和基本语法 可能大家会认为这纯文本文件和html没啥关系吧，我要告诉大家的是，虽然这的确和html没多大关系，但对纯文本文件的理解有助于更加深刻的去理解html，好，接下来我将一一给大家介绍关于html初步认识的这三
HTML语言的初步认识
03-19
这个文档讲述的是HTML语言的初步认识这个文档讲述的是HTML语言的初步认识
初步认识css自定义属性
12-14
`:root`选择器通常用来定义全局变量，类似于HTML的`<html>`元素。 **3. 使用CSS变量：var()函数** 使用CSS变量需要借助`var()`函数。这个函数接收一个或两个参数：首先是变量名，然后是可选的回退值。如果变量...
初步认识JavaScript函数库jQuery
10-24
JavaScript函数库jQuery是目前广泛使用的前端开发库之一，它是以简化HTML文档遍历、事件处理、动画和Ajax交互而设计的。 jQuery的特性主要包括HTML元素选取、元素操作、CSS操作、事件函数、JavaScript特效和动画、...
对于html的初步认识
weixin_50725886的博客
04-16 1049
一、什么是html？ 二、对于html编写环境的个人见解 三、html的学习之路建议 四、 一、什么是html？ HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 以上都是百度对于html的解释，就个人看法而言，html就是通过特定的标签来对网页页面进行布局...
HTML入门(对HTML初步认识)
RRukudo的博客
01-07 653
步骤一：了解什么是HTML？ HTML指的是超文本标记语言。它不是一种编程语言，而是一种标记语言。 步骤二：HTML主要做什么工作？ step1:在学习HTML之前，我们先来学习怎么利用记事本创建自己第一个网页。 1.Win+R ->输入cmd ->Enter ->输入notepad。 （创建一个记事本） 2.在记事本中录入以下内容： 3.保存文档，选择便于查找的保存路径（此处...
我对html的初步认识
Alex的专栏
08-28 731
 因为以前的html语言基础不好，所以遇到问题的时候，很难解决。首先对与html的结构问题因为我感觉在html里面，结构的划分很重要，如果结构出现了问题，你所要实现的功能就无法实现。其次是在html语言里要嵌入其他的语言，如php，javascripe等等在html里面的语法结构是很松的，所以添加其他的语言不是难事最后是关于页面对页面的数据传输上因为html本身没有处理
HTML的基本认识
weixin_46831054的博客
11-29 1057
HTML 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 1.先创建html文件。例如我们用最简单的txt进行编写，后缀要改成html。 2.基本语法： !DOCTYPE html> 声明为 HTML5 文档 是 HTML 页面的根元素 包含了文档的元（meta）数据， 描述了文档的标题 包含了可见的页面内容 <h1> 定义一个大标题 <p> 定义一个段落 </p></h1&
HTML——认识与了解
hsl200002的博客
02-28 253
关于HTML的基础了解与认识
HTML初步学习总结(1)
vlesil的博客
07-18 497
初步认识HTML总结
认识 HTML
cwy0502的博客
06-17 288
常用快捷键 ctrl + c ctrl + v ctrl + x ctrl + a ctrl + s ctrl + z ctrl + 空格 调出输入法 win + e 我的电脑 win + d 显示桌面 win + r alt + tab 切换软件 ctrl + tab 切换文档 F2 F5 F12 一、网页 供用户浏览 搜索 新浪 百度 京东 网页的组成 ...
非框架 js引用写法
蜗牛在奔跑的博客
02-23 797
1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit.
html使用import，并且元素调用函数
weixin_42432439的博客
04-10 1446
1.首先，最最重要的是，必须有个开发环境，直接本地打开html是不会成功的(我是通过pyCharm软件打开的) 2.记住要写后缀.js 代码如下 test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
我想初步认识DJANGO
最新发布
11-04
<think>首先，用户查询是：“我想获取关于初步认识DJANGO的相关内容 请问DJANGO的初步认识资料”。根据系统级指令，我需要基于提供的引用内容来回答，并确保回答结构清晰，帮助用户逐步解决问题。 引用内容总结： - [1]: Django是一个高级Python Web框架，鼓励快速开发，务实设计，免费开源。 - [2]: Django环境搭建步骤：终端创建项目，使用django-admin命令。 - [3]: Django初步认识，常用命令如创建app、超级用户、数据库迁移。 - [4]: Django配置URLs，包括路径映射。 - [5]: Django视图示例，处理HTTP响应和模板渲染。 用户要求的是“初步认识DJANGO”，所以我应该涵盖Django的基本概念、核心特点、环境搭建、基本命令和简单示例。 回答结构： 1. **介绍Django**：基于引用[1]，简述Django是什么、核心优势。 2. **环境搭建**：基于引用[2]，描述如何创建Django项目。 3. **基本命令**：基于引用[3]，列出常用Django命令。 4. **URL配置和视图**：基于引用[4]和[5]，解释如何设置URL映射和创建视图。 5. **总结和示例**：提供一个简单的代码示例，展示一个基本页面。 确保格式： - 使用$...$格式行内数学表达式（但在这个主题中可能较少，所以可能不需要）。 - 独立公式用$$...$$（同样，Django是Web框架，数学公式可能不适用）。 - LaTeX语法正确（这里主要是代码块）。 - 使用中文回答。 - 生成相关问题（在末尾添加相关问题）。 - 回答中引用的段落末尾添加引用标识（如[^1]）。 步骤： - **开头**：直接回答问题，介绍Django初步认识。 - **主体**：分步骤解释关键点。 - **示例**：提供代码块展示基本视图或模板。 - **结尾**：添加相关问题。 相关问题生成： - 基于内容，如：如何安装Django？Django的核心组件是什么？如何创建Django应用程序？ 完整回答大纲： 1. **Django简介**：是什么、优点。 2. **环境搭建**：创建项目步骤。 3. **常用命令**：startapp, makemigrations, migrate等。 4. **基本开发**：URL配置、视图定义、模板使用。 5. **简单示例**：创建一个响应页面。 6. **总结**。 7. **相关问题**。 确保引用正确：在回答中用[^n]标识引用来源。 </think>### Django初步认识资料 Django是一个高级Python Web框架，旨在简化Web应用的开发过程。它强调快速开发、实用设计和代码重用，让开发者专注于业务逻辑而非底层细节。Django是免费、开源的，被官方称为“完美主义者的Web框架”，因为它内置了许多强大功能，如ORM（对象关系映射）、认证系统和安全管理[^1]。以下我将逐步介绍Django的初步认识内容，帮助您快速上手。 #### 1. **Django的核心特点** - **快速开发**：Django提供了丰富的内置组件（如模板引擎、表单处理），减少重复代码编写。 - **务实设计**：遵循“Don't Repeat Yourself”(DRY)原则，鼓励代码复用和模块化。 - **全面功能**：包括数据库管理、用户认证、URL路由和安全防护等，覆盖Web开发全流程[^1]。 - **开源免费**：社区活跃，有大量扩展库支持，适合初学者和专业开发者。 #### 2. **环境搭建** 要开始使用Django，需要Python环境和Django库。以下是基本步骤： - **安装Django**：通过pip安装最新版本（确保Python已安装）： ```bash pip install django ``` - **创建项目**：在终端中进入项目目录，执行命令生成项目结构： ```bash django-admin startproject myproject # 创建一个名为myproject的新项目[^2] ``` 项目创建后，会生成核心文件如`manage.py`（管理脚本）和`settings.py`（配置设置）。 - **运行开发服务器**： ```bash cd myproject # 进入项目目录 python manage.py runserver # 启动本地服务器，默认访问http://127.0.0.1:8000 ``` #### 3. **常用基本命令** Django提供命令行工具简化开发： - **创建应用(App)**：每个Django项目由多个应用组成（如用户管理、博客）： ```bash python manage.py startapp blog # 创建一个名为blog的应用[^3] ``` - **数据库迁移**：Django通过ORM管理数据库，避免直接SQL： ```bash python manage.py makemigrations # 记录模型更改 python manage.py migrate # 应用更改到数据库[^3] ``` - **创建超级用户**：用于访问Django后台管理界面： ```bash python manage.py createsuperuser # 设置用户名、邮箱和密码[^3] ``` 登录后台：`http://127.0.0.1:8000/admin`。 #### 4. **基本开发流程** Django采用MVT（Model-View-Template）架构： - **URL配置**：定义URL路径映射到视图函数（在`urls.py`中）： ```python from django.urls import path from . import views # 导入视图模块 urlpatterns = [ path('admin/', admin.site.urls), # 后台路径 path('index/', views.index), # 将/index/映射到index视图函数[^4] ] ``` - **视图(View)**：处理HTTP请求并返回响应（在`views.py`中）： ```python from django.shortcuts import render, HttpResponse def index(request): return HttpResponse("欢迎使用Django!") # 返回简单文本响应[^5] def user_list(request): return render(request, "user_list.html") # 渲染HTML模板[^5] ``` - **模板(Template)**：使用HTML文件（存储在`templates/`目录），支持变量传递： ```html <!-- user_list.html --> <h1>用户列表</h1> <p>{{ n1 }}</p> <!-- 传递变量，如n1="饺子" --> ``` #### 5. **简单示例：创建一个响应页面** 假设您创建了一个应用`blog`，以下步骤实现一个基本页面： 1. **创建视图**（在`blog/views.py`）： ```python from django.http import HttpResponse def welcome(request): return HttpResponse("Hello, Django! 这是您的第一个页面。") ``` 2. **配置URL**（在`blog/urls.py`）： ```python from django.urls import path from . import views urlpatterns = [ path('welcome/', views.welcome), # 访问http://127.0.0.1:8000/welcome/ ] ``` 3. **运行服务器**：执行`python manage.py runserver`，在浏览器中测试页面。 #### 总结 Django的初步认识包括理解其框架优势、环境搭建、命令使用和基本开发模式。通过内置工具，您可以快速构建Web应用，无需从零开始。Django适合各种项目，从小型博客到大型企业应用[^1][^3]。实践中，建议从创建简单项目入手，逐步探索更多功能如模板渲染和数据库操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值