HTML学习日记(1)-HTML基础标签


前言

HTML是超文本标记语言,一个html的文件就是一个网页,一个网页由标签组成。
学习HTML最开始的时候就是学习并记忆HTML标签的语法、效果、语义。

  • 语法: 标签的代码怎么写
  • 效果: 浏览器渲染标签后的默认效果(可以通过css修改默认效果)
  • 语义: 标签的含义,在合适的场景使用合适的标签

一、工作原理?

一个网页是一个扩展名为.html的文件,这个文件中由特定的网页标签组成。当用户在浏览器(终端)的地址栏中输入网址后,浏览器发起http请求目标服务器;服务器通过http响应请求,如果是一个网页,则响应的内容即html代码;浏览器通过解释并执行标签代码,最终渲染成为用户看到的页面效果。

二、开发工具

编写网页可以通过记事本,但是记事本使用起来非常的不方法,不能够提高开发效率

三、网页的基本结构

一个网页必定由一个特定的结构构成,网页称为超文本标记语言。由标签构成。标签有双标签和单标签之分。

1.双标签

双标签的开始标签和结束标签必须是相同的,双标签之间可以编写子标签或者文本。换而言之,标签可以嵌套编写。

<开始标签 属性=""></结束标签>

2.单标签

<标签名 属性="" />

一个完整的网页,就是由N个这样的单标签以及双标签构成。代码如下(示例):

<!--告诉浏览器,我们的页面支持html5标签-->
<!DOCTYPE html>
<html>
    <!--这个是html中的注释,注释的内容不会被浏览器解释执行-->
    
    <!--网页的头部-->
	<head>
        <!--设置页面编码方式-->
        <meta charset
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它本身并不具备动态功能,但可以通过CSS(Cascading Style Sheets)进行样式设计,以及JavaScript进行交互和动态内容的实现。要制作一个简单的日记页面,你可以遵循以下几个步骤: 1. **布局结构**: - 使用`<html>`标签定义文档结构,包含`<head>`(头部信息)和`<body>`(主体内容)。 - 在`<head>`中,使用`<title>`设置页面标题,通常显示在浏览器标签上。 - 使用`<meta>`标签设置字符集和 viewport,确保页面在不同设备上正确显示。 2. **导航栏和页头**: - 可以用`<nav>`创建一个固定在顶部的导航栏,包含“首页”、“日记”等链接。 - 用`<header>`创建页眉,可以包含日期选择器、登录/注册链接等。 3. **日记条目列表**: - 使用`<ul>`和`<li>`创建无序列表,每个`<li>`代表一条日记条目。 - 每条条目可能包括日期、标题和内容区域。 4. **内容展示**: - 对于每条日记,可以使用`<article>`标签,包含`<h2>`(标题)、`<p>`(正文)等内容。 - 使用`<figure>`和`<img>`插入图片,如果有的话。 5. **样式美化**: - 使用CSS对布局、颜色、字体等进行定制,比如添加背景颜色、边距、浮动等。 - 可以利用CSS框架(如Bootstrap)或自定义CSS类来简化样式管理。 6. **交互元素**: - 如果需要,可以使用JavaScript处理用户的输入,例如在用户提交新日记时验证和保存数据。 - 可能还需要加载更多功能,如评论区、点赞等。 相关问题: 1. 如何在HTML中添加表格来展示日记详细信息? 2. 如何使用CSS实现响应式设计,使日记页面在不同屏幕尺寸下看起来良好? 3. 怎样将HTML页面与后端服务器连接,以便实时更新或存储日记数据?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值