搜索到
1
篇与
的结果
-
HTML学习笔记 HTML NOTE创建于2021.10.28@标准一定要以<!DOCTYPE>开头常用:<!DOCTYPE html>一定要在<head>中指定正确的字符编码一定要在<head>中写title元素始终对图像使用alt属性始终定义图像尺寸，可减少闪烁为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。无必要缩进:<body> <h1>Famous Cities</1> <h2>Tokyo</h2> <p>lorem</p> </body>更好的格式:<body> <h1>Famous Cities</1> <h2>Tokyo</h2> <p></p> </body>@元素使用小写标签。大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。某些 HTML 元素具有空内容（empty content)。<br/>块元素-特立独行内联元素-随波逐流@属性使用小写属性。始终加引号。完整的标签参考手册。https://www.w3school.com.cn/tags/index.asp所有连续的空格或空行都会被算作一个空格。常用标签： <hr/>定义水平线 <!--这是注释--> <br/>换行@标题HTML heading标签只用于标题，搜索引擎使用标题为您的网页的结构和内容编制索引。尽量避免使用的标签和属性标签：<center> 定义居中内容 <font> 和 <basefont> 定义HTML字体 <s> 和 <strike> 定义删除线文本 <u> 定义下划线文本 <pre> 按输入的原样显示文本属性：align 定义文本的对齐方式 bgcolor 定义背景颜色 color 定义文本颜色请使用样式代替以上内容！@样式style淘汰了bgcolor,用backgroud-color代替<h2 style="background-color:red"> This is a heading </h2>@字符实体用&（与符号加字母表示特殊字符）eg.<html>在html中显示为<html>&在html中显示为&©显示为©（这玩意儿是版权符号）@Doctype万维网协(World Wide Web Consortime,W3C)会是定义HTML标准的组织html4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> html5<!doctype html>@超链接(a元素 anchor 锚)页面内链接到id:<h1 id="top">标题</h1> <a href="#top">回到页顶</a>target属性<a target="_blank" href="www.bai1hao.top">用新的窗口打开网页</a>@div作用:将网页分为数个逻辑区eg.<div id="header"> <h1>...</h1> </div> <div id="main"> <p>...</p> <p>...</p> ... </div> <div id="footer"> © </div>如上分为header(标题),main(主体),footer(页脚)对div的id写css时，其中所有内容都是div盒模型的内容@span作用:使用span把段落中的文字划分为独立的内联元素，以便于施加不同的修饰<p><span class="word1">这是一个段落</span>，这是第二句话。</p>可以对span范围内的文字单独添加效果，而不影响本段其他文字@iframe定义内联的子窗口<iframe src="http://www.bai1hao.top" name="myWeb"></iframe>name属性可用于链接的target<a src="http://www.bai1hao.top" target="myWeb">在内联窗口中打开网页</a>@表格 <table> <tr> <th>项目1</th> <th>项目2</th> <th>项目3</th> </tr> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> </table>table header cell 表头单元格(HTML中的th标签)table data cell 表格数据单元(HTML中的td标签)table row 表格行（HTML中的tr标签）表头默认使用粗体如果单元格没有数据写为<td></td>table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; border-spacing: 0px; } td, th { border: thin dotted gray; padding: 5px; } caption { font-style: italic; padding-top: 8px; }表格单元格没有外边距，只有间距水平和垂直方向不同的边框间距border-spacing: 10px 30px;忽略边框间距border-collapse: collapse;单元格跨行/列跨两行<td rowspan="2">内容</td>跨列<td colspan="2">内容</td>被占用格子的单元格不用写<td>@列表ol是有顺序的列表，会自动排序ul无序列表<ul> <li>列表项</li> </ul>无序列表样式li { list-style-type: disc;默认的圆点 }circle 空心圆点square 正方形none 无标记有序列表样式list-style-type: decimal十进制upper-alpha 大写字母lower-alpha 小写字母upper-roman 大写罗马数字用图片当作标记li { list-style-image: url(图片路径) padding-top: 5px; margin-left: 20px;给左侧留空间 }<hr/><hr/>CSS (stylesheet) 样式表@引入.css文件<link type="text/css" rel="stylesheet" href=".css文件路径">html5以后type属性可写可不写@css文件内容内容和style标签差不多h1,h2 { /*属性*/ }@引入多个样式表<link type="text/css" rel="stylesheet" href="lounge.css"> <link type="text/css" rel="stylesheet" href="lounge-2.css"> ...下方的样式表会覆盖上方@link中的媒体查询用途:设置允许访问的设备类型<link href="lounge-moblie.css" rel="stylesheet" media="screen and (max-device-width:480px)">screen指定了有屏幕的设备（)括号的内容指定屏幕宽度不超过480像素<link href="lounge-print.css" rel="stylesheet" media="print">print指定了媒体类型为打印机1.min-device-width2.max-device-width3.显示方向[orientation, 横向(landscape)或纵向(portrait)]4.max-width5.min-width作用:针对不同的设备设置不同的css文件，展现不同的效果@css中的媒体查询@media screen and (min-device-width: 481px){ #guarante { margin-right: 250px; } }该括号存放所有适用于该设备的规则@类命名:必须以字母开头定义一个或多个类eg.p.greentea,h1.greentea { color: green; }调用段落的类<p class="greentea">调用标题的类<h1 class="greentea">@一个元素调用多个同属性类eg.<p class="greentea raspberry blueberry">调用规则：1.看特定程度2.程度相同看样式表的顺序，调用最靠后的类!@类的特定程度 低->高所有段落p { color:red; }绿色类中所有成员.green { color: green; }绿色类中的段落p.orange { color: orange; } @常用css属性width 设置内容宽度color 设置文本颜色font-weight 控制文本粗细left 指定左边的位置line-height 设定行间距top 距离顶部的位置letter-spacing 字符间距(水平)background-color 设置背景颜色border 设置边框padding 设置元素边缘和内容之间的空间(内边距)font-size 设置字体大小text-align 设置对齐方式font-style 设置斜体文本等list-style 设置列表项的外观background-image 放置背景图像margin 设置外边距margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px;@首选字体类型body { font-family: Verdana,Geneva,Arial,sans-serif; }浏览器按顺序寻找字体库(取决于用户是否安装)，第一个找不到找第二个，若全部字体都没有，则使用浏览器默认字体body { font-family: "Courier New"; }@Web 开放字体.woff文件(web open font farmat)web开放字体格式调用：@font-face { font-family: "Emblema One"; src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf"); }注:1."@"是内置css规则2.font-family中的名称为自定义的名称3.一种web字体对应一个@font-face块4.每个url对应一种字体格式，防止某些浏览器无法使用@字体大小p { font-size:14px; }指字体的高度是14像素p { font-size:small; }按浏览器默认的关键字设置字体大小，大多数默认为12pxp { font-size:150%; }该百分比是相对于其父元素的字体大小！p { font-size:1.5em; }和百分比作用相同建议：body使用关键字，内容使用百分比@字体深浅(粗细)常用值粗体:bold普通(去除父元素继承的属性):normalfont-weight:bold注:1.bolder,lighter大多数字体无变化2.100-900(100的倍数) 支持的字体不多，大多数无变化@字体样式(斜体等)p { font-style:italic; }1.斜体(向右倾斜，部分浏览器还会有弯曲的衬线):italic2.倾斜(字体向右倾斜):oblique注:具体效果取决于浏览器@颜色1.css中定义了150种颜色body { backgroud-color:orange; } 2.用16进制表示颜色 backgroud-color:#fc1257;3.使用百分比 backgroud-color: rgb(80%,40%,0%);4.用0-256之间的整数 backgroud-color: rgb(204,102,0);<br/>@颜色2-最广泛应用的是十六进制解析:eg.#cc6600可分为红，绿，蓝三个部分即:R-cc,G-66,B-00;<br/>cc的解析:1.取左边的c写出:c十进制,然后再*162.取右边的c写出十进制:123.最后相加，即:12+12*16=12+192=204eg.解析66，6*16+6=102注:如#cc6600一类的十六进制代码可以使用简写，即:#c60@文本修饰给段落同时添加下划线和上划线p { text-decoration: underline overline; }line-through 删除线none 除去父元素的修饰注:对同一元素写两个不同的decoration块不会叠加,必须如上方那样在一个decoration中写多种修饰才会叠加关于删除线，若要表示为想要删除的内容，可使用<del>元素如果只是想要效果则使用css中的line-through@布局结构-盒模型html布局图示 在css看来，任何元素都是盒子box 1.内边距和外边距是透明的，可显示背景图片和背景颜色 2.顺序问题:先设置左内边距，再设置总内边距，左内边距会被覆盖@边框颜色border-color: rgb(100%,0,0);宽度border-with: thin;样式solid 实线double 双实线groove 页面上的槽outset 外凸dotted 点线dashed 破折现inset 内凹ridge 脊线圆角border-radius: 15px;设置四个角为半径15的圆角border-top-right-radius: 15px;设置右上角为半径15的圆角简写:border: solid thin; border: #007e7e solid;@CSS背景p { background-image: url(images/background.gif); background-repeat: no-repeat; background-position:top left; }1.设置背景图片2.决定是否重复3.设置位置为左上@ideg.<h1 id="top">页首的标题</h1>用css的id选择器可以使对应的内容特立独行#top { /*这里面的属性只针对top，不会再针对其他内容*/ }命名:id中不能有空格@选择器id选择器 #+id类选择器 .类名子孙选择器 前两种后空格加子孙元素属性选择器a[target="_blank"] 选择满足括号条件的a元素[title~="flower"] 选择title有flower的元素eg. #elixirs h2当是id为elixirs的元素的子元素或孙元素时选择eg. #elixirs>h2只有当是id为elixirs的元素的子元素时才选择@简写backgroundp { background-image: url(images/background.gif); background-repeat: no-repeat; background-position:top left; }简写:background: url(images/background.gif) no-repeat;marginmargin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px;简写:margin: 0px 20px 30px 10px;padding类似padding: 0px 20px 30px 10px;顺序:从上开始顺时针方向@伪类-<a>的多种状态注意:visited写在hover后面时，hover无法触发！！！伪类(pesudo-class)未点击的链接a:link { color: green; }已经访问过的链接a:visited { color: red; }鼠标悬停时的链接a:hover { color: yellow; }结合子孙选择器#elixirs a:link { color: #007e7e; } ......nth-child伪类<section> <p>第一行</p> <p>第二行</p> <p>第三行</p> </section>对于p存在如下伪类p:nth-child(even) {/*这是选择双数行*/ background-color: red; } p:nth-child(odd) {/*这是选择单数行*/ background-color: green; }p:nth-child(2n){} p:nth-child(2n+1){}@层叠！即计算css的特定性判断使用哪个算法:位:0-0-0号:1 2 31.每有一个id加12.每有一个类或伪类加13.每有一个元素名加1eg.h1.blueberry 得分 011h1 得分 001对于同一个元素(真正的同一个，而非同名)，分越高越特定，浏览器采用最特定的那个css当规则冲突时<h1 class="blueberry berry">h1.blueberryh1.berry浏览器选择css表中后出现的，即berry类的规则@布局(layout)1.浮动布局2.冻结，凝胶布局3.绝对布局4.表格显示布局流(Flow)布局:默认情况下,从左上开始放置元素两个块元素(盒模型)并排放置时边距会折叠，即使用最大那个两个内联元素并排时会相加浮动的元素--float属性float: right;作用: 将元素从流布局中剔除，剩余的流在其下方继续流动，无视边框(内容除外)clear 属性#footer { clear: left; } 清空左侧的浮动元素@冻结设置将body的所有内容全部装在id为allcontent的div中，对齐设置宽度#allcontent { width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; }无论浏览器怎么变，页面永远那么大![冻结设置实例]()@凝胶设置凝胶(jello)#allcontent { width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; margin-left: auto; margin-right: auto; }结果凝胶设置实例@绝对定位绝对(absolute) #sidebar { position: absolute; top: 100px; right: 200px; width: 280px; }会从流中删除，且会重叠两个绝对定位重叠position属性 默认值为staticabsolute(绝对定位)fixed(固定定位)relative(相对定位)static@表格布局<div id="tableContainer">表格 <div id="tableRow">第一行 <div id="main">第一列 ... </div> <div id="sidebar">第二列 ... </div> ... </div> </div>#tableContainer { display: table;定义为表格 border-spacing: 10px; } #tableRow { display: table-row;定义为行 } #main { display: table-cell;定义为单元格内容 vertical-align: top;上边对齐 }效果：表格布局实例此时页眉与表格之间的空隙有20px,因为表格的间距border-spacing与页眉的下边距叠加，10px+10px即为20px;@绝对布局#award { position: absolute; top: 30px; left: 365px; }将id为award的元素相对于页面放置与固定位置@固定定位#coupon { position: fixed; top: 300px; left: 100px; }将id为coupon的元素相对于浏览器窗口放置于固定的位置，即不会随页面滚动条滚动而滚动将left设置为负数的效果当left为负数时，多余部分会隐藏@相对定位元素仍在正常的页面流中，然后再按你指定的量偏移元素@inline-block间隙解决方案（原文链接：https://blog.csdn.net/qq_32614411/article/details/82223624）元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。————————————————版权声明：本方案为CSDN博主「Hayley2016」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。@HTML5新特性<article> <nav> 全称navitation导航 <header> <footer> <time> <aside> <section> 一个主题性内容分组 <video> 以上标签可以替换原先复杂的div标签的id,并使其具有意义video标签<video controls autoplay width="512" height="288"> <source src="video/tweetsip.mp4"> <source src="video/tweetsip.webm"> <source src="video/tweetsip.ogv"> <p>Sorry, your browser doesn't support the video element</p> </video>controls 使用视频控件autoplay 自动播放source 视频地址，为应对不同浏览器而准备多种格式更具体的指定格式，使浏览器更快的播放<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>如果不知道codecs参数可省略
