0
点赞
收藏
分享

微信扫一扫

web前端学习第一天


一、 web应用程序开发介绍

       1. 界面部份

       2. 业务逻辑部份

       3. 数据存储部份

web前端学习第一天_ide

  二、  web应用程序开发三大核心技术

      HTML  CSS   JAVASCRIPT

       html: 超文本标记语言

               作用: 网页内容、结构

       css : 级联样式表

               作用: 网页样式、外观

       javascript: 网页脚本语言

               作用: 网页动作、行为

  三、HTML元素学习

      1. 标题:  h1 - h6

      2. 段落: p

      3. 超链接: a

<a href="http://www.baidu.com" target="_blank">这是超链接标签</a>

      4. 图像: img

<img src="./image/b1.jpg" alt="美女图片" title="美女"/><a name="marker1"><h2>美女1</h2></a>

      5.  水平线: hr

      6: 换行: br

      7: 粗体: strong

      8: 斜体: em

      9: 块元素: div

      10: 行内元素: span

       11: 列表:   ul    ol   dl

        

<ul>
			<li>范冰冰演藏族女孩</li>
			<li>撞死两个人后自拍</li>
			<li>诗隆甜蜜出游</li>
			<li>一线城市楼市退烧</li>
		</ul>
		
		<h2>有序列表</h2>
		<ol>
			<li>范冰冰演藏族女孩</li>
			<li>撞死两个人后自拍</li>
			<li>诗隆甜蜜出游</li>
			<li>一线城市楼市退烧</li>
		</ol>
		
		<h2>定义列表</h2>
		<dl>
			<dt>水果</dt>
			<dd>苹果</dd>
			<dd>桃子</dd>
			<dd>李子</dd>
		</dl>

    12: 表格

      

web前端学习第一天_ide_02

<table>
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>1001</td>
			</tr>
			
			<tr>
				<td>李四</td>
				<td>1002</td>
			</tr>
		</table>
		
		<h2>合并单元格</h2>
		<table>
			<tr>
				<th colspan="2">学生信息</th>
				<!-- <th>学号</th> -->
			</tr>
			<tr>
				<td>张三</td>
				<td>1001</td>
			</tr>
			
			<tr>
				<td>李四</td>
				<td>1002</td>
			</tr>
		</table>
		
		
		<h2>合并行</h2>
		<table>
			<tr>
				<th>姓名</th>
				<th>学号</th>
			</tr>
			<tr>
				<td rowspan="2">张三</td>
				<td>1001</td>
			</tr>
			
			<tr>
				<!-- <td>李四</td> -->
				<td>1002</td>
			</tr>
		</table>

 13. 媒体元素

<video autoplay controls>
			<source src="video/video.webm" type="video/webm"/>
			<source src="video/video.mp4" type="video/mp4"/>
			你的浏览器不支持video元素
		</video>

 14: 页面结构元素

<header>头部区域</header>
		<section>中间内容区域</section>
		<footer>底部区域</footer>

15: iframe元素

    

web前端学习第一天_ide_03

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>iframe标签</title>
	</head>
	<body>
		<h2>iframe</h2>
		<!-- <img src="b1.jpg" /> -->
		<div>
			<a href="http://www.baidu.com" target="frame_content">百度</a> | <a href="https://www.jd.com/" target="frame_content">京东</a> | <a href="列表.html" target="frame_content">列表</a>
		</div>
		<iframe name="frame_content" src="http://www.baidu.com" width="1500px" height="500px"/>
	</body>
</html>

 

 

举报

相关推荐

第一天学习

Web移动端学习第一天

RHCSA学习第一天

JavaScript学习第一天

【python学习】第一天

JVM学习_第一天

Django学习第一天

0 条评论