基本语法
1.head显示头部标签lina里面有meta表示编码格式.
2. body表示网页正文的内容.
3. 标签一般是成双成对< >…</ >
4. 第一行是文档声明,指定页面所使用的html的版本,这里声明的是一个html5的文档.
5. 注释快捷键Ctrl+/.
常见的html标签
1.双标签和单标签.
2.标签内容在双标签之间,单标签是没有标签内容的,双标签之间可以容纳其他标签.
3.< h>是标题标签.< p>是段落标签.< div>是容器标签.
4.< hr>水平的分割线.< img>显示图片.< br>另起一行.
5.带有属性的标签,里面有属性值,例如< img>标签.
6.不能交叉嵌套.
资源路径
1.相对路径:从当前位置开始的路径是相对路径.
2.绝对路径:从根目录开始算起的路径是绝对路径.
3.相对路径的两种写法"./name/work"第二种"name/work"
列表标签
1.无序列表标签:
< ul>
< li>苹果 < /li>
< /ul>
开头会是一个点.
2.有序列表标签:
< ol>
< li>苹果 < /li>
< /ol>
开头是序号.
表格标签
< table>:表示一个表格.< /table>
< tr>…< /tr>表示行.
< th>…< /th>表示表头.
< td>…< /td>表示列.
在表格中加属性可以作出表格的边线,
例如:
< tr style = “border: 1px solid black;”>…< /tr>
在table标签中加一个border-collapse: collapse表示边框合并中间没有缝隙.
表单
表单就是搜集不同类型的用户输入的数据,然后可以吧用户数据提交到web服务器.
1.< form>表示表单标签定义整体表单区域.(使用for = “name” id = "name"可以给指定的输入项设置光标)
2.< label>标签 表示表单元素的文字标注标签，定义文字标注.
3.< input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式.
type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
4.< textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框.
5.< select>标签 表示表单元素的下拉列表标签 定义下拉列表
< option>标签 与< elect>标签配合，定义下拉列表中的选项
示例:
<form>
<p>
<label for = "name">姓名：</label><input type="text" id = "name">(for设置光标的示例)
</p>
<p>
<label>密码：</label><input type="password">
</p>
<p>
<label>性别：</label>
<input type="radio"> 男
<input type="radio"> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox"> 唱歌
<input type="checkbox"> 跑步
<input type="checkbox"> 游泳
</p>
<p>
<label>照片：</label>
<input type="file">
</p>
<p>
<label>个人描述：</label>
<textarea></textarea>
</p>
<p>
<label>籍贯：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
表单提交
当表单进行提交的时候,要为表单的每一个标签设置属性.
action属性设置表单要提交的地址.
method属性设置提交的方式一般是GET或者是POST.
name属性每一个元素设置名字参数.
value属性如果是文本则不需要,如果是选项或者是下拉菜单则需要设置(选项没一个都要名字和值,但是下拉菜单只有一个主名字不需要每一个都设置.
css
一种美化页面的语言.
作用:
1.美化界面,设置标签文字大小、颜色、字体加粗等。
2.控制页面布局，设置浮动、定位等样式。
选择器：
标签名{
属性名：属性值;
}
css是由两个主要的部分组成的：选择器和一条或多条样式规则。是层叠样式表。
有三种引入方式：
1.行内式（直接在style属性中添加css样式）
<div style="width:100px; height:100px; background:red ">hello</div>
优点直观，缺点不可重用。
2.内嵌式（在< head>标签内加入< style>标签，在< style>标签中编写css代码。）
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。
3.外链式
将css代码写在一个单独的.css文件中，在< head>标签中使用< link>标签直接引入该文件到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。
4. css引入方式选择
（1）行内式几乎不用
（2）内嵌式在学习css样式的阶段使用
（3）外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。
css选择器
用来选择标签，选择后给标签添加样式。
1.标签选择器：在style中设置好某一个种类标签的样式，只要匹配都必须执行。
2.类选择器在：同样在style中设置好某一个类的样式，类以点开头。只要在后面的标签中有匹配的类都执行。
3.层级选择器（后代选择器）：根据层级关系选择只要是层级关系，类和标签都可以。
<style type="text/css">
div p{
color: red;
}
.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
</style>
<div>
<p>hello</p>
</div>
<div class="con">
<span>哈哈</span>
<a href="#" class="pink">百度</a>
<a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>
4.id选择器：以#号开头设置id，在标签中对应上的就可以使用样式。（注意：id只能在一个标签中使用）
5.组选择器：多个选择器组合使用。（可以把重复的样式选择写道一块儿）
6.伪类选择器：是对于其他选择器的附加效果，在选择器的后面加一个：然后跟伪类选择器名字。效果就是鼠标悬停变为附加效果。
css属性
-
布局常用样式属性
width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right; -
文本常用样式属性
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px -
布局常用样式属性示例代码
<style> .box1{ width: 200px; height: 200px; background:yellow; border: 1px solid black; } .box2{ /* 这里是注释内容 */ /* 设置宽度 */ width: 100px; /* 设置高度 */ height: 100px; /* 设置背景色 */ background: red; /* 设置四边边框 */ /* border: 10px solid black; */ border-top: 10px solid black; border-left: 10px solid black; border-right: 10px solid black; border-bottom: 10px solid black; /* 设置内边距， 内容到边框的距离，如果设置四边是上右下左 */ /* padding: 10px; */ padding-left: 10px; padding-top: 10px; /* 设置外边距，设置元素边框到外界元素边框的距离 */ margin: 10px; /* margin-top: 10px; margin-left: 10px; */ float: left; } .box3{ width: 48px; height: 48px; background:pink; border: 1px solid black; float: left; } </style> <div class="box1"> <div class="box2"> padding 设置元素包含的内容和元素边框的距离 </div> <div class="box3"> </div> </div> -
文本常用样式属性示例
<style> p{ /* 设置字体大小 浏览器默认是 16px */ font-size:20px; /* 设置字体 */ font-family: "Microsoft YaHei"; /* 设置字体加粗 */ font-weight: bold; /* 设置字体颜色 */ color: red; /* 增加掉下划线 */ text-decoration: underline; /* 设置行高 */ line-height: 100px; /* 设置背景色 */ background: green; /* 设置文字居中 */ /* text-align: center; */ text-indent: 40px; } a{ /* 去掉下划线 */ text-decoration: none; } </style> <a href="#">连接标签</a> <p> 你好，世界! </p>
元素溢出
当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。
overflow的设置项：
1.visible 默认值, 显示子标签溢出部分。
2.hidden 隐藏子标签溢出部分。
3.auto 如果子标签溢出，则可以滚动查看其余的内容。
显示特性
display 属性是用来设置元素的类型及隐藏的，常用的属性有：
1.none 元素隐藏且不占位置
2.inline 元素以行内元素显示。（使用这个就不能设置宽高，但可以设置元素溢出的滚动）
3.block 元素以块元素显示。（自己单独占一行，不与别人共用）
盒子模型
所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。
盒子模型相关样式属性
盒子的内容宽度(width)，注意：不是盒子的宽度
盒子的内容高度(height)，注意：不是盒子的高度
盒子的边框(border)
盒子内的内容和边框之间的间距(padding)
盒子与盒子之间的间距(margin)
设置宽高：
设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框:
设置一边的边框，比如顶部边框，可以按如下设置：
border-top:10px solid red;
说明:
其中10px表示线框的粗细；solid表示线性；red表示边框的颜色
设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;
设置内间距padding
设置盒子四边的内间距，可设置如下：
padding-top：20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下：
padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左
四个方向的内边距值。 */
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。
盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
1.盒子宽度 = width + padding左右 + border左右
2.盒子高度 = height + padding上下 + border上下
扫一扫
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
