Html基础

之前自学过不下两三次的HTML，大学也有前端课程，奈何两年没复习过就略有生疏了(额，其实是忘完了！)

我就想怎么能把这个前端给搞定呢，东西实在是忒多了！就有了今天这个笔记，稍稍带有总结的意思！

慢慢来吧！我头发还很多。

HTML中常用的标签

常用的※

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 1、成对出现的标签：-->
<!--注释方式-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>

<!-- 2、单个出现的标签： -->
<br>  <!--换行-->
<img src="images/pic.jpg" alt="图片">
<hr>  <!--在文档中创建一条水平线-->

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/01.jpg" width="409" height="292" alt="图片">  <!--在文章中插入图片-->
<a href="http://www.baidu.com">百度网</a>  <!--在文章中插入一个超链接-->

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com" target="_blank">百度网</a>
</div>

列表标签※

列表标签的种类

  • 无序列表标签(ul标签)

    1
    2
    3
    4
    5
    6
    7
    <!-- ul标签定义无序列表 -->
    <ul>
        <!-- li标签定义列表项目 -->
        <li>列表标题一</li>
        <li>列表标题二</li>
        <li>列表标题三</li>
    </ul>

  • 有序列表标签(ol标签)

    1
    2
    3
    4
    5
    6
    7
    <!-- ol标签定义有序列表 -->
    <ol>
        <!-- li标签定义列表项目 -->
        <li><a href="#">列表标题一</a></li>  <!-- 标签的嵌套-->
        <li><a href="#">列表标题二</a></li>
        <li><a href="#">列表标题三</a></li>
    </ol>

其他重要标签※

  • 超链接标签(重要)※
1
2
3
4
5
6
7
<!--
href: 你要跳转到的资源的路径
target属性表示新页面的打开方式，
_self 表示在当前页面打开新页面,
_blank 表示会在新页面打开一个标签页
-->
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

  • 图片标签(重点)※

    1. src: 用于指定要显示的图片的路径，建议使用相对路径

    2. width: 图片的宽度

    3. height: 图片的高度

1
<img src="images/01.jpg" width="409" height="292">

tips：图片标签和超链接标签都是单标签※

  • *块标签(重点)*※
1
2
<div style="border: 1px solid #249da5; width: 100px; height: 100px">This is a div block</div>
<span style="border: 1px solid bisque; width: 100px; height: 100px">This is a span block</span>
  • 使用表格标签展示数据(重要)※
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
    <tr>  /* 使用tr标签定义表格的行 */
    <th>姓名</th>
    <th>属性</th>
    <th>级别</th>
    <th>忍村</th>
    </tr>
<tr>
    <td>漩涡鸣人</td>
    <td>风</td>
    <td>下忍</td>
    <td>木叶</td>
</tr>
<tr>
    <td>宇智波佐助</td>
    <td rowspan="2">雷&火</td>
    <td colspan="2">下忍</td>
</tr>
<tr>
    <td>我爱罗</td>
    <td>影</td>
    <td>砂隐村</td>
</tr>
</table>
  • 表单标签※

在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method

1
<form action="Basic_Project.html" method="post"></form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--文本框-->
<input type="text" name="signal"/><br/>
 <!--密码框-->
<input type="password" name="secret"/><br/>
<!--单选框-->
你最喜欢的动物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />宝马
<input type="radio" name="animal" value="cheetah" />捷豹<br>
<!--多选框-->
你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
<br>
<!--下拉框-->
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">游泳</option>
    <option value="skating">滑冰</option>
</select>
  • 标签的嵌套
1
2
3
4
<div>
    <img src="images/01.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
<div/>

CSS基础

Css是什么：css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

  • css 是层叠样式表，它是用来美化网页和控制页面布局的。
  • 定义 css 的语法格式是: 选择器{样式规则}

css 的引入方式

css的三种引入方式

  1. 行内式
  2. 内嵌式（内部样式）
  3. 外链式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!--行内式: 直接在标签的 style 属性中添加 css 样式-->

<div style="width: 100px; height: 100px; background: red">hello</div>

<!--内嵌式：在<head>标签内加入<style>标签，在<style>标签中编写css代码。-->
    <style type="text/css">
        .blue{color: blue}
        .big{font-size: 20px}
        .box{width: 100px;height: 100px;color: gold}
        .box1{
            width: 200px;
            height: 200px;
            background: yellow;
            border: 10px solid black;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            border: 10px solid black;
        }
        .box3{
            width: 48px;
            height: 48px;
            background: red;
            border: 10px solid black;
        }
    </style>

<!--外链式 将css代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中。-->

<link rel="stylesheet" type="text/css" href="css/main.css">

CSS选择器

1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

2. css 选择器的种类

  1. 标签选择器: 根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 标签选择器定义-->
<!-- 在header中定义style-->
<style>
        p{
            /* 设置字体大小  浏览器默认是 16px */
            font-size: 28px;
            /* 设置字体加粗 */
            font-weight: bold;
            /* 设置字体颜色*/
            color: red;
            /* 增加掉下划线 */
            text-decoration: underline;
            line-height: 100px;
            background: green;
            /* 设置文字居中 */
            text-indent: 40px;
            /* 设置文字居中 */
            text-align: center;
        }
        a{
            /* 去掉下划线 */
            text-decoration: none;
        }
    </style>

<!--引入方式-->
<p class="box">这是一个引用了标签选择器的段落</p>
  1. 类选择器: 根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- 定义 -->
<style type="text/css">
        .blue{color: blue}
        .big{font-size: 20px}
        .box{width: 100px;height: 100px;color: gold}
        .box1{
            width: 200px;
            height: 200px;
            background: yellow;
            border: 10px solid black;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            border: 10px solid black;
        }
        .box3{
            width: 48px;
            height: 48px;
            background: red;
            border: 10px solid black;
        }
    </style>

<!--引入方式-->
<div class="blue">这是一个引用了类选择器的div标签</div>
<h3 class="big">这是一个引用了类选择器的h3标题</h3>
<p class="box">这是一个引用了类选择器的段落</p>
  1. 层级选择器(后代选择器): 根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 定义-->
<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>
  1. id选择器: 根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
1
2
3
4
5
6
7
8
9
<!--定义-->
<style type="text/css">
    #box{color:red} 
</style>

<!-- 引入方式-->
<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

CSS属性

1. 布局常用样式属性

  • width 设置元素(标签)的宽度，如：width:100px;
  • height 设置元素(标签)的高度，如：height:200px;
  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
  • border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

2. 文本常用样式属性

  • color 设置文字的颜色，如： color:red;
  • font-size 设置文字的大小，如：font-size:12px;
  • 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