html/css攻略历程

最新推荐文章于 2024-07-25 11:52:08 发布

放荡不羁_爱自由

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量748

点赞数 5

文章标签： html css

本文链接：https://blog.csdn.net/qq_14997793/article/details/51923058

版权

第一章 HTML基础

html网页基本标签

<html>
<head>
     <title>我的第一个网页</title>
</head>
<body>
     我的第一个网页
</body>
</html>

<title>标签 :网页标题
<body>标签： 里面放html的内容

<meta http-equiv="Content-Type" content="text/html; charset=gb2312”

<meta name="keywords" content="北大青鸟，IT培训" />

<meta name="description" content="北大青鸟是国内最大的……" />

<mate>标签：mate标签位于文档头部，用于提供页面的相关信息，常用于搜索引擎和更新频度的描述和关键词。

mate常用属性：

charset属性：设置网页字符编码常用的有utf-8和gbk。

name属性：keywords搜索关键字，description内容描述。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题标签:一共有6个从h1到h6,h1最大h6最小。

<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>

段落标签：用于文章分段，具有自动换行的效果。

<h1>北京欢迎你</h1>
<hr/>
<p>
  北京欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  北京欢迎你，为你开天辟地<br />
  ……
</p>

 标签：具有换行的效果。
<hr/>标签：水平线标签。

<strong>徐志摩人物简介</strong>
<p>
   <em>1910</em>年入杭州学堂<br/>
   <em>1918</em>年赴美国克拉大学学习银行学<br/>
    ……
</p>

标签：字体加粗，另外标签也同样具有加粗的效果。
标签：字体变成斜体。
<img>标签：图像标签

img常用属性：
src：图片路径；
width：图片的宽度；
height：图片高度；
alt：图片加载失败时所显示的内容；
title：鼠标悬浮在图片上显示的内容
示例：

<img src="image/hetao.jpg" width="160" height="160" 
alt="图片加载失败时我就出来了" title="鼠标悬停在图片上时我就出来了">

<a>标签：链接标签
a标签常用属性：
href：连接路径；
target：窗口打开位置常用有_self、_parent和_blank，_self表示在当前窗口打开链接，_parent表示在父窗口打开连接，_blank表示打开一个新的窗口；
示例：

文本超链接：<a  href="hetao.html"  target="_blank">我是一个文本超链接</a>
图像超链接：<a  href="hetao.html"  target="_blank"><img src="image/hetao.jpg" width="160" height="160" 
alt="图片加载失败时我就出来了" title="鼠标悬停在图片上时我就出来了"></a>

注释和特殊符号

注释标签：
空格： 
大于号>：>
小于号<；<
引号”："
版权符号@；©

锚链接

锚链接：跳转到标记的位置

创建跳转标记：<a name="marker">乙位置</a>
创建跳转链接：<a href="#marker">甲位置</a>
*若是要跳转到另外一个html文件则为：<a>href="index.html#marker">index.html</a>

邮件链接：mailto

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

第二章列表、表格与框架

列表

1.无序列表

<ul>
    <li>桔子</li>
    <li>香蕉</li>
    <li>苹果</li>
</ul>

无序列表type取值：
disc：实体圆心，默认值；
square：实体方心；
circle：空心圆；

2有序列表

<ol>
    <li>桔子</li>
    <li>香蕉</li>
    <li>苹果</li>
</ol>

有序列表type取值：
1：使用数字作为项目符号，默认值；
a/A：使用大写/小写字母作为项目符号；
I/i：使用大写/小写罗马数字作为项目符号；

3自定义列表

<dl>
    <dt>所属学院</dt>
    <dd>计算机应用</dd>
    <dt>所属专业</dt>
    <dd>计算机软件工程</dd>
</dl>

dl：自定义列表实现;
dt：自定义列表表项;
dd：自定义列表表项内容;

注意：自定义列表无项目符号和显示顺序

表格

<table align="center">
    <tr colspan="n">
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr rowspan="n.">
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

table：表格标签；
tr：行标签；
td：表格内容标签；
colspan：表格跨列，就是把n列合并到一起；
rwspan：表格跨行，就是把n行合并到一起；
表格对齐方式：居中对齐、左对齐、右对齐；
单元格对齐方式：水平对齐、垂直对齐；
水平对齐方式 align：左对齐（left）、居中对齐（center）、右对齐（right）；
垂直对齐方式 valign：顶端对齐（top）、居中对齐（middle）、底端对齐（bottom）、基线对齐（baseline）；

框架

<frameset cols="25%,50%,*"  rows ="50%,*" border="5"> 
   <frame src="the_first.html "> 
   <frame src="the_second.html ">
   ……
</frameset>

frameset：框架标签；
frame：内联框架标签；
cols：表示横向分割，一个框架最多100%, cols=”25%,50%,“表示分割成三个小框架分别占25%,50%和25%,代表最后剩下多少；
rows：表示纵向分割；

内联框架：`

<iframe src="path" name="mainFrame" frameborder="x" scrolling="yes/no"  noresize="noresize" width="x" height="y"></iframe>

src：引用页面地址；
name：框架表示名；
frameborder：边框大小；
scrolling：是否出现滚动条；
noresize：是否允许调整框架窗口大小；
width：框架的宽；
height：框架的高；

第三章表单

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交">
      <input type="reset" name="Reset" value="重填"> 
   </p>
</form>

form：表单标签；
method：表单提交方式有get和post；
action：表单提交数据后向何处跳转；

表单元素格式：

<input  type="text"  name="fname" value="text">

type：input元素类型；
name：input元素名称；
value：input元素的值；
size：边框大小；
maxlength：type为text 或 password 时，输入的最大字符数；
checked：type为radio或checkbox时，指定按钮是否是被选中
type中的元素：text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text。

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

textarea：多行文本框；
rows：显示的行数；
lows：显示的列数；

<input name="name" type="text" value="张三"  readonly="readonly">
<input type="submit "  disabled="disabled"  value="保存" >

特殊语法：
eadonly=”readonly” 只读；
disabled=”disable” 禁用

注意：当input type中的属性为file是 form表单要指定表单编码属性”enctype=”multipart/form-data”

第四章初识css

css选择器

1 id选择器

<div id="test">
#test { font-size:16px;}

id选择名字不能重复，用#来调用它

2 class选择器

<div class="test">
.test { font-size:16px;}

class选择器名字能重复,用.来调用它

3 标签选择器

<p>test</p>
p { font-size:16px;}

标签选择器能有多个直接使用表签名来调用他

HTML中引入CSS样式

1 行内样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

行内样式：直接在标签里使用style属性引入css样式；

2 内部样式表

<head><style>
h1{color:red;}
p{font-size:14px; color:green;}
</style></head>

内部样式表：CSS代码写在head的style标签中

3 外部样式表

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

外部样式表：CSS代码保存在扩展名为.css的样式表中

css样式优先级

行内样式>内部样式表>外部样式表（简单点说就是就近原则）
ID选择器>类选择器>标签选择器

css复合选择器

1 后代选择器

h3 strong{color:blue; font-size:36px;}
<h3>css<strong>复合选择器</strong></h3>

后代选择器：
1.在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明。
2.外层的标签写在前面，内层的标签写在后面，之间用空格分隔。
3.标签嵌套时，内层的标签成为外层标签的后代

2 交集选择器

<p class="txt">庭院深深深几许，杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。
<strong class="txt">雨横风狂三月幕，门掩黄昏，无计留春住。</strong>泪眼问花花不语，乱红飞过秋千去。</p>

交集选择器：
1.由两个选择器直接连接构成，选中二者各自元素范围的交集。
2.第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。
3.选择器之间不能有空格，必须连续书写。

3 并集选择器

h3,.first,.second,#end{ font-size:16px;  color:green; font-weight:normal;}
<h3>庭院深深深几许，杨柳堆烟，帘幕无重数。</h3>
<p class="first">玉勒雕鞍游冶处，楼高不见章台路。</p>
<p class="second">雨横风狂三月幕，门掩黄昏，无计留春住。</p>
<p id="end">泪眼问花花不语，乱红飞过秋千去。</p>

并集选择器：
1.多个选择器通过逗号连接而成
2.利用并集选择器同时声明风格相同样式

css继承

<style>
p { color:red; }
</style>
<p>
CSS样式表<em>继承特性</em>的演示代码
</p>

css继承：在前面讲过后代选择器，当标签嵌套时外层标签是内层标签的父标签，而css继承就是子标签能继承父标签的css样式就像示例中的em虽没设置样式当字体同样是红色的，而且子标签的样式并不会影响父标签的样式

第五章 CSS美化网页元素

字体样式

font-family：设置字体类型；
font-size：设置字体大小；
font-style：设置字体风格；
font-weight：设置字体的粗细；
font：在一个声明中设置所有字体属性；
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

文本样式

color：设置文本颜色；
text-align：设置元素水平对齐方式；
text-indent：设置首行文本的缩进；
line-height：设置文本的行高；
text-decoration：设置文本的装饰；

text-decoration属性：
none：默认值，定义的标准文本；
overline：设置文本的上划线；
line-through：设置文本的删除线；
blink：设置文本闪烁。此值只在firefox浏览器中有效，在IE中无效；

超链接伪类

a:hover {
    color:#B46210;
    text-decoration:underline;
}

a:link：未单击访问时超链接样式；
a:visited：单击访问后超链接样式；
a:hover：鼠标悬浮其上的超链接样式；
a:active：鼠标单击未释放的超链接样式；
设置伪类的顺序：a:link->a:visited->a:hover->a:active

设置鼠标形状

default：默认光标；
pointer：超链接的指针；
wait：指示程序正在忙；
help：指示可用的帮助；
text：指示文本；
crosshair：鼠标呈现十字状；

div标签

#header {
    width:200px;
    height:280px;
}
……
<div id="header">网页内容…</div>

div主要用于网页布局和排版网页内容

网页背景

background-color：背景颜色；
background-image：背景图像；
background-repeat：背景重复方式；
repeat：沿水平和垂直两个方向平铺；
no-repeat：不平铺，即只显示一次；
repeat-x：只沿水平方向平铺；
repeat-y：只沿垂直方向平铺；

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

列表样式

list-style-type：
none：无标记符号；
disc：实心圆，默认类型；
circle：空心圆；
square：实心正方形；
decimal：数字；

放荡不羁_爱自由

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html/css攻略历程

第一章 HTML基础html网页基本标签<html><head> <title>我的第一个网页</title></head><body> 我的第一个网页</body></html><title>标签 :网页标题 <body>标签：里面放html的内容<meta http-equiv="Content-Type" content="text/html; charset
复制链接

扫一扫