首页 > 其他分享 >web前端学习第一天

web前端学习第一天

时间:2023-07-31 17:07:51浏览次数:31  
标签:web 第一天 -- 前端 元素 iframe 1002 1001


一、 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前端学习第一天_超链接_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前端学习第一天_超链接_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,第一天,--,前端,元素,iframe,1002,1001
From: https://blog.51cto.com/u_3124497/6910096

相关文章

  • Jenkins 修改 webhook 链接 URL
    说明2023-03-1221:11:03 分享了一篇  https://blog.51cto.com/wst021sh/6116280 ,也就是介绍 Pipeline对比的文章。这里在简单阐述一下,Pipeline就是一套运行在Jenkins上的工作流框架,将原来独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排......
  • web渗透测试(7):跨站点脚本(XSS)
    跨站点脚本源于信息发送给应用程序用户时缺乏编码。这可以用来注入任意的HTML和JavaScript;结果是该有效载荷在合法用户的网络浏览器中运行。与其他攻击相反,XSS漏洞针对应用程序的用户,而不是直接针对服务器。 一些漏洞利用的例子包括:注入假登录表单;检索合法用户的Cookie;......
  • webpack项目本地dev环境正常,部署至微信字体或图片报cors
    由于webpack设置了高于xxx大小的文件不打包,又与小程序平台的域名不一致导致的问题。修改limit,将其调大,以base64方式直接嵌在页面中(字体文件也适用)......
  • CTFer成长记录——CTF之Web专题·攻防世界—unseping
    一、题目链接  https://adworld.xctf.org.cn/challenges/list二、解法步骤  本题主要是代码审计和反序列化;代码审计:首先我们需要知道整个题的基本执行顺序:post传参——>base64编码——>反序列化——>调用__wakeup()魔术方法——>执行waf()方法过滤——>调用析构方法()。......
  • IDEA,Pycharm,Goland,Webstorm 最新发布2023.2版本,亲测好用!
    期待已久的IntelliJIDEA2023.2终于正式发布了,同时发布的还有Pycharm,Goland,Webstorm等。具体的改变相信大家已经提前有所了解的了,我迫不及待的就下载体验了下,UI变好看了,使用起来感觉更流畅,好用推荐!IDEA2023.2最新版激活成功如下GoLand2023.2最新版激活成功如下......
  • UI/UE统一设计与前端组件库建设
    一、当前问题(主要在管理后台)1、输入框、下拉选择框figma样式不一致2、search组件、table组件、翻页导航样式与交互不一致3、UI/UE设计成本高4、前端开发成本高二、原因分析1、设计师需要拥有全局视角,各平台统一规划。通常来说当一个界面设计美观、交互体验感好、并......
  • 手把手教你在云环境炼丹(部署Stable Diffusion WebUI)
    前几天写了一篇《手把手教你在本机安装StableDiffusion秋叶整合包》的文章,有些同学反映对硬件的要求太高,显卡太TM贵了。今天我再分享一个云服务器炼丹的方法,方便大家快速入门上手,这个云服务不需要特殊网络设置,能连接公网网盘,随开随用,有3090显卡,也有4090显卡,不过我经常使用的是A5......
  • 未来几年,前端框架的竞争格局会发生什么变化?
    过去几年,前端框架领域的竞争是激烈的。各个框架在功能、性能、开发体验、生态系统和社区支持等方面都有不同的优势和特点。开发者和企业需要根据具体项目需求、团队技能和偏好来选择最适合的框架。前端技术一直在快速演进,新的标准、语言和工具不断涌现,这也为竞争增添了新的维度......
  • 开发环境搭建_前端环境搭建
       一定要在没有中文的目录下启动 ......
  • Python第一天
    1、变量名-字母-下划线-数字注:不能是关键字、不能数字开头、不要和内置的东西重复补充:变量名尽量写的有意义,对变量名所指向的东西尽量看名字可识别。技巧:变量名可以用单词,另外用下划线进行断句,已表示清楚(还有可以用首字母大写进行断句,python用下划线比较清晰) 2、字符串1......