HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

网页开发工具

VSCode

WebStorm

HTML简介

HTML:Hyper Text Markup Language

html文本的内部基本结构






	
	
                
		
		
		我是title

	

	
	

	
		

这是一个非常漂亮的网页

html的注释

  
      
        网页的标题  
      
      
          
  
          
        

这是我的第二个网页

-->

标题标签 ,段落标签,水平线,换行,加粗,斜体




    
    常用的标签




一级标题标签

二级标题标签

三级标题标签

四级标题标签

五级标题标签
六级标题标签

第一次

今天天气真不错


床前明月光
疑是地上霜
举头望明月
低头思故乡


简介

2008年设立人才实训中心
2009年成为教育部软件工程专业大学生实习基地

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识_第1张图片

列表标签



	
		
		列表
	
	
		
		
  • 西红柿
  • 大茄子
  • 小辣椒
  1. 桃花源记
  2. 岳阳楼记
  3. 小石潭记
  4. 醉翁亭记

菜谱

  • 鱼香肉丝
    1. 肉丝
  • 宫保鸡丁
  • 青椒肉丝
武松
景阳冈上的大虎英雄,战斗力99
后来打死西门大官人,后逃逸,出家为僧
武大
著名餐饮企业家,战斗力0

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识_第2张图片

图像标签

常见的图像格式
JPG
GIF
PNG
BMP
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识_第3张图片

图片的相对路径

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识_第4张图片
所谓相对路径,就是相对于自己的目标文件位置。例如上面的例子,“11111111.html” 文件里引用了“11ha.jpg”图片,由于“11ha.jpg”图片相对于“11111111.html”来说,是在同一个目录的,那么在“11111111.html”文件里使用以下代码后:

  

只要这两个文件的相对位置没有变(也就是说还是在同一个目录内),那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识_第5张图片
当图片在image文件夹里时:

src="image/11ha.jpg" alt="小女孩" />  

如果在image里很深的文件夹,也可以一直罗列下去:

  

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识_第6张图片

如果html文件在比图片深一层的文件夹里:

  

如果html文件在比图片深两层的文件夹里,就在前面再罗列两个点“…”,深几层罗列几次。

  

图片在html文件上两级image文件夹中的renwu文件夹里

  

链接标签

链接文本或图像

href: 链接路径
target:链接在哪个窗口打开,常用值:_self、_blank

你可能感兴趣的:(web前端入门教程,htmlcss实战教程,htmlcss系列教程)