web应用基础 HTML & CSS 学习总结

一、HTML

1.html元素

标题

标题是通过h1~h6来定义的

<h1>我是一个标题</h1>
<h2>我是一个标题</h2>
<h3>我是一个标题</h3>
<h4>我是一个标题</h4>
<h5>我是一个标题</h5>
<h6>我是一个标题</h6>

展现出来的效果是从大到小的文字，且每句话单独一行。

段落

<p>第一行</p>
<p>第二行</p>

展现出来的效果是两行正常大小的文字。

链接

<a href="https://www.baidu.com" target="_blank">www.baidu.com</a>

展现出来的效果默认是带下划线的文字，点击可跳转到href指定站点。
a标签还可以设置target属性，target属性默认值为_self，即在本浏览器标签打开，可以设置为_blank在新的标签中打开。

图像

<img src="../img/test.jpg"  alt="test" title="test" />

默认会显示出图片的原本大小，src是图片的地址，alt是图片加载失败时出现的文字，title是鼠标移上去时显示的文字，且src地址以#开头，若后面跟的值存在元素id与之对应，则会跳转到该元素位置。

表格

    <table>
        <tr>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>

默认是不带border的，只会显示出表格的内容，tr标签是一行，td标签是一
列，该代码展示出来的效果是一行两列。

列表

有序列表

<ol>
	<li>test</li>
	<li>test</li>
</ol>

无序列表

<ul>
	<li>test</li>
	<li>test</li>
</ul>

ol和ul中每一个li占一行，区别只是有序和无序，且默认ol每一行前面有数字从1开始到行数n，而ul前是圆点。

表单

    <form action="上传的服务器地址" method="get" name="表单域名称">
        <input type="text" name="名称" value="" checked="checked" />
    </form>

表单form一般用于收集信息并将信息发送到服务器，form内部常用到的标签是input，input可以通过设置属性type变为好几种输入类型，有文本text，密码password，单选按钮radio，复选框checkbox，提交按钮submit，submit按钮按下后会将数据发送到服务器，并且根据form的method属性以get或者post方式发送。

区块

    <div><span></span></div>

div标签可是说是html中使用频率最高的标签了，div和span是用来分块的标签，div区分行，span区分列，可以看做div是一个占一行的大盒子，span是一行中的小盒子，且一行中可以装许多这样的小盒子。

2.html注意事项

语言设置

在html标签中，可以设置属性lang，默认为en英文，可能每次浏览器打开时会弹出提示需不需要翻译，可以设置为zh-cn。

引入css、js等文件

<link rel="stylesheet" href="css文件路径" />
<script type="text/javascript" src="js文件路径"></script>

vscode

vscode可以输入!快速生成基本模板，若没反应则输入html:5.

二、CSS

1.引入方式

引入方式三种：
1、内部样式表（嵌入式） 写到html页面内部 放到style标签中，理论上放到哪里都行但一般放到head标签之间写 。
2、行内样式表
元素内部写，添加属性style=“”,例如style=“background-color=black;”，例如适用于修改简单样式
3、外部样式表
单独写到css文件中，之后引入文件到html中m一般放到head标签之间写。

2.元素选择器

基础选择器：

1、标签选择器 p {color: red} 所有的p都变为红色
2、类选择器： .test {color: red} 通过 class=“test” 来调用
3、id选择器： #test{color: red} 通过 id=“test” 来调用 且只能调用一次
3、通配符：* {color: red} 全部都改为红色 不需要调用

复合选择器:

1、后代选择器
元素1 元素2 {color: red}
例子：ol li {color: red} ol中的li变为红色
例子：ol li a {color: red} ol中的li中的a变为红色 递进关系
且中间必须要有空格分割 元素可以是任意基础选择器 例如p.test a {color: red}
2、子选择器
元素1>元素2 {color: red}
选择一个亲儿子
3、并集选择器
元素1,元素2 {color: red}
4、伪类选择器
例子：a.链接伪类： a:link {} 未打开过的链接 a:visited {} 打开过的链接 a:hover {} 鼠标移到上面时

3.元素显示模式：

A 块元素：
文字类的块元素里面不能放块元素 例如p里面不能放div
1、自己占一行
2、高度宽度外边距内边距都可以控制
3、宽度默认是容器的100%
4、是一个容器及盒子，可以放行内或块级元素
B 行内元素：
链接里面不能放链接 a里面可以放块级元素
1、一行可以显示多个
2、高宽直接设置无效
3、默认宽度为本身内容宽度
4、行内元素只能容纳文本或其他行内元素
C 行内块元素
1、可以放一行上
2、默认宽度为内容宽度
3、高、宽、内外间距可以改
显示模式转换：
1、转换为块元素 display: block
2、转换为行内元素 display: inline
3、转换为行内块元素 display: inline-block:

4.css三大特性

1、层叠性：选择器相同 样式冲突时相同选择器就近原则修改 不冲突时不会覆盖
2、继承性：子标签会继承父标签的样式 主要继承的是text- font- line- color这些
行高的继承：font: 12px/1.5 “Microsoft YaHe” ; 继承后行高就是当前字体大小的1.5倍
3、优先级：引入方式不同，或者选择器位置权重不同。

5.盒子模型

盒子模型(box model)：
1、border 边框
2、content 内容
3、padding 内边距
4、margin 外边距