HTML和URL简介

阮一峰老师的 HTML 教程
本文属于笔记性质,内容大部分出于上述教程,但会对内容进行组织,精简。
范围:一、二章节。

HTML 简介

HTML: 超文本标记语言(HyperText Markup Language),于 1990 年,由 Tim Berners-lee(李爵士)发明。 2014 年,HTML5 发布,目前广泛使用的版本就是 HTML5。

网页的基本骨架

<!-- <!DOCTYPE html> 会使浏览器按照 html5 的标准解析网页-->
<!DOCTYPE html>
<!-- lang 默认是 en 中文是 zh-CN -->
<html lang="en">
    <!-- head 放置网页的元信息 不会出现在网页上 -->
    <head>
    <!-- meta 网页的元数据 utf-8 表示 编码方式 -->
    <meta charset="utf-8" />
    <!-- 网页标题 -->
    <title>hello wrold</title>
    </head>
    <!-- 网页的主体  -->
    <body></body>
</html>

网页的基本概念

  1. 标签
    HTML 代码由许许多多的标签(tags)组成。

    <!-- title 标签 -->
    <title>网页标题</title>
    

    标签可以嵌套,但要保证正确的闭合顺序

    <!-- 正确 -->
    <div><p>hello wrold</p></div>
    <!-- 错误 -->
    <div><p>hello wrold</div></p>
    
  2. 元素
    标签是从源码角度来看, 元素是从编程角度来看,它们本质上是同一种东西。浏览器渲染网页,会把源码解析成一个标签树,每一个标签就是一个节点(node),称为元素(element)。
    元素主要分为两大类:块级元素(block)、行内元素(inline)。

  3. 属性
    属性(attribute)是标签的额外信息, 因为

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 和 CSS 都是用于网页制作的语言,HTML 用于定义网页的内容、结构和布局,CSS 用于定义网页的样式和外观。下面是一个简单的 HTML 和 CSS 静态网页制作示例: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>My Website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </header> <main> <section class="hero"> <h2>Welcome to My Website</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a href="#" class="btn">Learn More</a> </section> <section> <h3>About Us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nulla sed convallis lacinia, dui libero bibendum quam, non semper sapien leo eu odio.</p> </section> <section> <h3>Contact Us</h3> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br> <label for="message">Message:</label> <textarea id="message" name="message"></textarea><br> <input type="submit" value="Send"> </form> </section> </main> <footer> <p>©2021 My Website</p> </footer> </body> </html> ``` CSS 代码: ``` body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; } .hero { background-image: url("hero.jpg"); background-size: cover; background-position: center; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; } .hero h2 { font-size: 3rem; margin: 0; } .hero p { font-size: 1.5rem; margin: 20px 0; } .btn { background-color: #fff; color: #333; padding: 10px 20px; border-radius: 4px; text-decoration: none; } section { max-width: 800px; margin: 0 auto; padding: 40px; } section h3 { font-size: 2rem; margin-top: 0; } form label { display: block; margin-bottom: 5px; } form input, form textarea { padding: 10px; border-radius: 4px; border: none; margin-bottom: 20px; } form input[type="submit"] { background-color: #333; color: #fff; border: none; cursor: pointer; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` 这个网页包含了一个头部区域、导航菜单、主要内容区域和页脚。头部区域包含了网站的标题和导航菜单,主要内容区域包含了三个部分:一个带有大图的主页区域、一个简介页面和一个联系我们的表单页面。CSS 文件包含了网站的样式,包括了字体、颜色、布局和背景图像等。整个网页的样式和布局可以通过修改 CSS 文件来进行修改。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值