分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

前端入门之——html day1

发布时间:2023-09-06 02:01责任编辑:傅花花关键词:前端

具备三个要素的项目,就是web项目

1、浏览器

--向服务器阿奇请求,下载服务器中的网页(HTML),然后执行HTML显示出的内容。

2、服务器

--接收浏览器的请求,发送相应的页面到浏览器。

3、HTTP协议

--浏览器与服务器的通讯协议

XML 和 HTML 

可扩展标签语言

标签,属性,标签的嵌套关系都可以扩展

扩展,自定义

超文本标签语言

语法是固定的 w3c

用来显示数据

有一些特定的版本严格遵守XML规范

可以将HTML理解为标签固定的XML

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

第一个网页:

 1 <!DOCTYPE html> 2 <html> 3 ????<!-- 4 ????????在head 标签中对网页做一些基本的配置 5 ????--> 6 ????<head> 7 ????????<!-- 8 ????????????描述:在meta中 charset设置解码utf-8 9 ????????-->10 ????????<meta charset="utf-8" />11 ????????<title></title>12 ????</head>13 ????<!--14 ????????描述:在body里面写网页具体的内容15 ????-->16 ????<body>17 ????????你好,世界!18 ????</body>19 </html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  •  <标签>内容</标签> 

HTML 网页结构

HTML版本

从初期的网络诞生后,已经出现了许多HTML版本:

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

以X开头的版本是严格遵守w3c语法。不建议使用。

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。

<head> ???????<!-- ???????????描述:在meta中 charset设置解码utf-8 ?声明网页的编码 ???????--> ???????<meta charset="utf-8" /> ???????<title></title></head>

示例

 1 <!DOCTYPE html> 2 <!-- 3 声明使用的HTML版本 4 html 是唯一的根元素 5 --> 6 <html> 7 ????<!-- 8 ????????在head 标签中对网页做一些基本的配置 9 ????-->10 ????<head>11 ????????<!--12 ????????????描述:在meta中 charset设置解码utf-813 ????????-->14 ????????<meta charset="utf-8" />15 ????????<!--16 ????????????在title中 声明网页的标题17 ????????-->18 ????????<title>第一个网页</title>19 ????</head>20 ????<!--21 ????????描述:在body里面写网页具体的内容22 ????-->23 ????<body>24 ????????你好,世界!25 ????????good html26 ????</body>27 </html>

HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.

HTML 段落

HTML 段落是通过标签 <p> 来定义的.

HTML 链接

HTML 链接是通过标签 <a> 来定义的.

<a href="http://www.runoob.com">这是一个链接</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

示例:

 1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="UTF-8"> 5 ????????<title></title> 6 ????</head> 7 ????<body> 8 ????????<!-- 标题 ???--> 9 ????????<h1>道君</h1>10 ????????<h2>剑动山河</h2>11 ????????<h3>魔天记</h3>12 ????????<h4>辰南</h4>13 ????????<h5>莽荒纪</h5>14 ????????<h6>红楼梦</h6>15 ????????16 ????????<!-- 段落 ?-->17 ????????18 ????????<p>此时的清塞军身处吞云岭,四面尽是山歌</p>19 ????????<p>此时的清塞军身处吞云岭,</p><p>四面尽是山歌</p>20 ????????21 ????????<a href="http://www.runoob.com">这是一个链接</a>22 ????????<img src="http://p0.so.qhimgs1.com/t016997d986a16ebe7a.jpg" width="258" height="39" />23 ????24 ????</body>25 </html>

前端入门之——html day1

原文地址:https://www.cnblogs.com/Mengchangxin/p/9240121.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved