黑马程序员 HTML基础
------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ------
一、 常用HTML标签及属性：
body：bgcolor表示背景颜色
<img>：src指明图片的链接地址，alt表示在图片无法显示的时候显示的文字。注意图片是链接的，不是插入的。border属性指定边框，border="0"不显示边框，width、height属性知道图片的显示大小，如果不指定则是图片的原始大小。（最好指定width、height，这样即使图片还未加载完，也会先占据位置）
缩略图：如果要在网页上显示小图（比如缩略图），不要仅仅把大图设定小的width、height来使图片变小，因为这样仍然会下载大图，导致加载速度慢，增大服务器的压力。
font：color文字颜色
<center>居中显示
<h1>~<h6>标题大小
二、 常用特殊符号：
< 小于号，less than
> 大于号，greater than；
空格,no-break space
为什么HTML中<>要用<、>代替？因为<>有特殊的含义
三、 <br/>和<p>的区别？
回车只是换行，p定义段落，前后会有空白行。
四、 URL：资源在网络中的地址
相对URL：相对于当前文档的资源，"/"表示网站根目录，"../"表示父目录,"../../"表示父目录的父目录，"./"或者不写任何斜线，表示相对于当前路径的目录。站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。如：<ahref="a.html"><img src="a.jpg"/></a>
<a>的target属性：值"_blank"就是在新窗口中打开超链接（国内网站大多采用这种方式）；
<a>的锚点：用name属性给<a>起名字，<a name="last">这是是最后</a>。可以通过<ahref="#last">转到最后</a>来跳转到超链接的部分。
五、 ul和ol
ul：unordered list，无序列表
<ul>
<li>灌水区</li>
<li>版务区</li>
</ul>
ol：ordered list，有序列表，用的很少
table表格
<!--table的用法-->
<table border="1"><tr><td>姓名</td><td>年龄</td></tr><tr><td>tom</td><td>20</td></tr><tr align="center"><td>Jim</td><td align="right">23</td></tr>
</table>在<table>内部通过<tr>创建一行，<td>创建单元格。默认table没有边框，属性<table border="1">设置边框的宽度为1。
<tr>的属性：align（水平对齐方式），可选值left、righ、center；valign（垂直对齐方式），可选值top、middle、bottom。
<td>也有alig和valign
align对齐方式，如<tr align="center">整行中间对齐，<td align="right">单个单元格右对齐。
子标签默认继承父标签的属性，也可以单独指定该属性，将覆盖父标签的属性。
六、 表单
表单的作用：将用户输入的内容提交到服务器。
<form>：如果要提交数据到服务器，需要把<input>、<textarea>、<select>等表单元素放到form中。
<input >是主要的表单元素，示例：<input type="submit" />。
type的可选值有：submit（提交按钮）、button（普通按钮）、checkbox（多选框）、radio（单选按钮）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、reset（重置按钮）、text（单行文本框）、textarea（多行文本框）
input表单详解：
subit：点击submit按钮表单就会被提交到服务器，中午IE下默认按钮文本是“提交查询”，可以设置value属性修改按钮的显示文本。
text：size设置宽度，value为值，maxlength为可以输入的最大长度，readyonly只读。推荐<input type="text" readonly="readonly"/>。
checkbox：checked属性表是否被选中，推荐写法：<inputtype="checkbox" checked="checked"/>。
radio：相同name属性的为一组，不同readio设定不同的value值，这样通过name属性就知道谁被选中了，不用单独判断。
file：使用file，则form的enctype必须设置为multipart/form-data、method属性为post。
image：src属性指定图片的地址，用来美化按钮。
七、 select标签
单行下拉列表框，示例代码如下：
<select><option value="1">北京</option><option value="2">河南</option><option value="3">山东</option></select><option>：<option value="1">北京</option>，北京是显示的文本，value是值。
将一个option选中：<option value="2"selected="selected">河南</option>
实现“不选择”：<optionvalue="-1">--不选择--</option>
实现“多选”：<selectsize="2" multiple="multiple">
<optgroup>：为选项分组，示例代码如下：
<select><optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option></optgroup> <optgroup label="German Cars"><option value ="mercedes">Mercedes</option><option value ="audi">Audi</option></optgroup></select>八、 textarea
多行文本框，属性rows、cols控制TextArea的行高和列宽。
给textarea默认值：<textarea>我是默认值</textarea>。
九、 label
作用：修饰元素A，就相当于将焦点聚焦到A。代码示例：
<label for="isMarried">婚否</label> <input id="isMarried" type="checkbox" />
点击“婚否”，等于点击了id为isMarried的input。
十、 filedset
相当于WinForm中的Groupbox效果，将一些控件划分为一个区域，看起来更规整。
十一、 div
层：<div></div>将内容放到层中，就可以将这些内容当作一个整体进行处理，比如整体隐藏、整体移动。
十二、 span
div是将内容放到一个矩形的区块中，会影响布局，而span只是将一段内容定义成一个整体进行操作，但不会影响布局显示。
十三、 练习（登录页面）
<form action="index.htm" method="post"><table><tr><td colspan="2" align="center">登录</td></tr><tr><td>用户名</td><td><input type="text"/></td></tr><tr><td>密码</td><td><input type="password"/></td></tr><tr><td colspan="2"><input id="remember" type="checkbox" /><label for="remember">记住我？</label></td></tr><tr><td colspan="2" align="center"><input type="submit" value="登 录" /></td></tr></table>
</form>十四、 练习（注册页面）
<form action="index.htm" method="post">
<table><tr><td colspan="2" align="center">注册</td></tr><tr><td>用户名</td><td><input type="text" /></td></tr><tr><td>密码</td><td><input type="password" /></td></tr><tr><td>重复密码</td><td><input type="password" /></td></tr><tr><td>省份</td><td><select><option>北京</option><option>重庆</option><option>河南</option></select></td></tr><tr><td>性别</td><td><input type="radio" name="gender" checked="checked" />男<input type="radio" name="gender" />女<inputtype="radio" name="gender" />保密</td></tr><tr><td>职业</td><td><input type="radio" name="job" checked="checked" />学生<input type="radio" name="job" />公司职员<inputtype="radio" name="job" />其他</td></tr><tr><td>爱好</td><td><input type="checkbox" />登山<input type="checkbox" />篮球<input type="checkbox" />足球<inputtype="checkbox" />读书<input type="checkbox" />游泳</td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册" /></td></tr>
</table>
</form>十五、 CSS
层叠样式表，用来美化页面。
三种使用方式：
1.元素内联，直接将样式写在元素的style属性中，如 <a href="#"style="text-decoration:none;">新浪</a>。
2.页面嵌入： 在head中加入<styletype="text/css"> a{text-decoration:none;} </style>表示页面中所有的a都采用指定样式，适用于样式复用，减小页面体积。
3.外部引用：将css内容写入css后缀的文件，然后在页面中引用，在head中加入<linktype="text/css" rel="stylesheet"href="style.css"/>，适用于多个页面共享css。
1．常见样式：
计量单位：px（像素）、百分比、em（相对单位）；
background-color： 背景颜色；
color：文本颜色；
border-style：边框风格，值：solid（实线）、dotted（点线）等。
border-color：边框颜色；
border-width：边框宽度；
实例：style="border-color:red; border-width:1px;border-style:dotted"，它的简写形式是：style="border:1pxdotted red"。
display：是否显示，none(不显示）、block（显示为块元素）、inline（显示为内联元素）等。
cursor：鼠标样式，可选：pointer（手）、text（输入bean）、wait（忙）、help（帮助）等。
取出li的原点：list-style-type:none;
2．CSS选择器：
（1）class选择器：
定义一个命名样式，然后在元素的class属性指定该名称，一个元素可以指定多个class名称，之间以空格隔开。
如：
.hey{color:red;font-size:x-large;}
<span class="hey">hello，哈喽</span>（2）标签+class选择器
针对不同的标签，可以使用相同样式名，但是样式内容可以不一样。代码示例：
input.uname{color:Red;}label.uname{text-decoration:underline;}
<input type="text" class="uname" /><labelclass="uname">用户名：甄子丹</label> （3）ID选择器
为指定ID的元素设定样式，id前加#
（4）更多选择器
1. 关联选择器
p strong{background-color:yellow;}表示p标签内的strong子标签使用的样式，应用如下：
<p><strong>白日依山尽</strong></p>2．组合选择器
同时为多个标签设定同一个样式
h1,h2,input{border:1px dotted red;}3．伪选择器
为标签的不同的状态设定不同的样式
常用的有：
A:visited 超链接被访问过的样式
A:hover，鼠标停留在超链接上时的样式
A:link 超链接未被访问时的样式
a:active超链接点击后的样式
------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ------
黑马程序员 HTML基础相关推荐
- 黑马 程序员——Java基础---流程控制
黑马程序员--Java基础---流程控制 ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------ 一．概述 Java提供了两种基本的流程控制结构:分支结构 ...
- 黑马 程序员——Java基础---IO(下)
黑马程序员--Java基础---IO(下) ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------ 一.概述 Java除了基本的字节流.字符流之外,还提供 ...
- 黑马程序员 python 基础版 哪个老师_(看黑马程序员Python基础班视频挺好，犹豫该不该报班？)...
看黑马程序员Python基础班视频挺好,犹豫该不该报班? 如果看视频比较好的话,还是建议自学吧,毕竟录制视频的老师不一定参与实质的讲课,且能自学也省一笔培训费用了.我是看的bilibili上黑马程序员 ...
- 黑马程序员-黑马程序员训练营基础测试
---------------------- ASP.Net+Unity开发. .Net培训.期待与您交流! ---------------------- 为了帮助更多的人了解黑马,让更多想知道黑马测 ...
- 黑马程序员_基础测试
-------android培训.java培训.期待与您交流! ---------- 黑马程序员训练营基础测试题及个人代码(包含思路.步骤和基本注释) 1. 编写程序计算12+22+32+....+1 ...
- 黑马程序员-iOS基础-Objective-C基础（六）内存管理
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 黑马程序员-iOS基础-Objective-C基础(六)内存管理 一.内存管理的必要性 移动设备 ...
- 黑马程序员——JavaScript基础1（初识 JavaScript）
文章目录 一.初识 JavaScript 1.1 JavaScript 是什么 1.2 JavaScript 的作用 1.3 HTML/CSS/JS 的关系 1.4 浏览器执行 JS 简介 1.5 J ...
- 黑马程序员 C++ 基础语法入门 学习记录
基础语法入门 文章目录 一.初识C++ 1.1 新建项目 1.2 编写项目 1.3 运行程序 1.4 注释 1.5 变量 1.6 常量 1.7 关键字 1.8 标识符命名规则 二.数据类型 2.1 整 ...
- 黑马程序员___Java基础[02-Java基础语法](一)
Java语言基础组成 一.关键字 1)定义:被Java语言赋予了特殊含义的单词 2)特点:关键字中所有字母均为小写 3)作用及分类: 下面是Java语言保留专用的50个关键字: 用于定义数据类型的关键 ...
- 黑马程序员--Java基础加强篇
开发工具使用 --------------------------------------------------------------------------------------------- ...
最新文章
- 09JavaScript中的作用域
- 「SAP 技术」SAP BP显示供应商账户组时候的怪现象
- docker 端口被占用问题解决
- 开发者必备的12个JavaScript库
- 对应生成树的基本回路_数据结构与算法——最小生成树
- Oracle学习：序列
- rabbitmq 在centos下的安装
- python辅导机构_推荐靠谱python辅导机构！
- 【每日一题】7月15日题目精讲—生日快乐
- MySQL工作笔记-使用JPA映射mysql数据库要注意的地方
- oracle过滤数据,过滤数据 (Oracle Solaris Studio 12.2：性能分析器)
- 思杰20140522
- Android系统--输入系统（八）Reader线程_使用EventHub读取事件
- 牛皮！竟然有大佬基于 Spring Boot + Vue 开发了一套网易云QQ音乐（附源码）。。。...
- HTML标记特定,制作asp：标记特定的HTML标记
- 《数学建模算法与应用》方法概述
- 网吧用计算机性能配件清单,网吧主机都是什么配置？看看清单就知道！
- Android动画学习——Tween Animation
- layui 下拉框多选
- 虚幻4_添加武器插槽到骨骼