CSS 个人笔记

标签：控件个人标签单元格笔记表单设置 CSS 属性

介绍

HTML(hypertext markup langage)超文本标记语言主要用于描述网页的结构和内容

学习HTML主要学习HTML标签以及标签对应的属性, 标签就是一些特殊的符号

比如

img图片标签(属性src,width,height,alt,tilte),在网页中显示图片

a超链接标签(属性href, target ), 实现网页的跳转

html文件名后缀名是.html , 使用浏览器可以直接解析html文件,因为浏览器里面有一个渲染引擎

基本结构

<!DOCTYPE html>
<!-- 文档类型 doc=>document文档 type类型的意思   就是告诉别人,我这个文档是html -->
<html>
    <!-- head头部标签,这标签里面放的是,修饰网页的东西 比如引入样式表,引入js脚本文件,设置字符集,设置页面标题 -->
    <head>
        <!-- title标签设置的是网页的标题 -->
        <title>我是网页标题</title>
        <meta charset="utf-8"/>
    </head>

    <!-- body身体主体标签,这标签里面就是网页的内容 -->
    <body>
        hello world!!!你好,html
    </body>
</html>

标签分类

<!-- 
    HTML标签分类会分成两大类
    第一大类 单标签(只有结束标签) 
    语法:
    <标签名 /> 或者 <标签名/> 或者 <标签名>
    比如:
    <br />
    <hr />
    <input />
    <img />

    第二大类 双标签(有开始标签,也有结束标签)
    语法:
    <标签名>标签内容</标签名>
    比如: 
    <div>div的内容</div>
    <span>span的内容</span>
    <p>p段落的内容</p>
    <a>链接内容</a> 
    -->

    <!-- 另外,在HTML标签不区分大小写,但是建议"小写" -->

文本修饰标签

<!-- 加粗 b(bold) 与 strong(强壮)-->
    <b>内容</b>
    <strong>内容</strong>
    <br />

    <!-- 倾斜,斜体 i(italic) 与 em -->
    <i>内容</i>
    <em>内容</em>
    <br />

    <!-- 下划线 u(underline) 与 ins -->
    <u>内容</u>
    <ins>内容</ins>
    <br />

    <!-- 删除线 s 与 del -->
    <s>内容</s>
    <del>内容</del>
    <br />

    <!-- 可以嵌套使用 -->
    <u><i><b>内容</b></i></u>
    <br />

    <!-- 其中strong,ins,em,del是HTML5新增的语义化标签!更利于SEO优化,结构更清晰!  推荐使用使用语义化标签! -->

    <!-- 上标 sup -->
    <!-- 下标 sub -->
    a2 + b2
    <br/>
    a<sup>2</sup> + b<sub>2</sub>

img标签

img标签常用属性

src是source单词的简写, 设置图片文件所在路径
border设置图片的边框默认图片边框大小为0 0代表没有边框属性取值可以写数值
width设置图片的宽度, 默认不设置width,将使用图片默认的宽度该属性取值可以写数值或者百分比,百分比会相对父元素
height设置图片的高度, 默认不设置height,将使用图片默认的高度该属性取值可以写数值或者百分比,百分比会相对父元素
注意: 如果只设置width或者height其中一个, 另一个会跟随图片原始宽度高度比例,进行等比例缩小放大
title设置鼠标悬停在图片元素上显示的文本内容信息
alt设置图片无法正常显示时,显示在图片元素上的替换信息
align设置图片元素"周围文字"的对齐方式取值 left center right

路径问题

路径就是文件的存放位置经过的路线
为什么需要路径? 因为我们引入图片,引入外链式样式css文件,引入外链式脚本js文件以及超链接跳转到本地某个文件的时候,都需要通过路径找到对应的文件

路径主要又分为两种

第一种: 绝对路径, 以盘符开始的路径 , 比如 g:/abc/1.txt, 绝对路径移植性差,需要保证同样的盘符下有同样的文件

<!-- \反斜杠  /正斜杠 在window系统下, 正斜杠和反斜杠都可以识别, 但是在linux下只能使用正斜杠 而且linux系统下没有盘符的概念-->
<h2>绝对路径演示</h2>
<img src="E:\GZ2279\①HTMLCSS\02-HTML\4-代码\images\01.jpg" width="150" />
<img src="E:/GZ2279/①HTMLCSS/02-HTML/4-代码/images/01.jpg" width="150" />
<!-- 有些浏览器,对绝对路径支持不是很友好, 需要添加file:/// 前缀 -->
<img src="file:///E:\GZ2279\①HTMLCSS\02-HTML\4-代码\images\01.jpg" width="150" />
<img src="file:///E:/GZ2279/①HTMLCSS/02-HTML/4-代码/images/01.jpg" width="150" />

<h2>互联网的路径(直接使用网上的路径, 这种路径一般是https://或者http://开头的 前提是电脑需要连接互联网)</h2>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />

❤第二种: 相对路径, 相对路径就是会根据一个参考物,进行参考,这个参考物一般是"当前文件"

    <h1>相对路径又有三种常见关系</h1>
    <h2>第一种: 同级关系 目标文件在当前路径下 ./就可以代表当前路径</h2>
    <img src="./P_007.jpg" />

    <h2>❤第二种: 下一级关系 目标文件在当前路径的某个目录下 需要告诉文件夹名称</h2>
    <img src="./images/P_057.jpg" />
    <img src="./images/a/b/c/P_033.jpg" />

    <h2>第三种: 上一级关系 目标文件在当前路径的上一级路径下 ../代表上一级</h2>
    <img src="../P_089.jpg" />
    <img src="../../P_069.jpg" />

超链接a标签

超链接是用于实现网页之间跳转的标签
语法：<a href="跳转目标地址" target="目标地址打开方式">超链接的标签内容</a>

❤外部链接跳转到互联网的某个地址一般是https://或者http://开头的
❤内部链接跳转到本地文件如果浏览器可以打开的文件,浏览器会帮我们打开浏览器无法打开的文件,浏览器会提示我们下载
❤空链接要记就是点击以后,不会跳转的链接空链接主要用于书写css样式或者触发js事件的时候使用
❤图片链接要记就是点击图片以后,会跳转到某个链接使用a标签包括img图片标签
链接到本页的某个部分(锚点)

08-超链接(a链接,a标签).html

阻止默认事件

onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。

<a href="javascript:void(0);"  οnclick= "myjs( )">  Click Me  </a>

和void(0)一样，都返回"undefined"

<a href="javascript:;" >  Click Me  </a>

是网上很常见的代码，#是标签内置的一个方法，用这种方法点击后网页后返回到页面的最顶端所以又有了“##”“#!”等,尽管解决了返回顶部的问题但仍存在其他缺陷

<a href="#">  Click Me  </a>

事件处理函数的工作机制中，在给某元素添加事件处理函数后，一旦事件发生，相应JavaScript代码就会执行，所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后，
如果相应JavaScript代码返回true，onclick事件处理函数就会认为这个链接呗点击了，同样的若返回false即会认为链接未被点击

当点击a标签时，JavaScript代码返回值为false，故此链接默认行为未被触发。

<a href="http://www.baidu.com" οnclick=" myjs(); return false; ">   Click Me   </a>  
<a href="http://www.baidu.com" οnclick=" return false; ">  Click Me  </a>

preventDefault()阻止事件的默认行为但不支持IE，所以在IE中使用returnValue阻止事件默认行为

var test = document.getElementByTagName('a'); 
function stopDefault( e )
{ 
   if ( e && e.preventDefault ) 
      e.preventDefault(); 
     else 
        window.event.returnValue = false;  
} 
test.onclick = function(e) 
{ 
     stopDefault(e); 
}

download属性(HTML 5 新增)： 接受一个 filename (文件名) 作为属性值或不设置任何属性，此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。

    <h2>不添加download属性 直接在浏览器中打开图片</h2>
    <a href="./images/btn.png">图片</a>

    <h2>添加download属性,download需要使用http://协议或者https://协议才可以生效</h2>
    <!-- 我们可以在vscode中安装一个live server插件,使用这个插件打开的网页,就是一个本地服务器的网页 ,http协议开头的,  live server实时刷新的功能  -->
    <a href="./images/btn.png" download>下载图片</a>

    <h2>download设置属性值, 这个属性值将作为下载的文件名</h2>
    <a href="./images/btn.png" download="美女">下载图片</a>

    <h2>download设置属性值, 这个属性值将作为下载的文件名, 如果指定的download属性值中有\ /的话,会被转成下划线</h2>
    <a href="./images/btn.png" download="性感\美女/01">下载图片</a>

01-超链接补充属性download.html

基准参考点base标签单标签可以设置所有超链接的href属性以及target属性,base标签只能出现一次!!!

<base href="https://ent.163.com" target="_blank" />

02-基准参考点base标签.html

表格基本使用以及表格属性

table表示表格
tr表示表格的行
td或者th表格的列(单元格) th包括的内容会进行加粗并水平居中显示
caption设置表格的标题

table标签的属性:

❤border设置表格的边框:

表格边框合并:border="1"
bordercolor设置表格颜色
❤width设置表格的宽度数值或者百分比
height设置表格的高度数值或者百分比
❤align设置整个表格的水平对齐方式 left center right
bgcolor设置背景颜色
background设置背景图片, 背景图片会覆盖背景颜色
❤cellpadding设置单元格内容到边框的距离
❤cellspacing设置单元格与单元格之间的距离
❤rules="all"合并边框线

09-表格基本使用以及表格属性.html

tr的属性:

tr的align,bgcolor,background属性同table属性
align属性是设置tr中所有单元格内容水平对齐方式,取值:left(左默认),center(居中),right(右)
还有一个valign属性是设置单元格内容垂直对齐方式,取值:top(上),middle(默认,垂直居中),bottom(下)

小结:

tr的align是设置单元格内容的水平对齐方式
如果tr跟table都设置的bgcolor跟background属性,以tr设置的为准,"靠近原则"

10-tr的属性.html

th,td单元格的属性

th跟td都是单元格标签,但是th包裹的内容会加粗并且水平居中显示
width,height,align,valign,bgcolor,background属性跟tr设置的时候,效果是一样的

11-th,td单元格的属性.html

合并单元格

两个th,td单元格比较重要的属性:

rowspan row行的意思,跨行合并单元格,垂直(上下)方向合并几个单元格取值数值
colspan column列的意思,跨列合并单元格,水平(左右)方向合并几个单元格取值数值

合并单元格的步骤

1.先找到你要合并的单元格,随便改成相同的内容

2.确定左右合并单元格,还是上下合并单元格,再决定使用对应colspan或者rowspan,要几个单元格合成1个单元格

3.删除多余的单元格

12-合并单元格.html

thead,tbody,tfoot表格结构化标签

没有被thead,tbody,tfoot这三个结构化标签包裹的内容,默认会把内容都放在一个tbody中
thead表示表格的头部
tbody表示表格的身体
tfoot表示表格的底部

thead,tbody,tfoot都有align跟valign属性; 设置align跟valign属性的时候优先级:靠近原则

13-thead,tbody,tfoot表格结构化标签.html

表单

表单介绍

表单是什么,就是一些可以让你填写或者选择的东西
表单作用是什么,收集用户所填写或者选择信息
表单组成有哪些, 有三部分 :
1. 表单域(容器,存放表单的地方)
2. 提示信息(告诉用户需要填写的信息是什么)
3. 表单控件(收集用户信息的东西, 比如文本框, 单选按钮等 )

form标签表示表单域

form标签的action属性,表示数据提交到哪里去, 取值是一个url
form标签的method属性,表示数据提交的方式 get(默认)或者post
- get提交的数据会拼接到url(url是统一资源定位符,简单理解就是网址)地址栏中, 拼接形式是 url?键名1=键值1&键名2=键值2...
- post提交的数据不会出现在url中
注意: 表单控件需要设置name属性, 这样提交数据的时候,才是有效提交并且后端才可以通过name属性区分是哪个控件提交过去的数据
注意: 某些控件需要设置value属性,value属性才是真正提交到后端的数据

<!-- <form action="https://www.baidu.com" method="get"> -->
<!-- <form action="abc.html" method="post"> -->
<form action="abc.html" method="get">
        <!-- 表单控件分类有input标签,button标签,textarea标签以及select标签 -->
        <!-- 网页中表单控件有很多种类, 但是HTML作者又不想每个种类都设计一个标签,所以设计了一个input标签,使用"type属性"去区分他们 -->

        <!-- input是单标签 -->
        <p>文本框:<input type="text" name="username" /></p>
        <p>密码框:<input type="password" name="userpass" /></p>
        <p>
            单选按钮(只能选择一个):
            <!-- 设置checked属性,就可以表示选中 -->
            <!-- 想要实现单选功能, 需要把多个radio设置相同的name属性 设置相同name属性值以后,就会认为他们是一组单选按钮,那么只能选中其中一个了-->
            <input type="radio" checked name="sex" value="man" />男
            <input type="radio" name="sex" value="woman" />女
        </p>
        <p>
            复选框(可以多选):
            <!-- 设置checked属性,就可以表示选中 -->
            <input type="checkbox" name="hobby" checked value="eat" />吃饭
            <input type="checkbox" name="hobby" checked value="sleep" />睡觉
            <input type="checkbox" name="hobby" value="dadoudou" />打豆豆
        </p>
        <p>
            上传文本框:
            <input type="file" name="myfile" />
        </p>
        <p>
            隐藏域(专门用于提交一些不想被用户看到的信息):
            <input type="hidden" name="rsv_iqid" value="0xb7cfebb10007ffd7">
        </p>
        <!-- 通过value属性可以设置按钮等内容 -->
        <p>
            <!-- 普通按钮,不能提交数据,也不会重置数据 -->
            普通按钮:<input type="button" value="我是普通按钮" />
        </p>
        <p>
            提交按钮:<input type="submit" value="提交数据" />
        </p>
        <p>
            重置按钮:<input type="reset" value="重新填写" />
        </p>
        <p>
            图片按钮:
            <!-- 通过src属性设置图片按钮的路径 -->
            <!-- 图片按钮也有提交数据的功能 -->
            <input type="image" src="./images/btn.png" />
        </p>
    </form>

04-表单控件-input标签.html

button按钮

 <form action="https://www.baidu.com" method="get">
        <p>
            用户名: <input type="text" name="username" />
        </p>
        <p>
            <button>不设置type属性的按钮, 默认是提交按钮</button>
        </p>
        <p>
            <button type="submit">提交按钮</button>
        </p>
        <p>
            <button type="reset">重置按钮</button>
        </p>
        <p>
            <button type="button">普通按钮</button>
        </p>
    </form>

项目标题标签label

元素（描述标签）表示用户界面中某个元素的说明。

lablel标签主要目的是为了提高用户体验。为用户提高最优质的服务。

概念：label 标签为 input 元素定义标注（标签）。
作用：用于绑定一个表单控件, 当点击label标签的时候, 被绑定的表单控件就会获得输入焦点。

如何绑定元素呢？

第一种用法:使用label标签包裹要设置的内容和表单元素

第二种用法:使用label中的for属性 for="id名" 表单元素需要设置一个id属性

	<p>
        <!-- 第一种用法:使用label标签包裹要设置的内容和表单元素 -->
        <label>用户名:<input type="text" /></label>
    </p>

    <p>
        <!-- 第二种用法:使用label中的for属性 for="id名" 表单元素需要设置一个id属性 -->
        <label for="myPass">密码:</label>
        <input type="password" id="myPass" />
    </p>

    <p>
        <label><input type="radio" name="sex">男</label>
         <label><input type="radio" name="sex">女</label>
    </p>

06-项目标题标签label.html

placeholder属性

placeholder属性,占位符,当某些表单控件value值为空的时候,placeholder属性设置的值才会显示出来
placeholder属性,当input元素type为password, search, tel, text, url时，当表单控件为空时，控件中显示的内容

	<p>
        <input type="text" placeholder="请输入用户名" />
    </p>

    <p>
        <!-- 通过value属性也可以设置表单控件默认显示的内容 -->
        <input type="text" value="zhangsan" placeholder="请输入用户名">
    </p>

07-placeholder属性.html

多行文本框(文本域):

 <!-- 通过rows设置高度 -->

 <!-- 通过cols设置宽度 -->

 <textarea rows="5" cols="30" placeholder="请进行一个简短的自我介绍~">我是张三</textarea>

防止拖拽文本域resize

textarea {
    resize: none;
    width: 300px;
    height: 200px;
}

select下拉框

通过option设置选项, 默认下拉框会选中第一项, 默认下拉框的宽度由最宽的选项内容决定
给option选项设置selected属性,可以指定选中选中项
如果option没有设置value属性,那么value属性值将使用option的标签内容提交数据的时候,会提交选中项的value属性值

<select name="province">
	<option value="guangdong">广东省</option>
	<option value="hunan" selected>湖南省</option>
	<option value="hubei">湖北省</option>
	<option value="sichuan">四川省</option>
	<option value="guangxi">广西壮族自治区</option>
</select>

select标签可以设置size属性,表示显示多少个选项
select标签可以设置multiple属性, 表示允许多选可以按ctrl或者shift键
使用optgroup标签,可以对选项进行分组

        <select size="5" multiple>
            <!-- 使用optgroup标签,可以对选项进行分组 -->
            <optgroup label="省份">
                <option value="guangdong">广东省</option>
                <option value="hunan" selected>湖南省</option>
                <option value="hubei">湖北省</option>
                <option value="sichuan">四川省</option>
                <option value="jiangxi">江西省</option>
            </optgroup>

            <optgroup label="自治区">
                <option value="guangxi">广西壮族自治区</option>
                <option value="ningxia">宁夏回族自治区</option>
            </optgroup>

            <optgroup label="直辖市">
                <option value="chongqing">重庆市</option>
                <option value="shanghai">上海市</option>
                <option value="beijing">北京市</option>
                <option value="tianjin">天津市</option>
            </optgroup>
        </select>

multiple除了可以让下拉框可以选择多个选项,还可以让file上传框允许选择多个文件

<input type="file" multiple />

10-表单控件-select（下拉框）.html

表单控件常用属性

通过src属性可以设置图片按钮的图片, 通过width属性设置宽度, 通过height属性设置高度

<input type="image" src="./images/btn_reg.png" width="300" />

disabled禁用控件,不能修改值也不能输入值数据不会提交

<input type="text" name="username2" disabled value="zhangsan2">

readonly只读内容不允许修改, 但是数据还可以提交

<input type="text" name="username3" readonly value="zhangsan3">

autofocus自动获取焦点,仅第一个使用的表单控件可以生效

<input type="text" autofocus />

autocomplete：所有input元素，用于表单的自动填充功能取值 off关闭自动填充或者 on(默认,开启自动填充)

注意：想要使用autocomplete属性触发表单自动填充功能, 前提是这个表单控件需要有一个name属性, 并且成功提交过数据,才会把之前成功提交的数据记录下来

<input type="text" name="myAge" placeholder="请输入年龄" autocomplete="off"/>
<input type="text" name="myAge" placeholder="请输入年龄" autocomplete="on" />

required：绝大部分input元素,表示此值为必填项
maxlength：当input元素type为password, search, tel, text, url时，value 的最大长度（最多字符数目）
size：当input元素email, password, tel, text时,控件的大小 , 取值数值, 默认20

<input type="text" required maxlength="6" size="30" />

11-表单控件常用属性.html

H5新增表单输入类型

number：只能输入数字的输入框。
- max属性设置最大值
- min属性设置最小值
- step设置步长值

<p>
	数字的输入框: <input type="number" value="5" min="1" max="12" step="2" />
</p>

email：编辑邮箱地址的输入框。类似 text 输入，但在支持的浏览器上会有邮箱格式的规则验证提示。

<p>邮箱: <input type="email" /></p>

search (H5新增)：用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。

<p>搜索框: <input type="search" /></p>

tel (H5新增)：用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。

<p>电话号码:<input type="tel" /></p>

url (H5新增)：用于输入 URL 的控件。类似 text 输入，在支持的浏览器上会有URL的规则验证提示，在支持动态键盘的设备上有相应的键盘。

<p>网址:<input type="url" /></p>

表单日期类型：

		<!-- week：用于输入以年和周数组成的日期，不带时区。 -->
        <p>星期:<input type="week" /></p>
        <!-- month (H5新增)：输入年和月的控件，不带时区。 -->
        <p>月份:<input type="month" /></p>
        <!-- time (H5新增)：于输入时间的控件，不包括时区。 -->
        <p>时间:<input type="time" /></p>

        <!-- date (H5新增)：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮。 -->
        <p>日期:<input type="date" /></p>

        <!-- datetime-local(H5新增)：输入日期和时间的控件，使用户所在时区。 -->
        <!-- 在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。(目前支持的浏览器为数不多) -->
        <p>日期时间:<input type="datetime-local" /></p>

表单颜色类型

<p>
	颜色:<input type="color" />
</p>

表单范围控制类型

<p>
	范围:
	<!-- max属性设置最大值 -->
	<!-- min属性设置最小值 -->
	<!-- step设置步长值 -->
	<input type="range" value="20" min="0" max="100" step="1" name="myScore" />
</p>

12-H5新增表单输入类型.html

常用布局标签div与span

div的特点

   1. 独占一行,默认只要有标签内容,不管内容多或者少,都会占满一行
   2. 不会标签内容的样式(不会加粗,不会倾斜等)
   3. div上下无空白距离
   4. 所以div作为容器使用, 方便设置CSS样式

span的特点

   1. 不独占一行, 一行可以存放多个, 直到放不下才会换行
   2. 不会标签内容的样式(不会加粗,不会倾斜等)
   3. span上下左右无空白距离
   4. span的宽度由内容决定
   5. span也是作为容器使用,方便设置CSS样式

HTML全局属性

全局属性是所有 HTML 元素共有的属性；它们可以用于所有元素，尽管它们可能对某些元素没有影响。

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
class：我们将class的属性值称之为“类名"，只要是拥有相同的class的属性值不管是什么标签我们都可以将其称之为一类！class属性一般多用于CSS中
设置多个类名的时候,多个类名之间使用空格隔开

<b class="one two three">bbb</b>
<span class="three">span</span>

id：id属性是标签的唯一标识，一个页面中可以有很多id属性，但是每个标签的id属性的值必须是唯一的 ; 它就好多我们的身份证号码一样！id属性一般多用于JavaScript中

<div id="div1">id为div1的内容</div>
<div id="div2">id为div2的内容</div>

标签：控件,个人,标签,单元格,笔记,表单,设置,CSS,属性
From： https://www.cnblogs.com/makeinu/p/18656181

介绍