前端day01HTML

什么是HTML?
答: 超文本标记语言。

什么是超文本?
答: 超文本就是指页面内可以包含图片,连接,甚至音乐,程序等非文字元素

什么是标记?
答:指的就是使用标签的方法将需要的内容包括起来 例如:<a>www.itcast.cn</a>

HTML能干什么?
答:网页内容包含:HTML代码,CSS代码,JavaScript代码
HTML代码: 用于展示需要显示的数据
CSS代码 : 使显示的数据更佳好看
JavaScript代码: 使整个页面显示的数据具有动画效果。

静态页面:编写之后再浏览器不在改变的网页. HTML就是用于编写静态网页的。
动态页面: 会根据不同的情况展示不同的内容。例如:登录成功后右上边显示用户名。

HTML结构都是有标签组成
标签预先定义好的。我们只需要了解其功能就可以
标签名不区分大小写
通常情况下标签由开始 标签和结束标签组成 例如<a></a>
如果没有结束标签,建议以/结尾 例如<img />
HTML结果包括两部分:头head和体body

总结:
1 html语言 如果标签有开始有结束 称为围堵标记
2 html语言 如果没有 称为空标记
3 html语言 不是很规范的语言
4 html语言 标签不区分大小写 但是国内的程序都用小写
5 html语言 标签最好要正确的嵌套
6 标签中可以有属性
书写格式 属性名=“属性值”

==================标签=======================
文字类标签:
<hn></hn> n是一个可变数 取值范围 1-6
<h1></h1>
特点:加粗 换行 上下留白
从1-6越来越小
常用属性:
align:对齐方式, 左left 右right 中center

文字标签:
<font></font>
常用属性:
color:颜色
2中颜色取值方法:
1. 直接颜色的英文单词
2. R红G绿B蓝 (RGB) 以#打头后面跟上6个十六进制的数 #12345f
size:大小

face:字体家族
<b></b> :加粗
<strong></strong>:也是加粗
<i></i>:斜体

排版类标签:
<hr />:水平线的标签
常用属性:
width:宽度
1 <hr width="50%" />
2 px像素
align: 对其方式

<br /> : 换行

段落标签:
<p></p> :分段落
常用属性:
align: 对其方法

图片标签:
<img />
常用属性:
src:指定图片路径
alt:替代文字
width:宽度
height:高度
title:介绍
路径取值:
1.相对路径
当前路径:如果把图片放到本机目录./logo2.png
上级路径:../img/logo2.png
2.绝对路径
http://img.baidu.com/xx.jpg

列表标签
ol: 有序列表
常用属性:
type: 默认(1234)
type="a" (abcd)
type="A" (ABCD)
ul:无序列表
常用属性:
type:
disc:默认
circle:空心圆
square:方块

共同的子标签
li:列标签
<ol>
<li>地方</li>
<li>对方</li>
<li>飞</li>
<li>额问问</li>
</ol>
<ul>
<li>个人</li>
<li>而非</li>
<li>cvd</li>
<li>思维</li>
</ul>

超链接标签:
<a></a>
常用属性:
href:要跳转的页面的路径
target:跳转的页面的打开方式(去其他页面显示,不替换当前页面)
_black:新开一个选项卡打开
_self:默认
framename:在框架集里显示

表格标签:
<table></table>
常用属性:
border:px
width:宽度
heigh:高度
cellspacing:表格线的间距
align:对其方式
常用子标签:
<tr></tr>

tr标签 行
常用属性:
bgcolor:背景颜色
align:对其方式(指的是内容对其方式)
常用的子标签:
<td></td>:单元格
常用属性:
bgcolor:背景颜色
align:对其方式(指的是内容对其方式)
rowspan:行合并
colspan:列合并
<th></th>:表头标签
特点:自动加粗和居中

frameset标签 框架集标签
常用属性:
水平切分
rows="";
垂直切分:
cols="";
常用子标签:
frame标签
常用属性:
委托给别人 : src:指明该区域要显示的页面
name:

frameset标签和body标签不能共存
frame是一个空标记不支持嵌套
frameSet支持嵌套

时间: 2024-07-31 00:08:50

前端day01HTML的相关文章

前端自动化之webstrom

在刚接触前端的时候,使用的就一直是webstrom,版本是webstrom 8. 前端自动画使用的时候,因为webstrom 8版本是没有集成gulp的.所以每次使用都默默跑到Hbuild中使用. 实际最近在webstrom 12中找到了简单的方法,就连cmd都省了. 上图: 在gulp的gulpfile.js文件上右击,点击Show Gulp Tasks 会弹出gulp的控制窗口: 然后右键服务,点击run即可.

Day12 前端html

前端基础之HTML 老师博客: http://www.cnblogs.com/yuanchenqi/articles/6835654.html http://www.cnblogs.com/yuanchenqi/articles/6856399.html html:静态的内容都是一个html标签,是有一组组标签构成的文件 css:对一个个标签做渲染定位 js:所有页面的动态效果做渲染定位 当写一个简单服务端的时候,一般这样写: 主要的是这:conn.send=("HTTP/1.1 201 OK

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML 5.CSS 3.JavaScript 跨平台框架:React Native.Cordova 前端工程化:Grunt.Gulp.Webpack 前端预编译:Babel.Sass.Less 自动化测试:Jasmine.Mocha.Karma 一图在手,应有尽有! 更多信息参考:https://item.jd.com/12170351.h

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

前端页面适配的rem换算

为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊. Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和rem虽然都是相对单位,但em是相对于它的父元素的font-size,页面层级越深,em的换算就越复杂,而rem是直接相对于根元素,这就避开了

一个前端所需具备的PS能力

前端网页设计+静态实现案例 放一个2天半内给某公司完成的(设计 + 静态实现)的案例吧,静态阴影用CSS3实现的http://www.cnblogs.com/MuYunyun/p/5693615.html,我最开始设计的时候就想好要用什么实现,各个框的大小是多少(精确到1像素),以及颜色搭配等等. 还有很多素材我就不演示了,设计了好些网页模板,如果有大家想用PS进行网页制作,欢迎大家交流. 很多人做前端只是掌握了最基本的切图(甚至连切图都有不会的),就连小小改动都要麻烦设计师,这就大大浪费了时间

分享第二届中国前端开发者大会与会心得

第二届中国前端开发者大会(FDCon2017)是在上海举办的针对前端技术(HTML5,CSS,JS)的互联网开发者所举办的最盛大和权威的相关技术会议,由技术社区TopGeek主办.汇智Tek联合主办,致力于推动各类前端技术等在移动互联网领域的研发和应用. 随着新一代的前端技术的发展,给前端开发者带来巨大的创新应用实践机会,本大会以“高效前端开发实践和创新”为主题,内容涵盖电商.旅游.门户.搜索.分类广告.移动互联网等多种业态的技术经验分享,涉及各种WEB和APP前端开发技术和架构设计等方法论.

前端开发四

7.闭包问题 闭包:函数能被外部调用到,则该作用连上的所有变量都会被保存下来. 作用:①可以读取函数内部的变量:②相当于划出了一块私有作用域,避免数据污染:③让变量始终保存在内存中 使用全局变量被认为是不好的习惯,而且容易造成错误并且维护成本较高,所以js可以采用闭包的方式读取函数的内部变量.但是如果大量使用闭包就会造成过多的变量始终保存在内存中,会造成内存泄漏. 一个简单的闭包例子: function f1(){ var n=999; function f2(){ alert(n); } re