HTML/CSS——1

2019.6.22-6.23
Webstorm里快捷键：
Ctrl+shift+/ 下划线
Ctrl+D 复制
Alt+F2选择浏览器
全角半角切换 shift+space空格
<a href=" " target="目标窗口 "> </a>
target里：_blank新窗口 _parent原窗口
<a href=" mailto:邮箱地址" > </a>
 换行 <hr> 水平线 倾斜 加粗 下标
上标 预格式化<pre> 倾斜
锚点：跳转到页面的不同位置
<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(左填充)

猜你喜欢