HTML
iteye_5032
这个作者很懒,什么都没留下…
展开
-
HTML&CSS基础学习笔记1.1-简单网页中有哪些标签?
一个简单网页中有哪些HTML标签?平时我们看到的网页,都是由HTML的标签来组成的。HTML标签非常多,我们先来认识一部分。1. <html></html>称为根标签,所有的网页标签都在<html></html>中。2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<s...原创 2016-07-04 19:06:42 · 67 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.19-DIV标签1
div标签这里我们要认识一下HTML里使用非常多的的一个标签:<div>。<div>标签定义文档中的分区或节(division/section),他可以把文档分割为独立的、不同的部分。它也可以用来布局,划分网页的区域。在标签的嵌套使用上会经常使用<div>标签,让页面结构更加清晰。具体使用是这样的:<!DOCTYPE html>...原创 2016-08-13 09:36:04 · 62 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.20-DIV标签2
<span>标签标签div把文档分割为独立的、不同的部分,而在HTML中,<span>标签则被用来组合文档中的行内元素。看个实例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">原创 2016-08-16 09:55:23 · 47 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.21-语义化标签
语义化标签“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。HTML 标签语义化是让大家直观的认识标签和属性的用途和作用,很明显<hx>看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。HTML标签语义化的设计思维其实就是给某块内容用上一...2016-08-19 09:46:48 · 81 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.22-简单的注册页面
一个简单的注册页面表单提交是前后端数据交互的一种方式。代码区是一个注册页面,其中包含了以下标签:<form>、<table>、<input>、<button>、<textarea>、<select>。我们可以称它们为表单控件,仔细观察这些标签的结构,和在页面上的表示形式。<!DOCTYPE html&g2016-08-23 09:54:35 · 74 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
文本域<textarea>标签定义多行的文本输入控件。平时在网页上的一些需要输入比较多的内容的输入框,比如回复帖子,回答问题等,都可以用<textarea>标签。<textarea>文本区中可容纳无限数量的文本,可以通过 [cols] 和 [rows] 属性来规定 <textarea> 的尺寸。例如:<textarea col...2016-08-26 09:41:58 · 95 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.24-input标签的单选与多选
单选和多选单选框和多选框是用<input>标签来实现的。<input>标签的type属性值为"checkbox"时,表示多选框,为"radio"时表示单选框。 一个多选列表一般具有2个或两个以上的多选框,它们都具有属性name,且属性name值相同,当这些多选框具有属性checked时,表示选中,没有checked属性表示未选中。在一个多选列表内,可以有复...2016-08-30 09:41:36 · 192 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
选择文件<input>标签的[type]属性值为"file"时,表示文件选择控件,右侧的页面添加了一个文件选择控件,您可以尝试为网页添加一个文件。我们可以用这个标签来实现上传头像,上传附件等功能。 [html] view plain copy <!DOCTYPE html> <html lang="en">...2016-09-02 09:39:50 · 117 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.26-input重置表单
重置表单<input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签。 <input>的[type]属性值为"reset"时,表示表单重置,它在页面的表现形式也是个按钮,但点击他的时候会让表单重置到页面刚加载时的状态。看一段代码吧:<!DOCTYPE html> &l2016-09-06 12:11:56 · 120 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.27-input提交数据
提交数据我们在表单上填的信息很多情况下需要提交到后台。<input>的[type]属性值为“submit”时,表示提交表单数据。它在页面的表现形式也是个按钮,点击该按钮,表单数据将会提交给服务器。<button>标签也具有[type]属性,在表单中,<button>(除了 在Internet Explorer中)默认行为是提交表单,与type="s...2016-09-09 10:45:55 · 84 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么?当HTML配合CSS一起使用时,我们发现页面变得好看了很多。那么CSS到底是什么呢?CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签在浏览器内的显示样式,如文字大小、颜色、字体加粗等。我们可以这么说,CSS是网页的衣服,它可以用来装饰网页。那么接下来我们就来试试css吧~ 给网页添加一个CSS样式尝试给&...2016-09-12 11:11:23 · 86 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.29-灵活地使用样式
灵活的使用样式使用样式的感觉很棒吧!刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦。而如果我们使用内部样式表,我们只需要定义<p>标签的文字大小,所有<p>标签就都具有这个样式了。看个例子吧: 更加实用的使用方式使用内部样式表,我们能够把页面上的共通样式提取...原创 2016-09-15 09:37:39 · 114 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.30-颜色的表达
颜色的表述在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种: 1、英文命令颜色前面几个知识点中经常用到的就是这种设置方法:p{color:green;} 2、RGB颜色这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)...2016-09-20 10:29:23 · 114 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.31-像素和相对长度
像素和相对长度之前的笔记中,我们提到过用属性width、height来设置图片的尺寸,它们的单元都是”px(像素)”。长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。1、像素像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使...2016-09-23 10:07:27 · 103 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法。 选择器主要分为:元素标签选择器、通用选择器、类选择器、ID选择器、属性选择器、组合选择器、伪类选择器、伪元素选择器。先做个了解,底下的css笔记会详细介绍不同的选择器~<!DOCTYPE html><html lang="en"><head> &...2016-09-27 10:54:20 · 116 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.18-表格的边框
今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧表格的边框前面为了方便观察表格单元格的情况,我们给<table>加了border属性。<table>的border属性规定围绕表格的边框的宽度。 [border]属性会为每个单元格绘制边框,并用边框围绕表格。如果border属性的值发生改变,只有表格周围边框的尺寸会发生变化,表格内部的边框不受影响。...2016-08-10 09:37:40 · 86 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.17-表格头部与尾部
表格的头部和尾部既然有标签表示表格的主体,那么自然表格的头部和尾部也有对应的标签。HTML中使用<thead>标签表示表格的头部,使用<tfoot>标签表示表格的尾部。 有了头部和尾部之后,<table>里的结构就是这样:Html代码 <table> <thead> ...2016-08-06 09:17:39 · 115 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.16-单元格间距和表格主体
上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识。单元格间距在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白。这是由<table>的[cellspacing]属性控制的:<!DOCTYPE html> <htmllang="en"> <head> ...2016-08-03 10:10:03 · 103 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.2-HTML的全局属性?
HTML元素都有属性,下面的这些全局属性是所有的HTML元素都可以使用的。 常见的有: HTML元素也有一些本身自己独特的属性,我们以后的笔记中有机会,会再为大家介绍哦。 部分内容可参考下图:http://www.mayacoder.com/Lesson/unit?id=1...原创 2016-07-05 10:25:39 · 59 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.3-HTML的标签语法
HTML标签语法1. 标签由英文尖括号<和>括起来,如<html>就是一个标签。2. HTML中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。如: <p></p>3.标签的内容是开始标签与结束标签之间的内容,如:<h1>这是标题</h1>。4. 标签与标签之间是可以嵌套的,...原创 2016-07-07 11:18:01 · 56 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.4-定义文档类型
定义HTML的文档类型Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版...2016-07-09 11:13:26 · 93 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.5-添加常用标签
我们直接上代码吧:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单的网页</title> <script src="index.js"&am2016-07-11 10:59:59 · 68 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.6-html的文本操作标签
文本也许是HTML里最常见的元素了,所以我们有必要对HTML的文本操作标签做下认识。1. <em>,<i>内的文字呈现为倾斜效果;2. <strong>,<b>内的文字呈现为加粗效果;3. <b>,<i>只是单纯的为了让文本具有某种特殊样式,而<strong>,<em>不仅带有特殊2016-07-13 10:07:50 · 67 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.7-高亮文本及组合使用
HTML提供了<mark>标签可以让你的文本高亮,这样看起来更加醒目。<mark>标签内的文本会呈现特殊的样式,它和<em>,<strong>一样也是一个带有语义的标签。代码如下: <!DOCTYPE html><html lang="en"><head> <met2016-07-15 10:41:07 · 81 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.8-预格式文本
今天的内容比较简单轻松,毕竟是周末嘛,好好玩耍吧~言归正传,看看今天要讲的预格式吧<pre>标签的主要作用是预格式化文本。被包围在 pre 标签中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。当然你也可以在你需要在网页中预显示格式时使用它。会使你的文本换行的标签(例如<h>、<...2016-07-17 09:43:36 · 68 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.9-添加图片
<img>标签是用来添加图片的~<img>标签的使用方法:<img src="图片的地址">先来看段实例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">2016-07-19 09:51:24 · 79 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.10-添加链接
我们可以设置链接的目标,使我们点击后可以跳转到我们想要去的地方。<a>标签的 href 属性用于指定超链接目标的 URL。在页面中添加的<a>标签,浏览器会用特殊效果显示,这样用户就会知道它是一个可以链接到其他文档的超链接。看一段代码:<!DOCTYPE html><html lang="en"><head> <..2016-07-21 09:45:26 · 59 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.11-导航栏
上一篇html的博客,我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏。其实在实际运用中,<a>标签就经常会被用来生成导航栏。导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式。语义化标签我们将会在后面讲到。我们在这里先使用下&...2016-07-23 09:46:12 · 74 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.12—引入样式表
引入样式表我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣。如何让网页披上这层外衣呢?这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用。<link>标签属于头部标签,一般嵌套在head标签内,定义了文档与外部资源的关系,最常见的用途是链接样式表。<link>标签链接样式表的写法:<link hr...2016-07-25 10:24:06 · 123 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.13—无序列表
无序列表有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记。它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示:<ul> <li></li> <li></li>2016-07-27 10:08:09 · 85 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.14—有序列表及列表嵌套
我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧。 有序列表现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去。HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示。它的代码模板是这样的:<span style="f...2016-07-30 09:58:37 · 207 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.15-合并单元格
合并单元格之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下:1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数;2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵...2016-08-01 09:31:08 · 144 阅读 · 0 评论 -
HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器:p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这样认为: 如果你想要让页面中所有的指定元素都有这个CSS效果,可以使用元素选择器。 有这样一段html代码:&...2016-10-02 10:29:58 · 156 阅读 · 0 评论