前端Web网页设计笔记

网页的基本框架，设计第一个网页，显示hello world!
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>第一个网页</title> 
</head>
<body>
hello world!
</body>
</html>

介绍各种标签：
   <br>
   <em>倾斜</em>
   <strong>加粗</strong>
   <ins>下划线</ins>
   <del>删除线</del>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h4>四级标题</h4>
标题标签会使字号变大，字体加粗，不同级别的标题的效果轻重不同
   换行标签：内容<br>第二行
   分割线标签：<hr />
   段落标签：<p>段落标签,语义</p>
注释的快捷键：CTRL+/，格式：
超链接标签：<a href="此处填入路径"></a>
   路径分为两种：相对路径和绝对路径，绝对路径局限性较大，路径是固定的，几乎没有移植性，一般不用；相对路径比较常用，同级状态下，直接写文件名，不同级状态，用/访问下一级，访问上一级用../
代码为：<a href="01-2.html">超链接</a>
   <a href="html/01-2.html">下一级超链接</a>
   <a href="../01-2.html">上一级超链接</a>
   <img src="a.jpg" alt="图片无法正常显示的图片描述">

添加CSS样式，有内嵌式的方式，CSS的注释/**/，选择器有：基本选择器复合选择器伪类伪元素；基本选择器：标签（元素选择器）选择器
用法：p{
   color: blue;
   }
class选择器类选择器标识符是.+名字（只能用字母数字不能开头）
代码：
    .font22{
   font-size: 22px;
   }
   .red{
   color: red;
   }
ID选择器：
#h2id{
   color: blue;
   }
ID属性规定元素唯一标识，代码：
   <h2 id="h2id">二级标题</h2>
   <h1 class="red">红色</h1>
CSS层叠样式表，修饰网页，三种使用方法1.行内式，内联样式，代码：
   <p style="color: red;">内容</p>
   <p class="font22 red">内容style</p>
   <p class="font22">内容2</p>
css文件命名尽量不包含.；预定义词汇 rgb(,,) #十六进制，在h3代码块内编写，代码为：
h3{
   /* MDN <color> */
   /* color: orange; */
   /* color: rgb(20,80,40); */
   /* 十六进制数 0-f */
   /* ff=15*16^0+15*16^1 */
   /* color: #FFFFFF; */
   /* 字号大小 */
   font-size: 22px;
   /* 单位<length> 有px:像素 em当前字号大小的倍数*/
   /* 字体粗细 lighter normal=400 bold bolder ,100-900的整数 */
   font-weight: normal;
   /* 字体样式 */
   font-family: "宋体";
   /* 倾斜 oblique italic */
   font-style: oblique;
}
应用这个css样式，在2-1.html里使用<link rel="stylesheet" href="2.css">就可引用，<h3>链入式</h3>，在<h3></h3>内的内容就可以应用css样式

运用开发者模式调试网页，首先使用<link rel="stylesheet" href="3.css">链接css文件，在浏览器按f12可打开开发者模式，用<div></div>划分一片分隔，在分隔内：<p class="blue" id="pid" 在3.css文件内编写代码：
style="color: gray;">第一个段落</p>
.red{
   color: red;
}
.font22{
   font-size: 22px;
   font-weight: 600;
   font-family: "宋体";
   font-style: italic;
}

标签需要初始化，可以单独初始化，也可以批量初始化，代码为：
*{
   margin: 0px;
   padding: 0px;
}
优先级的划分：优先级：内联样式大于 id 大于类选择器（class）大于标签选择器大于 *（初始化）#pid{
   color: orange;
}
.blue{
   color: blue;
}
p{
   color: red;
}

.box{

   box-sizing: border-box;
   /* content-box border-box */
   width: 100px;
   height: 100px;
   border: 5px solid black;
   padding: 10px;
   border: 5px solid red;/* 后写的优先级高 */
   /* margin-left: 10px; */

   /* 宽度高度 */
   /* content-box */
   /* width: 60px;
   height: 70px;

   border: 5px solid black;
   padding: 10px;
   margin-left: 10px; */
   /* 放入到100*100 */

   /* border-方向-样式 */
   /* border-top: 5px solid black;
   border-top-width: 10px;
   border-style: solid; */

/*    border-color: black red; */
   /* border-width: 5px 10px; */
   /* width style color */
   /* border: 5px solid black; */

   /* padding 内边距 */
/*    padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 30px;
   padding-left: 40px; */
   /* padding: 10px 20px 30px 40px ; */

   /* border: 5px solid black;
   border-right-style: none; */
   /* border-right-width: 0px; */

   /* margin-left: 100px; */
   /* 居中 */
   /* margin: 0px auto; */

background-color: orange;
}

前端Web网页设计笔记

猜你喜欢