黑马程序员技术交流社区

标题: HTML笔记 [打印本页]

作者: ...句号 时间: 2018-1-17 15:49
标题: HTML笔记

HTML笔记

HTML:Hyper Text Markup Language  ---超文本标记语言
标记语言:指的是通过一组标签的形式描述事物的一门语言
超文本:比普通文本更强大.
HTML的作用:
用来制作页面(静态页面).
HTML的使用:
在设计网站页面的时候都要使用HTML;
HTML的使用:
HTML文件的创建:
一个HTML文件,扩展名是.html或者.htm结尾
HTML的结构标签:
根标签:<html></html>
<html>
<head> : html的头
</head>
<body> : html的体
</body>
</html>
HTML的字体标签:
<br/>:换行标签
<font>标签:字体标签
<font>变迁的属性
<标签属性名="属性值" 属性名="属性值"></标签>
属性:
color属性:字体颜色
英文单词设置:black,red
使用16进制数设置:#FFFFFF,#FFF
size属性:字体大小
face属性:字体
排版标签:
标题标签:h标签<h1>...<h6>  自动换行并且改字体
段落标签:<p></p>
粗体标签:<b></b>
斜体标签:<i></i>
下划线:<u></u>
居中显示<center></center>
横分隔线:<hr/>
原生标签:<pre>
HTML标准:
网站图片页面显示:
技术分析:
HTML图片标签:
图片标签:<img>
属性:
src:图片来源
width:图片宽度
height:图片高度
alt:图片找不到显示的内容
图片的引入路径问题:
路径:相对路径
如果引入的图片和html文件在同一级路径
直接写文件名或者./文件名
   <img src="cs10006.jpg" />
   <img src="./cs10006.jpg" />
如果引入的图片在html文件的上一级路径。
* <img src="../cs10006.jpg" />
如果引入的图片在html文件的下一级路径。
* <img src="img/cs10006.jpg" />
网站列表页面的显示:
HTML类表标签:
有序列表
<ol>
<li></li>
</ol>
有序列表的属性:
type`属性
start属性:从哪开始,只针对数字有效果
无序列表
<ul>
<li></li>
</ul>
无序列表的属性:type`属性可改为点,圈,方块
HTML的超链接标签<a>
属性:
href:跳转路径
target :打开的方式
_self :在自身页面打开
_blank :新打开一个窗口
_parent :
HTML的表格标签:
<table>
<tr>:行
<td><td>:列
</tr>
</table>
属性:
width:表格宽度
height:高度
border:边框
align:表格水平位置
left
center:居中显示
right
<td>的属性:
* colspan=”列数” 跨列合并
* rowspan=”行数” 跨行合并
HTML的表单标签:<form></form> 提交数据到后台
   * 常用属性:
      * action属性:提交的路径.默认提交到当前页面
      * method属性:请求的方式.GET和POST.默认是GET.
*GET方式和POST方式的区别?
               * GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
               * POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素:
*<input type= "text"> 文本框
   * 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
*<input type= "password">:密码框
   * 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
*<input type= "radio">:单选按钮没有输入框,必须写value属性
   * 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
*<input type= "checkbox">:复选按钮  没有输入框,必须写value属性
   * 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
<input type= "button">:普通按钮,没有任何功能的按钮
*<input type= "submit">:提交按钮
<input type= "reset">:重置按钮
<input type= "file">:文件上传表单项
<input type= "hidden">:隐藏字段
<input type= "image">:图片按钮
*<select name 属性><option></option></select>:下拉列表
<testarea>:文本域
HTML的框架标签:
框架标签<frameset><frame/> </frameset> ,标签与<body>标签是冲突的,有frameset可以没有body
属性:rows和cols
使用<frame>标签,表示切分的每个部分
特殊字符的标签:
空格: 
< :<
> :>
HTML的块标签:
<div></div>:默认一个div独占一行
<span><span>:默认在同一行
CSS概述:
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
HTML相当于网站的骨架,CSS对骨架进行美化

CSS的基本语法:CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
选择器{属性:值;属性:值...;}
CSS的引入方式:
行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
?外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
rel 是制定样式表
CSS的选择器:
元素选择器：会将所有的div选中
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:#+ID名称{} 一般ID不重复,而id一般是我们js经常用的属性
#d1{
border:2px solid red;
}
类选择器：名称可重复,一般css会常用这个属性
.divClass{
border:2px solid yellow;
}
后代选择器
.divClass 子元素标签名{
border:2px solid yellow;
}
元素选择器<类选择器<id选择器
CSS浮动:
使用float属性可以完成DIV的浮动.
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

line-height 行高
CSS其他选择器
属性选择器:
要选择的对象[属性名= 属性值]{}
并列选择器:
要选择的对象[属性名= 属性值],要选择的对象[属性名= 属性值]{}
常见的选择器的书写方式
1.id选择器       以#开始       作用:找到id为这个的元素,一般不重复,而且经常在js中用
2.类选择器以.开始    作用:找到所有class的值为这个的所有元素
3.元素选择器       直接元素名    作用:找到所有的这个元素
4.后代选择器选择器1 选择器2 作用:找到所有'选择器1'下的所有的"选择器2"
5.子元素选择器  选择器1 > 选择器2 作用:找到所有'选择器1'一级"选择器2"
6.元素选择器选择器[属性名=属性值] 作用:找到所有的"选择器"下属性名是"属性名"值为"属性值"的所有
CSS模型:
内边距：padding.
如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
您也许已经想到了，下面的规则实现的效果与上面的简写规则是完全相同的：
h1 {
   padding-top: 10px;
   padding-right: 0.25em;
   padding-bottom: 2ex;
   padding-left: 20%;
   }
边框：border
外边距：margin
margin-top
margin-right
margin-bottom
margin-left
/*这个可以让div自己去根据屏幕的大小去居中显示*/
margin: 0 auto;
margin --->外边距 ---> 用来设置该元素距离其他元素的距离
padding --->内边距 --->设置内容距离自己边框的距离
CSS中的定位
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
定位:
position:常用的是
relative:相对的:相对的是自己的父容器
absolute:绝对的:相对的是网页的左上角
如何是自己的子控件居中
这个时候可以设置为相对定位:
然后设置自控键left : 50%, margin:子控件的负的50%的自身宽度

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2