web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)

文章目录

    • 一、web前端
    • 二、列表标签
  • 三、图片标签
  • 四、常用文本标签
  • 五、超链接
  • 六、表格标签
  • 七、表单
  • 八、练习

一、web前端

1.web前端:web应用展示给用户的东西(结构,样式,行为)
应该学习的知识:

  • HTML:搭建网站的结果
  • CSS:规定网站的样式
  • JavaScript:规定网站的行为
  • jQuery:另一种JavaScript,代码少,做的多
  • Bootstrap,easyUI:前端框架

2.基本格式



<html>
<head>
	
	<meta charset="utf-8">
	<title>我是标题title>
head>
<body>
	
	
body>
html>

二、列表标签


<html>
<head>
	<meta charset="utf-8">
	<title>列表标签title>
head>
<body>
	
	<ul type="square">
		<li>无序列表项1li>
		<li type="circle">无序列表项2li>
		<li>无序列表项3li>
	ul>

	<hr>
	
	<ol type="I" start="3">
		<li>有序列表项1li>
		<li>有序列表项2li>
		<li>有序列表项3li>
	ol>
	<hr>
	
	 <dl>
	 	<dt>我是第一个标题dt>
	 	<dd>我是第一的说明dd>
	 	<dd>我也是第一的说明dd>
	 	<dt>我是第二个标题dt>
	 	<dd>我是第二的说明dd>
	 	<dd>我也是第二的说明dd>
	 dl>
body>
html>

web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第1张图片


三、图片标签


<html>
<head>
	<meta charset="utf-8">
	<title>图片标签title>
head>
<body>
	
	
	<img src="http://dingyue.nosdn.127.net/ZOyGgR8kH7tFRJLNjo6qmpf8Qd69HzkTX02nWq1L43CiC1553128854967.jpeg">
	

	
	
	<img src="C:\Users\Administrator\Desktop\图片\1gif.gif" title='本地图片:我是蔡徐坤' alt='当资源加载失败时候,会显示我'>

	
	<img src="./img/徐坤篮球图.jpg">
body>

html>

web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第2张图片


四、常用文本标签



	
		
		hello
	
	
		
		

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

蔡徐坤(KUN),NBA篮球大使。

  • 2012年4月,蔡徐坤因参加综艺节目《向上吧!少年》进入全国200强 ;同年8月,参演个人首部偶像剧《童话二分之一》。
  • 2014年3月,参演个人首部电影《完美假妻168》。2018年1月,参加偶像男团竞演养成类真人秀《偶像练习生》,并于同年4月6日获得最高票数,以NINE PERCENT九人男团C位出道并担任队长 ;
  • 同年8月,发行个人首张EP《1》;随后获得出道后首个个人音乐类奖项亚洲新歌榜2018年度盛典“最受欢迎潜力男歌手”;
  • 同年12月,获第十二届音乐盛典咪咕汇年度“最佳彩铃销量歌手”、年度十大金曲《Wait Wait Wait》、搜狐时尚盛典“年度人气男明星”以及今日头条年度盛典“年度偶像人物”。2019年2月,首登北京台春晚便包揽词曲,为其创作歌曲《那年春天》。
  • 2月18日,发布单曲《没有意外》。3月22日,发布海外公演主题曲《Bigger》。
  • 4月19日,发布单曲《Hard To Get》。

  • web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第3张图片


    五、超链接

    
    
    
    	
    	超链接
    
    
    	
    	百度一下
    
    	
    跳转到1楼 跳转到2楼 跳转到3楼 跳转到4楼 跳转到5楼

    1楼

    2楼

    3楼

    4楼

    5楼回到顶部

    web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第4张图片
    web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第5张图片


    六、表格标签

    
    
    
    	
    	表格标签
    
    
    	
    
    	 
    编号 姓名 性别 年龄 简介 个人介绍
    1 李四 18
    2 张三 18 暖男

    web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第6张图片


    七、表单

    
    
    
    	
    	表单
    
    
    	
    
    	 
    用户:
    密码:
    性别:
    爱好:rap 篮球
    地址:
    自我介绍:
    秘密:

    web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第7张图片


    八、练习

    练习一:写一个注册表格

    
    
    	
    		
    		作业1-注册
    	
    	
    		
    注册
    姓名:
    密码:
    年龄:
    性别: 保密
    爱好: 唱歌 跳舞 运动 写代码
    地址:
    头像:
    个人简介:

    web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第8张图片
    练习二:写一个纸质简历

    
    
    
    	
    	作业2-个人简历
    
    
    	

    个人简历

    姓名 性别 民族
    政治面貌 户籍
    出生年月 婚姻状况 工作时间
    技术职称 文化程度 主修专业
    毕业学校 毕业时间
    英语水平 计算机水平 薪资要求
    本人要求 现从事工作
    欲从事工作
    联系方式 联系电话 邮政编码
    通信地址
    工作简历
    自我评价

    web前端(一):HTML(图片标签,列表标签,超链接,表单标签,表格标签,对应的案例)_第9张图片

    你可能感兴趣的:(web前端)