HTML+CSS学习笔记

一、什么是HTML
Hyper Text Markup Language 超文本标记语言
运行在浏览器上。
超文本：超级文本，如流媒体，声音，视频，图片等。标记语言：这种语言是由大量的标签组成。
任何一个标签都有开始标签和结束标签，例如：
<标签>：开始标签
</标签>：结束标签
HTML严格意义上说只能是一种规范，一种浏览器上的规范，标签语言不能被称为编程语言，因为HTML没有变量，数据类型，控制语句等。
web:网站开发。
第一个程序：

<!--这是注释-->
<html><head><!--标题栏--><title>mingsheng</title></head><!--网页体--><body><!--body中的内容会显示到页面中-->B站关注小可学妹</body>
</html>

二、基本标签
分段标签：<p></p>可用用来分段。
标题字：<h1></h1>~<h6></h6>
换行标签：<br>
水平线：<hr>,color是一个属性，用来指定颜色值。
预留格式：<pre></pre>中间的源码是什么样，就会显示什么样。
粗体字：<b></b>
斜体字：<i></i>
插入字：<ins></ins>
删除字：<del></del>
font字体标签：<font></font>
背景色：bgcolor
背景图片： <body background="https://i01piccdn.sogoucdn.com/282a7ca831475d89">
图片： <img src="https://i03piccdn.sogoucdn.com/d17f38975035d6a3">
超链接： <a href="https://space.bilibili.com/14387072/?spm_id_from=333.999.0.0">小可B站主页</a>
超链接的target属性用来设置最终打开窗口的位置。

例子：

<html><head><title>B站关注小可学妹</title></head><body><!--段落标记--><p>看小可直播的时候会有一种很温暖的感觉，就好像是家里的氛围一样。在开播前会有期待，想到小可开播就会出现莫名的悸动，而开播中却不并不怎么认真的看，只是挂着。在打游戏时挂着，打代码时挂着，在外面吃饭时，把手机调成静音挂着，有人可能会说这样子看直播有什么意义，我会说：只要手机里有小可的实时更新的画面，我就会有一种特殊的感觉，我觉得这应该被称之为：安心。</p><p>
看直播的欢乐时光总是觉得很短暂，“为什么欢乐的一天总是要结束呢”，我们没办法挽留时间，我们只好且行且珍惜。</p>
<p>
只要你一天不毕业，我就一直默默陪伴你，哪怕你根本注意不到我的存在，对我来说真的无所谓，喜欢你的这种感觉，不会因为没有回应而消失。</p><hr color="black"><!--标题字--><h1>爱小可</h1><h2>爱小可</h2><h3>爱小可</h3><h4>爱小可</h4><h5>爱小可</h5><h6>爱小可</h6>hello <br> Kero!<!--水平线--><hr color="red"><pre><b>双歌吖</b><i>双歌吖</i><ins>双歌吖</ins><del>双歌吖</del>(爱小可）<sup>6</sup>双歌吖<sub>6</sub><font color="red"   size="6">hello kero!</font></pre></body>
</html>

三、实体符号、表格
空格： 
小于号：<
大于号：>
表格标签：<table></table>,行：，列：<td></td>,border是用来设置边框宽度。
合并单元格：colspan表示列合并，rowspan表示行合并。
表格的th标签：th中的内容，自动加粗，自动居中。
thead,tbody.tfoot:可以将表格分成三部分。
例子：

<html><head><title>B站关注小可学妹</title></head><body><pre>爱&nbsp;小&nbsp;可爱小可&gt;爱阿梓爱小可&lt;爱阿梓<table border="3px" width="300px" height="300px"><tr><td>小可学妹</td><td>小可学妹</td><td>小可学妹</td></tr><tr><td>小可学妹</td><td>小可学妹</td><td>小可学妹</td></tr><tr><td>小可学妹</td><td>小可学妹</td><td>小可学妹</td></tr></table><table width="50%" border="3px"><tr><td>小可学妹1</td><td colspan="2">小可学妹2小可学妹3</td></tr><tr><td>小可学妹4</td><td>小可学妹5</td><td rowspan>小可学妹6小可学妹9</td></tr><tr><td>小可学妹7</td><td>小可学妹8</td></tr></table><table border="3px" width="300px" height="300px"><tr><th>单推人编号</th><th>单推人ID</th><th>单推人寿命</th></tr><tr><td>001</td><td>1506666</td><td>99</td></tr></table><table border="3px" width="300px" height="300px"><thead><tr><td>小可学妹</td><td>小可学妹</td><td>小可学妹</td></tr>
</thead>
<tbody><tr><td>小可学妹</td><td>小可学妹</td><td>小可学妹</td></tr>
</tbody>
<tfoot><td>小可学妹</td><td>小可学妹</td><td>小可学妹</td>
</tfoot> </table></pre></body>
</html>

无序列表：

<html><head></head><body ><ul><li>小可1<ul><li>小可1<ul><li>小可1</li><li>小可2</li><li>小可3</li><li>小可4</li></ul></li><li>小可2</li><li>小可3</li><li>小可4</li></ul></li><li>小可2</li><li>小可3</li><li>小可4</li></ul></body>
</html>

有序列表：

<html><head></head><body ><ol><li>小可1<ol><li>小可1<ol><li>小可1</li><li>小可2</li><li>小可3</li><li>小可4</li></ol></li><li>小可2</li><li>小可3</li><li>小可4</li></ol></li><li>小可2</li><li>小可3</li><li>小可4</li></ol></body>
</html>

四、表单
表单的作用：发送请求，并且携带数据给服务器。
表单和超链接有共同的特性，就是都可以向服务器发送请求，只不过超链接是用户直接点击发送请求，不能填写数据。而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。
表单最主要的作用就是：收集用户的信息。
表单对应的英文单词是：form
语法格式：

表单项1：表单项2：一个网页上可以有多个表单。 form标签中有一个action属性，与超链接的href相同，都需要填写url。例子：五、其他知识 HTML元素的ID属性 1、在HTML的任何一个节点都有ID属性 2、在同一个网页中，ID属性不能重复 3、id代表了这个节点，id是这个节点的身份证号 div和span图层：都被成为图层。图层：每一个图层在网页当中都是一个独立的盒子，图层最主要的作用就是：网页布局。table表格布局的缺点是：不灵活。每一个div和span左上角的顶点，都有x和y轴坐标，通过这个坐标可以定位div在网页当中的位置。 div默认独占一行，span不是。六、CSS 什么是CSS：Cascading Style Sheet，层叠样式语言，是专门修饰HTML的，让HTML更好看，CSS是HTML的“化妆品”。不是编程语言，属于样式表语言，没有变量，数据类型，控制语句等等。在HTML嵌入CSS：第一种方式：内联定义方式。语法结束：`<标签 style="样式名：样式值；样式名：样式值；样式名：样式值；">

选择器{样式名：样式值；
样式名：样式值；
样式名：样式值；
}

CSS中常见的选择器包括：标签选择器，id选择器，class选择器。
标签选择器：

标签名{}

<html>
<head>
<style type="text/css">
/*
这是CSS的注释
*/
div{background-color: antiquewhite;width: 100px;height: 100px;border-color: red;border-style: solid;
}
</style>
</head>
<body><div></div>
</body>
</html>

id选择器：

#id{}

class选择器:

.class{}

选择器优先级：id，类，标签。
第三种方式：链入外部样式表文件。

隐藏样式：


```html
<html>
<head><style type="text/css">#xiaoke{display: none;}</style>
</head>
<body></body>
<ul><li>小可学妹1<ul id="xiaoke" ><li>小可学妹4</li><li>小可学妹5</li><li>小可学妹6</li></ul></li><li>小可学妹2</li><li>小可学妹3</li>
</ul>
</html>
CSS参考手册：https://www.runoob.com/cssref/css-reference.html
设置鼠标悬停效果：
<html>
<head><style type="text/css">p:hover{color: aqua;}</style>
</head>
<body></body>
<p>小可学妹1
</p>
<p>小可学妹2
</p>
</html>


定位&光标变小手：```html
<html>
<head><style type="text/css">#div1{background-color: red;border: solid 1px black;width: 100px;height: 100px;position: absolute;top: 300px;}#kero{cursor: pointer;}</style>
</head>
<body><div id="div1"> <span id="kero">Kero</span></div>
</body>
</html>

HTML+CSS学习笔记相关推荐

微服务基础知识点学习笔记（持续更新）
微服务基础知识点学习笔记(持续更新) Conrtoller层整体包括:HTTP协议,JavaWeb三大组件(filter.servlet.listener).SpringMVC(SpringMVC的 ...
NetworkX学习笔记【持续更新】
NetworkX学习笔记[持续更新] 写在前面的话学习资料关于安装写在前面的话 networkx是一个python包,用于创建.操作和研究复杂网络的结构.动态和功能.我最初是想找一找SDN路由算 ...
CUDA学习笔记（持续更新——蜗速）
CUDA学习笔记(持续更新--蜗速) 1.CUDA 程序实现流程如下 2.内存管理 3.核函数 4.全局数据访问唯一索引 5.设备管理附录代码 1.CUDA 程序实现流程如下将数据从CPU内存拷贝 ...
Go语言开发学习笔记（持续更新中）
Go语言开发学习笔记(持续更新中) 仅供自我学习更好的文档请选择下方 https://studygolang.com/pkgdoc https://www.topgoer.com/go%E5%9F% ...
NumPy个人学习笔记【持续更新】
NumPy个人学习笔记[持续更新] 来源:快速入门教程 - NumPy中文文档目录基础知识数组的创建打印数组基本操作通用函数索引.切片和迭代形状操作更改数组的形状将不同数组堆叠在一 ...
C语言学习笔记Day3——持续更新中... ...
上一篇文章C语言学习笔记Day2--持续更新中- - 八. 容器 1. 一维数组 1.1 什么是一维数组当数组中每个元素都只带有一个下标(第一个元素的下标为0, 第二个元素的下标为1, 以此类推)时 ...
JavaSE学习笔记（持续更新）
这里写目录标题 JavaSE学习笔记(持续更新) Java跨平台原理与核心机制 1.跨平台原理: 2.两种核心机制: JDK11的安装流程 Java程序开发的三个步骤(无编辑器版) Eclipse安装 ...
架构师学习笔记（持续更新）
1.此博客所有内容均出自于咕泡学院架构师第三期课程. 2.此博客整理了我所学习的课程的所有笔记链接. 3.此博客会持续更新新的博客链接,直到课程学习完. 4.此博客仅供参考,仅作为学习使用. 设计模式 ...
java web学习笔记（持续更新）
java web学习笔记一.Java Web简介二.认识Servlet 1.什么是Servlet? 2.请求路径 3.tomcat 4.Servlet的使用三.Servlet简单应用 1.创建S ...
多项式全家桶学习笔记【持续更新】
本文完成的时间跨度较长,文风变化可能较大-- 最近更新于2020年2月17日 Part 1.主线乘法前面讲过FFT 然而FFT常数感人,适用范围还窄,比如不能取模于是有了NTT 其实就是取模的F ...

HTML+CSS学习笔记

HTML+CSS学习笔记相关推荐

最新文章

热门文章