HTML基础知识

前端开发概述

什么是前端开发
前端也叫做web前端开发,它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发。

什么是互联网产品

互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务,百度搜索、QQ、网易邮箱等都是互联网产品。

前端开发需要哪些技术

前端工程师参照产品的效果图来开发页面(也可叫界面),效果图是由UI工程师用Photoshop(少量设计师用firework)来设计的,为了方便与UI设计师对接工作,前端需要掌握一些Photoshop的技能,Photoshop还可以辅助页面开发。把效果图布局成页面,需要用到HTML语言和CSS语言,页面功能的开发需要用到javascript,为了快速开发和系统开发,还需要学习一些前端的javascript库和框架。

HTML文档概述和基本结构

html概述

HTML是Hyper Text Mark-up Language的首字母缩写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个标签组成,用这种语言制作的文件保存的是文本文件,文件的扩展名为html或htm,一个文件就是一个页面,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页连接另外一个网页。

html基本结构

在sublime中新建文件index.html,输入html,然后按tab键,会自动补齐框架,如下所示:







    
    
    html5大法好
    
    
    



    
    你好,世            界
    
    
    
你好,世    界

HTML文档类型

常用的两种文档类型是xhtml1.0和html5

xhtml 1.0是html5之前的一个常用的版本

目前最常用的是html5

学习html其实就是学习标签的用法

html标签

网页上显示的内容都是放在body标签里面

html中多个标签可以嵌套,通常写的时候外层和内层间有缩进,但是其实是为了好看,不缩进也行

body内

html标题标签

这里是一级标题

这里是二级标题

这里是三级标题

html段落标签

即p标签,p:paragraph

中间可以放一个段落

字符实体

常用的3个:

空格:&nmsp;   
尖括号>:>   
尖括号<:<   

换行标签


块标签

div就表示一块内容, 没有语义 行内元素,表示一行中的一小段内容,没有具体的语义。它本身不带任何的样式,所以如果是仅html中使用这个标签,看不出来差别,往往结合样式使用

含样式和语义的标签

标签的语义通常用在面试上,用的时候常常不怎么注意

:行内元素,表示语气中的强调,em:emphasize,本身带样式——倾斜,其实只是为了给样式而已
:行内元素标签,表示专业词汇,本身带样式——倾斜
:行内元素,表示文档中的关键字或产品名,本身带样式——加粗,b:bold
:行内元素,表示非常重要的内容,通常是把一段非常重要的内容包起来,本身带样式——加粗

语义化的标签

语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网页的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签表示是标题,p标签表示是段落,ul,li标签表示列表,a标签表示链接,dl,dt,dd表示定义列表等,语义化的标签不多

html图像标签

标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:
1. src="./images/pic.png",定义图片的引用地址
2. alt="",定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片,盲人读屏软件会读这个文字让盲人识别图片,所以此属性相当重要

具体用法:


绝对路径和相对路径

相对路径:相对于网页文件本身,./表示当前路径,可以省略
绝对路径:文件迁移能力差,一般不用,相对于磁盘的位置,eg:C:\users...\pic.png

html链接标签

标签可以在网页上定义一个链接地址,它的常用属性有:
1. href属性 定义跳转的地址
2. title属性 定义鼠标悬停时弹出的提示文字框
3. target属性 定义链接窗口打开的位置,有_self:缺省值,新页面替换原来的页面,在原位置打开;_blank:新页面会在新开的一个浏览器窗口打开

具体用法:

跳转到百度


百度一下

列表

列表分为有序列表和无序列表

  • 有序列表

实际开发过程用得不多

  1. 列表文字一
  2. 列表文字二
  3. 列表文字三
  • 无序列表

一般用在新闻列表


关于标签li的记忆:list,ol:ordered list,ul:unordered list

  • 定义列表

定义列表通常用于术语的定义。

标签表示列表的整体。
标签定义术语的题目。
标签是术语的解释。一个dl中可以有多个题目和解释,代码如下:

    

前端三大块

html
负责页面的结构
css
负责页面的体现
javascript
负责页面的行为

记忆:dt中的t可以理解为title,dd中第二个d可以理解为description

html表格

标签,声明一个表格,它的常用属性如下:
1. border属性,定义表格的边框,设置值是数值
2. cellpadding属性,定义单元格内容与边框的距离,设置值是数值
3. cellspacign属性,定义单元格与单元格之间的距离,设置值是数值
4. align属性,设置整体表格相对于浏览器窗口的水瓶对齐方式,设置值有:left | center | right

 定义表格的表头,thead元素应该与tbody和tfoot元素结合起来使用。
 放数据本体
 放表格的注脚
每个页面都有head ,body两部分,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。但是真正写的时候,可以只用th和td和tr

标签:定义表格中的一行,table row

标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格——h可以记忆为header,th默认居中加粗,他们的常用属性如下: 1. align:设置单元格中内容的水瓶对齐方式默认left,设置值有:left | right | center 2. valign:设置单元格中内容的垂直对齐方式,记忆:vertical align,top | middle | bottom 3. colspan:设置单元格的水平合并,设置值是数值 4. rowspan:设置单元格的水质合并,设置值是数值

用法示例:

    
1 2 3
1 2 3

示例2:

    
基本情况
胡歌的图片

视频与音频




视频与音频的属性是一样的,常用属性如下:

src:视频或音频的来源
controls:是否显示控制条
loop:是否循环播放
preload:是否预加载,none:不预加载,metadata:部分预加载,auto:全部预加载(默认值)
width/height:设置视频播放区域的宽度和高度
autoplay:是否自动播放

页面布局

布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有极地排列在页面上,布局的方式分为两种:

  1. table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片等元素放入单元格中,隐藏表格的边框,从而实现布局。这种布局方式也叫传统布局。
  2. HTML+CSS布局(DIV+CSS):主要通过CSS样式设置来布局文字或图片等元素,需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局,它比传统布局要复杂,目前是主流的布局方式。

table方式

table来做整体页面的布局,布局的技巧归纳为如下几点:

  1. 按照设计图的尺寸设置表格的宽高以及单元格的宽高
  2. 将表格的border、cellpadding、cellspacing全部设置为0
  3. 针对布局复杂的布局,可以在单元格里面再嵌套表格,嵌套表格划分布局的空间
  4. 单元格中的元素或者嵌套表格用align和valign设置对齐方式
  5. 通过属性或css样式设置单元格中元素的样式

应用:制作简历




    个人简历
    


    
张达山
18323954188
[email protected]


个人基本情况
姓       名:张达山 籍       贯:北京昌平
性       别: 身       高:174cm
民       族: 体       重:70kg
出生日期:1992-09-23 电       话:18223954188
专       业:工业设计 现居住地:昌平天通苑


教育背景及工作经历
2008.09-2011.06 北京邮电大学 工业设计专业
2011.06-2012.09 北京微创信息科技有限公司 前端开发工程师


所获荣誉
2008年 荣获“高级美术设计师”证书
2011年 荣获“优秀毕业生”称号

HTML表单

表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

1. 
标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式,默认为get方式,即通过地址栏提交。对于敏感信息,通常通过post方式提交 2.

代码示例:




    表单实例
    


    

注册表单

rap python

HTML5新增标签

新增语义标签

1. 
页面头部,页眉 2.

音频视频

PC端兼容h5的新标签的方法,在页面中引入以下js文件

表单控件

新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

    



















新增常用表单控件属性:

  1. placeholder 设置文本框默认提示文字,placeholder意为占位符
  2. autofocus 自动获得焦点,不用设置值,直接加属性即可
  3. autocomplete 联想关键词,一般是取消掉(autocomplete="off"),自己做

你可能感兴趣的:(HTML基础知识)