公司网站费用怎么做分录关键词推广优化外包
目录模版
- 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:
特殊符号
空格: 元信息: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:行为
待续、更新中
—————————————————————
以上就是今日博客的全部内容了
创作不易,若对您有帮助,可否点赞、关注一二呢,感谢支持.