前端基础学习（一）10.30--11.1

最新推荐文章于 2024-04-12 09:07:33 发布

minzhang_03

最新推荐文章于 2024-04-12 09:07:33 发布

阅读量198

点赞数

分类专栏：前端基础学习笔记文章标签：前端基础学习笔记

本文链接：https://blog.csdn.net/min_0329/article/details/78428332

版权

前端基础学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 标签

行标签 em br strong

块标签 head p html div

非行非块 img

<img src="http://image.so.com" alt="碎白花，绿草，远山"/>
<strong>强调1（页面展示为粗体）<strong>
<em>强调2（页面展示为斜体）</em>
在文本中<span color="blue">区分样式</span>。从而实现文本中某一小部分与其他部分文字相区别。

2. 列表

1>有序列表

<ol>
      <li>有序列表项1</li>
      <li>有序列表项2</li>
      <li>有序列表项3</li>
</ol>

2>无序列表

<ul>
      <li>无序列表项1</li>
      <li>无序列表项2</li>
      <li>无序列表项3</li>
</ul>

3>自定义列表

<dl>
      <dt>
         此处是自定义列表的标题
      </dt>
      <dd>自定义列表项1</dd>
      <dd>自定义列表项2</dd>
      <dd>自定义列表项3</dd>
</dl>

3. a标签

a标签的功能——链接，下载，锚点（#链接到文件，点击链接自动下载文件）

<style>
      a:link{color:black;text-decoration:none;}
      a:visited{color:gray;}
      a:hover{color:blue;}
      a:active{color:red;}
</style>

<body>  <a href="http://www.w3school.com.cn/index.html" target="_self">w3school 在线教程HTML页</a>   </body>

伪类:
link 未访问
visited 点击过后
hover 鼠标划过
active 鼠标按下
这四个伪类必须要按照顺序去定义，该顺序的记忆方法为 love hate。值得注意的是，IE 6以上标签都支持这四个伪类,IE 6以下仅a标签支持。

设置锚：

<a href="#structure">---结构样式---</a>
<a href="#textcss">---文本（设置）样式---</a>
<!--  设置锚（用链接直接定位到页面的某位置）  -->

4. 选择符

1> id选择符

id 如同人的身份证号是唯一的

2> .class选择符

.class 视作可重复使用的id

3> 包含选择符 div span p{}

选择符的优先级:
同级，默认后者覆盖前者

样式的优先级: 类型(1) < class(10) < id(100)< style行间样式（1000）< js和样式的先后顺序有关

5. 结构样式

1.width heigth
2.background-复合属性 (url) repeat,no-repet,repeat-x,repet-y,移动背景图片120px,50px或者center,center
3.border-复合属性 solid.实线 dashed.虚线 dotted.点线ie6不支持 border-top,border-right,border-bottom--对应属性值1px,solid,red
4.padding-复合属性内边距：内容到边框的距离,为填充厚度，会影响盒子的大小 top right bottom left 必须是上右下左的顺时针顺序
5.margin-复合属性控制块与块之间外边距上右下左的顺序尽量少用外边距，用父盒子的内边距代替子盒子的外边距

6. 文本样式

1.font-复合属性~基本不用：font-style|font-weight/line-height|font-family；
font-size:12px 12是中文最小值一般值为偶数,
font-family:宋体,airal
color
line-height 文字在行高的上下居中
text-align:left 文本对齐方式
text-indent：2em 首行缩进
text-weight:normal
text-style:italic,normal
text-decoration:underline,overline,line-through删除线,none

7. 默认样式重置

body,p,h3,dl,dd{margin:0;}
ul,ol{list-style:none;padding:0;margin:0;}
img{border:none;}  /*默认样式重置--css reset--尽量不使用浏览器提供的默认样式*/
<base target="_self"/> <!-- 设置所有页面打开方式为在当前页打开新页面 -->

8. 基本样式

1>行间样式

<div style="width:200px;heigh:100px;background:yellow;">行间样式，块</div>

2>内部样式

<style>
      #box{
          width:200px;
          high:100px;
          background:pink;
          border:1px solid black;
          padding-top:30px;
          margin-right:auto;
          margin-left:auto;
          font-size:20px;
          font-family:songti;
          color:rgb(250,26,59);
          line-height:38px;       }
      #structure{
          font-size:25px;
          color:green;     
          }
      #textcss{
          font-size:35px;
          color:blue;
          }
</style>

<div id="box">用#表示id,内部样式表--这个块拥有box的样式</div>

3>外部样式

 <link href="**.css" rel="stylesheet"/><!-- 一般采用外部样式表，内部与行间难维护不常用 -->

9.HTML文件基本格式

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>...</title>
  <style>
    ...
  </style>
</head>
<body>
  ...  
</body>
</html>

minzhang_03

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录