Web学习之HTML

最新推荐文章于 2022-09-19 17:03:16 发布

ladyfive

最新推荐文章于 2022-09-19 17:03:16 发布

阅读量94

点赞数

分类专栏： WEb 文章标签： html 前端学习

本文链接：https://blog.csdn.net/ladyfive/article/details/126870101

版权

WEb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一个HTML页面

<!DOCTYPE html>   
<html>
<head>
    <meta charset="utf-8">
    <title>Web开发</title>
<body>
<h1>我的第一个HTML程序</h1>
<p>这是一个段落</p>
</body>
</html>

在这里插入图片描述

html文档后缀名：.html或者.htm
实例解析，分解结构
- 首行：<!DOCTYPE html> 用于声明HTML5文档，不分大小写
- <html></html> 包含了完整的HTML页面
  - <head></head> HTML页面的头部元素
    - <meta charset='utf-8'> 声明编码，这是定义了中文编码，防止输出中文乱码
    - <title>页面标题</title>
  - <body></body> HTML页面的可见内容，可包含各种元素标签

HTML简介

超文本标记语言
非编程语言
标记语言是一套标记标签
使用标记标签描述网页，html包含了标签及文本内容
标签：由尖括号包围的关键词，成对出现,如：，第一个是开始标签，第二个是结束标签
html页面通过web浏览器来读取

HTML基础

标题（Heading）

标签：<h1>-<h6>的标签定义
在这里插入图片描述

链接

标签：<a href=''></a>
在这里插入图片描述

图像

标签：<img>
在这里插入图片描述
注意：图像的名称和尺寸是以属性的形式提供的。
注： Django加载静态资源

在app应用下新建static、templates文件,static下存放静态文件，templates下存放网页模板文件
修改站点下的settings.py,在STATIC_URL = '/static/'后面追加一行STATIC_ROOT = os.path.join(BASE_DIR,'static')
修改站点下的urls.py

# 导入2个库
from django.conf import settings
from django.conf.urls. static import static

# 在URLConf后面增加配置
urlpatterns = [
    path('autotest/',include('autotest.urls')),
    path('admin/', admin.site.urls),
]+static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)

重新运行项目
在网页里面引用静态文件

<link rel="stylesheet" href="/static/layui/css/layui.css">

这样就没有报错了

段落

标签：<p>
在这里插入图片描述

HTML元素

元素语法：以开始标签其实，以结束标签结束，如：<p>内容</p> ,标签名称p，标签内容：是开始标签和结束标签之间的内容，大部分元素拥有属性
HTML元素可以嵌套使用

<br> 是HTML的空元素之一，即没有内容的HTML元素，空元素是在开始标签中关闭的，<br/> 用于换行

HTML属性

HTML元素可以设置属性，给元素添加附加信息，在开始标签中描述，以名称/值对的形式出现

    <a href="http://www.baidu.com">百度</a><br>
    # 这里的href就是元素<a>的属性
    <img src="/static/images/icon.png" width="258" height="39"/>
    # 这里的src,width,height就是img元素的属性

建议使用小写属性

HTML样式-CSS

CSS（CAS擦腚 Style Sheets）用于渲染HTML元素标签的样式

使用CSS的方法

通过以下方式添加到HTML中

内联样式-在HTML元素中使用style属性
内部样式表——在HTML文档头部<head>区域 使用<style> 元素来包含CSS
外部样式表-外部引用，使用外部的CSS文件
语法：

  <link rel="stylesheet" href="/static/layui/css/layui.css">

应用关系：内联样式>内部样式表>外部样式表

HTML 区块

HTML元素被定义为块级元素或内联元素
- 块级元素：在浏览器显示时，会以新行来开始和结束，比如：<h1>、<p>、<ul>、<table>、<div>
- 内联元素：在显示时，通常不会以新行开始，比如：<b>,<td>,<a>、<span>
- <div> :定义了文档的区域，块级（bliock-level）
- <span> : 用来组合文档中的行内元素

HTML 布局

网站会把内容安排到多个列中
大多数网站可以使用<div>或者<table> 元素来创建多列
CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观

div元素布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <title>Web开发</title>
    {# 内部样式表  #}
    <style type="text/css">
        body {
            background-color: yellow;
        }

        p {
            color: blue;
        }
    </style>

</head>
<body>
<div id="container" style="width:500px">
    <div id="header" style="background-color: #00F7DE">
        <h1 style="margin-bottom: 0">网页标题</h1>
    </div>
    <div id="menu" style="background-color: #1E9FFF;height:200px;width:100px;float:left;">
        <ul>
            <li>菜单</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>
    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        <p>
            这个段落嵌套使用了两个元素<br>
            <a href="http://www.baidu.com">百度</a><br>
            <img src="/static/images/icon.png" width="258" height="39"/>
        </p>
        <p style="color:red;margin-left: 20px;margin-top: 40px;">这是另外一个段落</p>
    </div>
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        测试HTML
    </div>
</div>

</body>
</html>

效果：
在这里插入图片描述

使用表格布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <title>Web开发</title>
    {# 内部样式表  #}
    <style type="text/css">
        body {
            background-color: yellow;
        }

        p {
            color: blue;
        }
    </style>

</head>
<body>
<table width="500" border="0" style="margin-top: 50px;">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>网页标题</h1>
        </td>
    </tr>
    <tr>
        <td style="background-color:#FFD700;width:100px;">
            <ul>
                <li>菜单</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </td>
        <td style="background-color:#eeeeee;height:200px;width:400px;">
            <p>
                这个段落嵌套使用了两个元素<br>
                <a href="http://www.baidu.com">百度</a><br>
                <img src="/static/images/icon.png" width="258" height="39"/>
            </p>
            <p style="color:red;margin-left: 20px;margin-top: 40px;">这是另外一个段落</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            测试table布局
        </td>
    </tr>
</table>

</body>
</html>

效果
在这里插入图片描述
注：不建议使用表格来布局，设计表格主要目的是呈现表格化数据

HTML表单

用于收集用户的输入信息
表单标识文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到Web服务器
表单是一个包含表单元素的区域，表单元素允许用户在表单中输入内容
- 文本域（textarea）
- 下拉列表（select）
- 单选框（radio-buttons）
- 复选框（checkbox）
- …
语法：

<form>
input 元素
</form>

input元素：

 <form action="">
            {# 文本域 text#}
            Username:<input type="text" name="user"><br>
            {# 密码字段 password#}
            Password:<input type="password" name="password"><br>
            {# 单选按钮 radio#}
            单选按钮：<br>
            <input type="radio" name="sex" value="male">男<br>
            <input type="radio" name="sex" value="famale">女<br>
            {# 复选框 checkbox#}
            复选框：<br>
            <input type="checkbox" name="vehicle" value="Bike">自行车<br>
            <input type="checkbox" name="vehicle" value="Car">小车<br>
             <input type="checkbox" name="vehicle" value="Bus">公交车<br>
             {# 提交按钮 submit#}
            <input type="submit" value="提交">
        </form>

在这里插入图片描述

form属性：
- action: 会对接收到的用户输入数据进行相关的处理
- name：form属性标签名称
- method ：用于定义表单数据的提交方式
  - post：HTTP POST方法，表单数据会包含在表单体内发送给服务器，用于提交敏感数据
  - get：默认值，HTTP GET方法，表单数据会附加在action属性的URL中，并以？作为分隔符