深圳做自适应网站公司,河北云建站,建筑方案设计收费标准,国外室内设计案例网站目录模版 1 html:结构标签/属性文本标记: mark文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong超链接: a联系信息: addressdiv 定义文档中的分区或节: div行元素:spanhtml结构: main / section / articlenav表格:table html中各种标签/属性的英文扩… 目录模版 1 html:结构标签/属性文本标记: mark文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong超链接: a联系信息: addressdiv 定义文档中的分区或节: div行元素:spanhtml结构: main / section / articlenav表格: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标准markHTML5/mark致力于为互联网开发者搭建更加便捷开放的沟通平台。业界普遍认为在未来几年内markHTML5/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
属性:
cellspacing0 ( 间距指单元格之间的距离 )设置单元格之间的间距为0像素即单元格之间没有间隔。
border1 ( 边境 )设置表格边框的大小为1个像素。colspan2 单元格跨越的列数rowspan2 单元格跨越的行数
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 charsetutf-8
设置文件编码方式: utf-8
注意事项
属性不可交叉
input
该空元素表标签中type“radio” 或其他类似情况name标识input 的值一般相同
typereset 、 sublime 时 name属性不设置总结
html 中如何删除空行?
HTML标签和元素的区别, 非(空)元素(标签)?
区别
标签形如p由一对尖括号和表示标签含义的“关键字”构成。
元素形如p一些内容/p由开始标签、结束标签以及标签中包含的内容构成。
元素( 范围 ) 标签非(空)元素(标签)
元素可按有无元素内容分为非空元素和空元素两类对应的标签为非空标签与空标签
非空元素: 指含有内容的元素, title测试页/title
非空标签: 指标识非空元素的标签有开始和结束两个标签, title /title
空元素:指不含内容的元素,一个空元素只有一个标签
空标签: 指标识空元素的标签例
空元素
img srclena.gif /
br /
hr /空标签
hr /html中单选按钮radio、复选框checkbox是什么样子
单选按钮
复选框
实战
html中如何让图片放左边,文字紧邻着放右边、 html中如何设置段落之间的间距和文字大小 、 html中一行如何设置两种大小的字体?
看上传的文件html: 李白曰道德.zip如何使用html 制作表格表格要求: 最上边和最下边两框线加粗显示, 表格整体左右两端没有框线, 内部框线正常显示, 使用caption标签的标题与表头有段落间距.
在html中如何在同个h1标签下 设置同行文字之间的间隔? htmlheadtitle 四季轮回/titlemeta charsetGB18030
style/* 设置span元素之间的间隔 */h1 span {margin-right: 260px; /* 设置间隔大小 */}
/style/headbodyh1 spancsdn/span span博客园/spanspanw3cschool/span spangithub/span/h1/body
/html
效果图:
在html中如何在同一行内 设置不同照片之间的间隔? !DOCTYPE html
htmlheadtitle 四客轮回/titlemeta charsetGB18030style/* 设置span元素之间的间隔 */h1 span {margin-right: 150px; /* 设置间隔大小 */margin-left: 150px;}img {margin-right: 130px;}/style/headbodyh1 spancsdn/span span博客园/spanspanw3cschool/span spangithub/span/h1br/br/divimg src../img/csdn1.png width300 height500 / img src../img/bokeyuan2.png width300 height500 /img src../img/w3cschool3.png width300 height500 /img src../img/github4.png width300 height500 //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标签
相邻兄弟选择器: divspan, 同级标签p/p h1/h1
id选择器: 给某个特殊元素进行选择, 自定义选择器; 如: id自定义名 ; 选中: #自定义名{ }
class选择器: 类选择器,给多个元素进行原则 ;
分组选择器: h1,h2,h3
属性选择器: h1[height] , 选择具有height属性的h1标签
属性选择器: height10px , 选择具有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 }
标签 属性代码大全(解释)
代码示例:styletable {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;} /styletable classtable cellspacing0 border1 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: 实线,固体内边距:
cellspacing0
(间距 ), 设置表格中单元格之间的空白距离。 设置为0意味着单元格之间没有额外的空间。
border1
(边界), 设置表格的边框宽度。 设置为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 idabc hrefwww.baidu.com 百度1/adiv div/
p stylecolor:red p
3 html中 引用文件 css文件css www 目录下 写1.css 文件head link typetext/css href../abc.css head/html文件中, head 标签下: link relstylesheet typetext/css href../css/1.css
辅助sublime插件:emmet
sublime 快捷写html文件, 设置html插件: ctrlshiftp package control: install package emmet 使用:
divspana[ hrefwww.baidu.com]{百度} *3
按tab键3 javascript:行为
待续、更新中 ————————————————————— 以上就是今日博客的全部内容了 创作不易,若对您有帮助,可否点赞、关注一二呢,感谢支持.
