web开发——前端html、css、JavaScript学习总结(持续更新中.......)

目录模版

1 html:结构
- 标签/属性
- - 文本标记: mark
  - 文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong
  - 超链接: a
  - 联系信息: address
  - div 定义文档中的分区或节: div
  - 行元素:span
  - html结构: main / section / article
  - nav
  - 表格:table
- html中各种标签/属性的英文扩写分别是?(如 tr,td,ol,ul,li; 方便记忆)
- 特殊符号
- - 元信息:meta
- 注意事项
- 总结
- - html 中如何删除空行?
  - HTML标签和元素的区别, 非(空)元素(标签)?
  - html中单选按钮radio、复选框checkbox是什么样子？
- 实战
- - html中如何让图片放左边,文字紧邻着放右边、 html中如何设置段落之间的间距和文字大小、 html中一行如何设置两种大小的字体?
  - 如何使用html 制作表格？表格要求: 最上边和最下边两框线加粗显示, 表格整体左右两端没有框线, 内部框线正常显示, 使用caption标签的标题与表头有段落间距.
  - 在html中如何在同个h1标签下设置同行文字之间的间隔?
  - 在html中如何在同一行内设置不同照片之间的间隔?
  - html 点击链接提示: The requested resource is not available.
- html 问题
- - html5手册(w3school手册)运行html代码时提示: 确保Web地址 //ieframe.dll/dnserrordiagoff.htm#正确此页面已被 Microsoft Edge 阻止 ERR_BLOCKED_BY_CLIENT
2 css:表现
- 选择器
- 标签+ 属性代码大全(解释)
- 布局
- 辅助sublime插件:emmet
3 javascript:行为
待续、更新中

1 html:结构

标签/属性

文本标记: mark

定义带有记号的文本,突出显示文本

<p>作为下一代Web标准，<mark>HTML5</mark>致力于为互联网开发者搭建更加便捷，开放的沟通平台。业界普遍认为，在未来几年内，<mark>HTML5</mark>
		无疑将成为移动互联网领域的主宰者。本书是系统学习网页设计和移动设计的参考图书。
	</p>

效果图:
在这里插入图片描述

文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong

超链接: a

属性
href="#" , # 符号被用作占位符URL，通常表示超链接不指向任何特定位置

联系信息: address

为文档或 section 定义联系信息

div 定义文档中的分区或节: div

div
块元素,标签定义文档中的 division/section 
一个元素就占一整行

行元素:span

span: 
组合文档中的行内元素
多个元素占一行元素

html结构: main / section / article

main:
呈现网页的主体内容，且每个页面只能有一个


section
用于对与主题相关的内容进行分组; 有联系的内容组

div
内容组

article
定义 article 以外的内容, 独立完整的内容

nav

nav
定义导航链接的部分

表格:table

属性:
cellspacing="0"： ( 间距，指单元格之间的距离 )设置单元格之间的间距为0像素，即单元格之间没有间隔。
border="1"： ( 边境 )设置表格边框的大小为1个像素。
 colspan="2"   单元格跨越的列数
 rowspan="2"  单元格跨越的行数

html中各种标签/属性的英文扩写分别是?(如 tr,td,ol,ul,li; 方便记忆)

table标签中的 tr,td…等的英文扩写分别是

	<td> 是table data  的缩写，数据单元格
    <tr>是table row 的缩写，表格中的一行
    <th> 是table heading 的缩写，表头单元格

列表标签中 ol ul li …等的英文扩写分别是

ol 有序列表,ordered list
ul 无序列表, unordered list 
li 列表项目, list
自定义列表:
dl 定义列表, definition list
dt 定义标题,definition title
dd 定义描述,definition description

其他:

div: division 部门,分开
span:

特殊符号

空格: &nbsp;

元信息:meta

 <meta charset="utf-8">
设置文件编码方式: utf-8

注意事项

属性不可交叉
input 
该空元素表标签中，type=“radio” 或其他类似情况，name（标识input） 的值一般相同
type=reset 、 sublime 时， name属性不设置

总结

html 中如何删除空行?

HTML标签和元素的区别, 非(空)元素(标签)?

区别

标签：形如<p>，由一对尖括号和表示标签含义的“关键字”构成。
元素：形如<p>一些内容</p>，由开始标签、结束标签以及标签中包含的内容构成。
元素( 范围 )  > 标签

非(空)元素(标签)

元素可按有无元素内容分为非空元素和空元素两类，对应的标签为非空标签与空标签
非空元素: 指含有内容的元素, <title>测试页</title>
非空标签:  指标识非空元素的标签，有开始和结束两个标签,   <title>   </title>
空元素:指不含内容的元素,一个空元素只有一个标签
空标签: 指标识空元素的标签

例

空元素
<img src="lena.gif" /> 
<br /> 
<hr />

空标签
<hr />

html中单选按钮radio、复选框checkbox是什么样子？

单选按钮
在这里插入图片描述

复选框
在这里插入图片描述

实战

html中如何让图片放左边,文字紧邻着放右边、 html中如何设置段落之间的间距和文字大小、 html中一行如何设置两种大小的字体?

看上传的文件html:  李白曰道德.zip

如何使用html 制作表格？表格要求: 最上边和最下边两框线加粗显示, 表格整体左右两端没有框线, 内部框线正常显示, 使用caption标签的标题与表头有段落间距.

在html中如何在同个h1标签下设置同行文字之间的间隔?


<html>
    <head>
        <title>  四季轮回</title>
        <meta charset="GB18030">
<style>
    /* 设置span元素之间的间隔 */
    h1 span {
        margin-right: 260px; /* 设置间隔大小 */
    }
</style>
    </head>
    <body>
        <h1> <span>csdn</span> 
            <span>博客园</span>
            <span>w3cschool</span>         
            <span>github</span>
        </h1>
    </body>
</html>

效果图:
在这里插入图片描述

在html中如何在同一行内设置不同照片之间的间隔?


<!DOCTYPE html>
<html>
    <head>
        <title>  四客轮回</title>
        <meta charset="GB18030">
        <style>
            /* 设置span元素之间的间隔 */
            h1 span {
                margin-right: 150px; /* 设置间隔大小 */
                margin-left:  150px;
            }
            img {
                margin-right: 130px;
            }
        </style>
    </head>
    <body>
        <h1> <span>csdn</span> 
            <span>博客园</span>
            <span>w3cschool</span>         
            <span>github</span>
        </h1>
        <br/>
        <br/>
        <div>
            <img src="../img/csdn1.png" width="300" height="500" />         
            <img src="../img/bokeyuan2.png" width="300" height="500"   />
            <img src="../img/w3cschool3.png" width="300" height="500"     />
            <img src="../img/github4.png" width="300" height="500"   />
        </div>
    </body>
</html>

效果图
在这里插入图片描述

html 点击链接提示: The requested resource is not available.

如图:
在这里插入图片描述

html 问题

html5手册(w3school手册)运行html代码时提示: 确保Web地址 //ieframe.dll/dnserrordiagoff.htm#正确此页面已被 Microsoft Edge 阻止 ERR_BLOCKED_BY_CLIENT

设置--隐私---安全性,管理 Microsoft Edge 的安全设置
找到Microsoft Defender Smartscreen  关闭该选项

2 css:表现

选择器

类型选择器:  h1{}
统配选择器: * ,全部 { }
包含选择器: div  span, 选择div标签内的 span标签
子元素选择器: div > span { }, 选择div标签下的 紧接着的第一个级别的span标签
相邻兄弟选择器: div+span, 同级标签<p></p> <h1></h1>
id选择器:  给某个特殊元素进行选择, 自定义选择器; 如:  id="自定义名" ;  选中: #自定义名{  }
class选择器: 类选择器,给多个元素进行原则 ; 
分组选择器: h1,h2,h3
属性选择器: h1[height] , 选择具有height属性的h1标签
属性选择器: height=10px , 选择具有height属性,且值为10px的标签
属性选择器: E1[attr^=value]  选择具有attr属性且属性值以value开头的每个元素
属性选择器: E1[attr$=value]  选择具有attr属性且属性值以value结尾的所有元素
属性选择器: E1[attr*=value]  选择具有attr属性且属性值包含value子串的每个元素

选择器优先级

优先级

	id>属性> 类选择器>*

提升优先级

 !important 
 
例如: 
tr td:last-child { border-right: 0   !important }

标签+ 属性代码大全(解释)

代码示例:

<style>

  table {
        border-top: 4px solid #0d0d0d( 也可以直接设置为英文颜色单词);
	    border-bottom: 4px solid #0d0d0d;
	    border-left: 1px solid #FFFFFF;
	    border-right: 1px solid #FFFFFF;
	    border-collapse: collapse;
        width: 100%;
            
        }
    tr td:first-child { border-left: 0; }
    tr td:last-child { border-right: 0; }


 .table-title {
            padding-top: 15px;
            padding-bottom: 15px;
        } 




</style>


<table class="table" cellspacing="0"  border="1"  >


caption {
            caption-side: top;
            margin-bottom: 10px;  标题与表头之间的段落间距 
            font-weight: bold;
        }

分析:

选择器

table :  选择表格
first-child: 在一组兄弟元素中的第一个元素
tr td:first-child： 选择每一行（<tr>元素）中的第一个单元格（<td>元素）


距离*距离:
border-top:  3px solid black;： ( 距离顶部边界距离 ) , 设置表格单元格的顶部边框宽度为3像素，样式为实线，颜色为黑色。 
border-left: 0 (none) ; : 距离左边边界距离, 为选中的单元格设置左边框为0 , 去除每行第一个单元格的左边框; (none): 表格单元格的左侧边框样式为无,这意味着左侧边框将不会显示
border-bottom:  距离底边边界距离
border-right:   距离右边边界距离



线条
dashed: 虚线
solid: 实线,固体


内边距:
cellspacing="0"：
(间距 ),  设置表格中单元格之间的空白距离。 设置为"0"，意味着单元格之间没有额外的空间。
border="1"：
(边界),  设置表格的边框宽度。 设置为"1"，意味着表格的每一边都会有1像素宽的边框。
padding-top: 15px;：( 顶部填补)设置元素的顶部内边距 为15像素。内边距是元素内容与其边框之间的空间。
padding-bottom: 15px;： (底部填补) 设置元素的底部内边距 为15像素。 





border-collapse: collapse;： (折叠边缘), 设置表格的边框折叠属性为collapse。当边框折叠时，相邻单元格的边框会合并在一起，从而减少边框的宽度

width: 100%;： 设置表格的宽度为100%。这意味着表格将占据其父元素（通常是<div>或<td>）的全部可用宽度。

caption-side: top;： (标题边 ) 设置表格标题的位置为顶部。默认情况下，表格标题位于表格的底部。通过将caption-side设置为top，您可以将标题移动到表格的顶部。


字体:
font-weight: bold;： (字体重量), 设置表格标题的字体粗细为粗体; 或数字900; 设置粗体重量
font-style: italic ( normal, dash );  (字体样式: 斜体/ 正常的/ 虚线  )



text-align: center; : (文本排列 ) , 设置文本的水平对齐方式为居中对齐。这意味着文本将在其容器中水平居中。

overflow: hidden;： （溢出：隐藏） 设置元素的溢出内容处理方式为隐藏（hidden）。这意味着当元素的内容超出其容器的边界时，超出部分将被隐藏，不会显示在屏幕上。

浮动
float:  left ； (浮动：左边） 控制元素的浮动行为，向左浮动，直到遇到其前一个元素或者容器边界为止

text-decoration:none;   	 /*清除下划线默认样式*/



 

控制盒子之间的外边距, 段落间距:
margin-top/bottom/left/right: 50px;
margin: 10px(全)
margin:5px(上下)  10px(左右);
margin:5px(上)  10px(左右); 5px(下);
margin:5px(上)  10px(右); 5px(下); 10px(左);
如:
margin-bottom:20px;  (底部边缘) 标题与表头之间的段落间距....
margin-top: 10px; (顶部边缘)  标题与表头之间的段落间距 





内边距:
padding-top/bottom/left/right: 10px;

布局

布局方式

table 标签(淘汰)

1 盒子模型



```bash
导航栏: 
nav 
盒子+ul + li li li , 左浮动
盒子+  ,右浮动

nav
div
div
div

从上往下,从左往右

2 绝对定位

3 弹性盒flexible box



## 注意事项
style中设置的格式, 也遵循编程中的顺序原则,代码放置的顺序不同,结果也不相同



## 总结
###  写css ( style)代码的三种方式 ?
	1  head下写 style 标签添加
	<head> <style >  
```bash
<head>
<style>
#abc{
 color:orange;
 
}

2 行内添加

<a id="abc" href="www.baidu.com"> 百度1</a>

<div> <div/>
<p style="color:red" > <p>
3  html中 引用文件 css文件

css www 目录下 写1.css 文件
	<head> <link type="text/css "  href="../abc.css " <head/>
	
	html文件中, head 标签下: 
	<link rel="stylesheet" type="text/css" href="../css/1.css">

辅助sublime插件:emmet

sublime 快捷写html文件, 设置html插件:
ctrl+shift+p
package control: install package
emmet
使用:

div>span>a[ href=www.baidu.com]{百度} *3
按tab键

3 javascript:行为

待续、更新中

—————————————————————
以上就是今日博客的全部内容了
创作不易,若对您有帮助,可否点赞、关注一二呢,感谢支持.