从零开始,学习web前端之HTML基础
来源:互联网 发布:淘宝双11打折 编辑:程序博客网 时间:2024/05/15 23:52
原作者:http://blog.csdn.net/yuzhiqiang_1993/article/details/58589394
我在大学的专业是计算机网络技术,大学期间有这样一门课是“网页设计与制作”,当时对这门课挺感兴趣,就学习了下。通过简单的html、css和js能展现出自己想要的东西,感觉挺有意思的。
虽然阴差阳错之下成为了一名Android开发工程师,但是前端方面的知识也一直在关注,空余时间也学习的一些东西,试着做了一些简单的东西,我的个人网站:http://yuzhiqiang.name/或http://yzq.name/.
但是平时学习的话都是这个学学,那个看看,没有一个系统的学习,总感觉知识点掌握的不是太牢靠。正好这段时间项目刚做完,决定系统的学习一下前端方面的知识,以备不时之需。
这个博客的话就当是学习的时候做个笔记,同时也希望能够给想学习前端的同学做一个参考。
什么是前端
前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。
前端设计也就是UI或美工他们的工作,他们负责设计出好看的效果图。
前端开发的工作就是将美工或UI提供的效果图通过HTML+CSS+JS技术来生成网页
认识网页
1) 网页是由文字、图片、音频、视频、超链接等组成的。
2)w3c组织制定了web的标准
html:结构标准 (网页的整体架构)
css:表现标准 (网页的美化)
js:行为标准 (网页的交互)
浏览器
我们通常是通过浏览器去浏览网页,有时候会发现用不同的浏览器或者不同的模式(极速模式/兼容模式)访问同一个网页显示的效果不同,这是因为浏览器内核(渲染引擎)有差异。渲染引擎也是引起兼容性问题的根本原因。
目前市面上的浏览器内核主要有四种
1、Trident内核代表:Internet Explore
2、Gecko内核代表:Mozilla、Firefox
3、WebKit内核代表:Safari、Chrome
4、Presto内核代表:Opera
HTML
hyper text markup language:超文本标记语言
Html的结构标准:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
Html标签分类
1)单标签: <! Doctype html> <br/> <hr/>
2)双标签 : <html></html> <head></head> <title></title>
Html标签关系分类
包含(嵌套关系) <head><title></title></head>
父子
并列关系 <head></head><body></body>
兄弟姐妹
head标签
在网页中我们一般是在head标签中去设置网页的属性
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
告诉浏览器以最新版本的ie内核去渲染页面或者使用Google Chrome Frame(谷歌内嵌浏览器框架GCF)去渲染页面
- 1
- 1
网页关键字,有利于seo的收录
- 1
- 1
网页的描述
- 1
- 1
网页重定向 2秒后跳转到百度首页
- 1
- 1
默认设置超链接打开新的窗口
- 1
- 1
网页的logo 在线制作
- 1
- 2
- 1
- 2
链接外部样式表
- 1
- 1
链接外部js脚本
- 1
- 1
常用标签
- 1
- 2
- 3
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
文本标签
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
图片标签
- 1
- 1
Src: 图片的来源 必写属性
Alt : 替换文本 图片不显示的时候显示的文字
Title:提示文本 鼠标放到图片上显示的文字
Width : 图片宽度
Height : 图片高度
图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。
超链接
- 1
- 1
href : 去往的路径(跳转的页面) 必写属性
title : 提示文本 鼠标放到链接上显示的文字
target=”_self” : 默认值 在自身页面打开(关闭自身页面,打开链接页面)
target=”_blank”: 打开新页面 (自身页面不关闭,打开一个新的链接页面)
锚链接
1.先定义一个锚点
- 1
- 1
2.超链接到锚点
- 1
- 1
特殊字符
列表
1)无序列表
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
2)有序列表
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
3)自定义列表
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
滚动
表格
表格一般用于展示数据,推荐使用标准的表格结构,有利于seo
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
属性:
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ,tr或者td内容居中。
bgcolor=”red” 背景颜色。
表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格 <th></th>
用法和td一样,标题的文字自动加粗水平居中对齐
垂直对齐方式:Valign=”top | middle | bottom”
表格边框颜色:bordercolor="red"
表单
表单一般是由提示信息和表单控件组成的,用于收集信息。平时网页上的登录,注册就是表单。
表单域
- 1
- 1
属性:action:处理信息
Method=”get | post”
Get通过地址栏提供(传输)信息,安全性差。
Post安全性高。
文本输入框
- 1
- 1
maxlength=”6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled=”disabled” 输入框未激活状态
name=”username” 输入框的名称
value=”大前端” 默认值
密码输入框
- 1
- 1
文本输入框的属性和密码输入框属性通用
单选框
- 1
- 2
- 1
- 2
只有将name的值设置相同的时候,才能实现单选效果。
checked=”checked” 设置默认选择项。
复选框
- 1
- 2
- 3
- 1
- 2
- 3
checked=”checked” 设置默认选中项
下拉列表
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
multiple=”multiple” 将下拉列表设置为多选项
selected=”selected” 设置默认选中项目 <optgroup></optgroup>
对下拉列表进行分组。
label=”” 分组名称。
多行文本域
- 1
- 2
- 1
- 2
cols 控制输入字符的长度。
rows 控制输入的行数
文件上传
- 1
- 1
multiple=”multiple” 多选
accept=”application/msword” 选择的文件格式
提交按钮
- 1
- 1
具有提交功能
普通按钮
- 1
- 1
普通按钮,一般配合js使用
图片按钮
- 1
- 1
重置按钮
- 1
- 1
将信息重置到默认状态
表单分组
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
<fieldset></fieldset>
对表单信息分组 <legend></legend>
表单信息分组名称
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
例如:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
标签语义化
好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。比如w3cSchool
标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
标签语义化意义:
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取;
3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
4:便于团队开发和维护
标签语义化注意事项
1:尽可能少的使用无语义的标签div和span;
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3:不要使用纯样式标签,如:b、font、u等,改用css设置。
4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);
如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我web前端的博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,谢谢!
- 从零开始,学习web前端之HTML基础
- 从零开始,学习web前端之HTML基础
- 从零开始,学习web前端之css基础
- 从零开始,学习web前端之js基础
- web前端学习------HTML基础
- 从零开始,学习web前端之js特效
- 从零开始,学习web前端之jQuery
- 从零开始,学习web前端之CSS3
- 从零开始,学习web前端之js高级
- web前端之html从零开始(一)-----第一个html
- web前端之html从零开始(二)----a标签学习,强化
- 前端基础学习之HTML
- WEB前端开发学习----1.HTML基础
- web前端学习Day01--HTML基础结构
- Web前端基础----HTML
- WEB前端-HTML-基础
- 从零开始,学习web前端之DOM和BOM
- 从零开始学习WEB前端之数据交互(Ajax)
- CentOS下安装配置Phabricator
- CSS基本样式和模型
- 函数可重入
- CentOS安装mysql
- 微信中body的touchmove事件(下拉显示网址)影响元素的touchmove事件的解决方法
- 从零开始,学习web前端之HTML基础
- 【R的机器学习】机器学习概述和决策树
- 如何将Mysql中的datetime时间格式后面的.0去掉
- Python日期时间函数
- 加载页面时 lygrid 默认选中
- 最小生成树:普里姆算法.c++
- 面试简历可以用到的经典
- 手把手教你搭建SpringMVC
- Image