HTML/CSS——1
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML/CSS——1相关的知识，希望对你有一定的参考价值。
2019.6.22-6.23Webstorm里快捷键：
Ctrl+shift+/ 下划线
Ctrl+D 复制
Alt+F2选择浏览器
全角半角 切换 shift+space空格
<a href=" " target="目标窗口 "> </a>
target里：_blank新窗口 _parent原窗口
<a href=" mailto:邮箱地址" > </a>
<br> 换行 <hr> 水平线 <i>倾斜 <b>加粗 <sub>下标</sub>
<sup>上标</sup> 预格式化<pre> <em>倾斜
锚点：跳转到页面的不同位置
<a id="xxx"> <a href="#xxx">(跳转到同一页面)
<a href="文件名 #name">(跳转到页面的不同位置)
../image/img2.jpg(Ctrl+鼠标放上去为蓝色，即为路径正确)
<img src=" " alt="对图片的解释；描述；搜索，检索">
图片的三种格式：
jpg:像素高
png:透明背景，抠图，小图标
gif：动图
.webp新书的一种图片格式，只有浏览器可以解析
列表
无序：ul>li*3 disc ,circle,square
有序：ol>li type="A" start="3" (从C开始)
自定义：dl.dd标题.dt内容
表格<table>
<caption> 表头
<tr>行
<td></td>单元格
</tr>
</table>
表格属性：
border，width,bgcolor,cellspacing单元格之间，cellpadding字与单元格之间。colspan="2"跨列合并，rowspan="2"跨列合并。
tbody 浏览器检查时自己加的，代码里无。
表单元素<form action="提交地址">
<input type="text/password/radio/checkbox/number" palceholder="提示信息" id="username">
<label for="username">
</input>
</form>
单选项：相同的name
多选项：默认选中 checked
下拉列表：select>option 第一个显示：selected 不显示：disabled 属性multiple：全展开
多行文本框：textarea style="resize:none"形式不可拉伸，固定
按钮:input type="submit /reset /button"
一个组<fieldset>
<legend> 标题</legend>
<input list="1"> 可预先搜索，在下拉列表中用到
<datalist id="1">
<label>包裹<input>实现点文字选中按钮
块级:<p>,<div>
行内：<span>,<a>,<img>
行内->块级：style=display:block
css语法：属性：值；
1.行内样式：<p style="">
2.页面内样式
<head>
<title></title>
<style>
p属性：值
</style>
</head>
3.外部样式表
<head>
<link >......
</head>
优先级：行内>页面内>外部样式>浏览器自带样式（后面会覆盖掉前面）
选择器class可调用多次，id#仅一次
text-align:center,left,right,justify(两端对齐)
font-size:20px;
em:以父元素为参考，增大字体倍数
rem：以根元素为参考
#fff白 #000黑- -->灰色逐渐加深
border-bottom/bottom-top选择性加边框
border：solid 1px #000 /none无边框线 transparent透明边框
border-style:solid,dashed（虚线）,double,dotted（点状）
border-width：1px/ thin,medium（默认），thick
border-color
background-image:url("images/1.jpg");
background-repeat：no-repeat ,repeat-x ,repeat-y ；(平铺)
background-position: right ,bottom ；背景定位 垂直：top,center,bottom;
background-attachment: fixed背景固定不滚动，scroll滚动
综合写一起：
background:url(" ") repeat right center fixed;
超链接的四种状态：
a:link 访问前
a:hover 悬停
a:active 点击
a:visited 访问后
text-decoration:underline,none,overline
vertical-align:top 垂直（文字图片的对齐方式）
text-indent:2em 首行缩进 2em两个字符
white-space:nowrap 不换行
img的margin:距上下左右的距离
line-height:段落字体的行高
对于div margin:0 auto;居中
margin: 3个值 ——上 左右 下
4个值—— 上 右 下 左（顺时针）
padding:内填充盒子模型：width=content-width+border+margin+padding
列表 list-style:none 改变序列前的图标 padding-left(左填充)
以上是关于HTML/CSS——1的主要内容，如果未能解决你的问题，请参考以下文章
CSS笔记--- CSS概述；HTML引入CSS样式的三种方式；列表样式；绝对定位