HTML

最新推荐文章于 2021-12-04 15:31:20 发布

Alagisme

最新推荐文章于 2021-12-04 15:31:20 发布

阅读量526

点赞数

分类专栏：读书笔记

本文链接：https://blog.csdn.net/Alagisme/article/details/77506720

版权

读书笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML基础元素

引用： `<q>`和`<blockquote>`标签

如果想在一段中加上引用就用<q>，内联元素；
如果想让引用自成一段则用<blockquote>，块元素。

换行：`<br />`

列表

有序列表:<ol start="5"><li></li></ol>;
无序列表:<ul><li></li></ul>;
自定义列表:

<dl>
    <dt> </dt>
        <dd> </dd>
    <dt> </dt>
        <dd> </dd>
</dl>

路径

~/：根路径，可省略（~）；
./：当前路径（可省略）；
../：父级（上一层）路径

超链接`<a>`

//链接到元素
<h1 id="top">top postition</h1>
<a href="#top">Back to top!</a>
<a href="localhost:8888/index.hrml#top">Go to top</a>

//在新窗口打开界面
<a href="#top" target="_blank">Back to top!</a>
<a href="#1" target="coffee">Click Here</a>//在名为coffee的窗口打开（如果没有，则打开一个新的窗口并命名为coffee）

样式

a:link{
    color:green;  //未访问
}
a:visited{
    color:red;  //已访问；
}
a:hover{
    color:yellow;  //悬停；
}
a:focus{
    color:blue;  //获取焦点，主要针对键盘切换；
}

`<img>`标签

服务器处理图像数据的过程：

浏览器请求一个界面，服务器返回文档数据；
浏览器显示文档；
服务器逐个返回文档上的图像数据；
结论：就算给img元素设置了width和height属性，仍然会从服务器获取全部大小的图像。width和height属性实际上是为了帮助浏览器确定需要为这个图像预留多大的空间。

<img>标签是一个内联函数，也属于void元素（在开始标记和结束标记之间没有任何内容的元素）

三种图像类型：
这里写图片描述

CSS基础样式

`<link>`和`<style>`标签

link用来链接外部文件，而style一般只用来引用本地代码

CSS样式继承

能够继承的属性：能够影响页面外观的属性，比如颜色系列，字体系列；
不能继承的属性：如边框

字体系列样式

1.字体 
font-family:Arial sans-serif;
//自定义字体(移动设备和小型设备不支持)
@font-face {
    font-family: 'Glyphicons Halflings';//为字体创建名字
    src: url(../fonts/glyphicons-halflings-regular.eot);
    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix);
}
h1{
  font-family:'Glyphicons Halflings';
}

2.字体大小 
font-size:14px;
font-size:1.2em;//相对于父元素的1.2倍
font-size:150%;//相对于父元素的150%
font-size:xx-small x-small small medium large x-large xx-large;//关键字

font-style:italic（斜体）;//字体样式；normal（正常）oblique（倾斜） inherit
color:red;   //文本颜色
font-weight:lighter normal bold bolder;   //字体粗细
text-decoration:none;// underline(下划线) overline(文本上的一条线) line-through(删除线) inherit(从父元素继承 text-decoration 属性);//更多样式

简写方式:font:font-style font-weight font-size/line-height font-family;

盒模型

将每个元素都看成一个盒模型，有四个方面，包括内容、内边距（padding）、边框(border)和外边距(margin)。
外边距提供元素之间的间距，而内边距是在内容周围增加额外的空间。可以将内边距看成元素的一部分，而外边距包围元素，将它与其他元素隔开。
这里写图片描述

background（背景）

background-image:url(../images/baidu.jpg);//注意：url中没有引号
background-repeat:no-repeat(图像不重复); // 或者repeat-x(图像在x方向上重复) repeat-y（图像在y方向上重复） inherit(继承父元素);
background-position: top left;//把图像放在左上角，还有其他指定位置的方法 (在盒子内)

简写方式：background：url(../images/baidu.jpg) no-repeat top left;

padding（内边距）和margin（外边距）

padding-left:14px;//设置左内边距
margin:14px; //同时设置四个方向的外边距
padding:10px 20px 10px 10px;//上、右、下、左分别指定

/*当内容区宽度为auto时，浏览器会根据需要拓展内容区；外边距为auto时，浏览器会设置正确的外边距，另外会确保左右的外边距相同，所以会内容居中*/
margin-left:auto;
margin-right:auto;

border（边框）

border-style:solid(实线);//dotted(虚线：点点点) dashed(破折线)
border-width:thin;//边框宽度：medium thick 1px 3px 5px 
border-color:rgb(0,255,255);//边框颜色
border-top-color:#444444;//指定其中一个边框
border-radius:2px;//指定边框圆角大小

简写方式：border: thin solid #444444;

width和height

//width和height针对内容区的宽度；
width:500px;
height:300px;

text-align：文本对齐

text-align（只能）用在块元素上，对块元素内的所有内联元素（包括img元素）对齐。如果直接用在内联元素上则不起作用。

层叠的概念

如果要找到元素的某个属性值（如font-size）：
1. 搜集所有样式表，包括作者写的、读者加的和浏览器默认的；
2. 找到所有匹配的声明；
3. 对所有匹配的规则进行排序（！important优先级最高），按作者>读者>浏览器排序；
4. 按特定性对所有声明排序：比如div > h1 比 h1更特定。
这里写图片描述
5.最后对于有冲突的规则，再按照他们在样式表中出现的顺序排序，最后出现的最重要；
6. 如果最后还是没有找到，则往上继承父元素；如果该元素不能继承，则使用浏览器默认值。

CSS位置样式

流的概念

浏览器从最上面的html文件开始，从上到下沿着元素流逐渐显示遇到的元素。显示规则为：在每个块元素之间加入一个换行；内联元素在水平方向上互相挨着。如果内容区或者浏览器太窄，内联元素会自动换行。

并排放置两个内联元素时
上下放置两个块元素时
float属性
float属性尽可能的向左或者向右浮动一个元素（浮动元素必须有一个宽度），此时正常流中会将这个元素删除，它下面的所有元素都会绕流。

总结：可以将浮动元素当成块元素忽略的元素，但是内联元素知道它在哪儿。
clear解决float设置后，下面的元素往上重叠的问题

＃footer｛ 
    clear：right；//设置它的右边没有浮动元素
｝

这里写图片描述

position

position属性默认是static;
position:fixed;//将元素放置相对于浏览器的位置上（而不是相对于页面），因此fixed元素位置永远不会改变(即使滚动页面，元素位置也不会改变);
position:relative;//相对定位
position：absolute;//绝对定位当元素设置绝对定位时，会将其从流中完全删除，后面的块级元素和内联元素都会忽略它（与float属性不同）。
//绝对定位的元素在一般元素的上面，但同时有多个绝对定位的元素时，需要用z-index属性区分
top:10%;//百分数是相对于浏览器窗口宽度和高度的百分比

div{
    position：absolute;
    left:20px; //距离父元素的左边20个像素
}

div{
    position：relative;
    left:20px; //将元素从原来的（相对）位置右移20个像素
}

overflow

在元素太小而不能包含所有文本时控制文本的溢出方式

overflow:visible;//默认方式。自动扩大矩形区域以容纳溢出的文本
overflos:hidden;//隐藏溢出的文本
overflos:scroll;//给元素添加滚动条，以便可以通过滚动看到所有文本

用CSS建立表格 display：table

<div id="tableContainer">
    <div id="tableRow">  //table-row表示结构中的一行
        <div id="main"> //table-cell表示每行中的一列
            <p>jsafkjkalfas</p>
        </div>
        <div id="siderbar">
            <p>jsfjljflaf</p>
        </div>
    </div>      
</div>

#tableContainer{
    display:table;//建立表格结构
    border-spacing:10px;//代替外边距margin设置，性质一样；表示每个格子之间的外边距
}

#tableRow{
    display:table-row;//表示结构中的一行
}
#main,#siderbar{
    display:table-cell;//表示每行中的一列(设置table-cell后margin属性无效)
}

Html表格

//html
<table>  <!-- 开始表格 -->
    <caption>德玛西亚</caption><!-- 表格标题（一些老的浏览器不支持位置调整功能）-->
        <tr> <!--开始一行-->
            <th>City</th> <!-- 表头 -->
            <th>Date</th>
            <th>Temp</th>
            <th>Altitude</th>
            <th>Population</th>
            <th>Diner Rating</th>
        </tr>
        <tr>
            <td>Walla Walla,WA</td> <!-- 每一项 -->
            <td>June 15th</td>
            <td>75</td>
            <td>1204ft</td>
            <td>29686</td>
            <td>4/5</td>
        </tr>
    </table>
//css
table{
  caption-side: bottom;//将标题移到表格下方
}

html表格和css表格的区别：如果确实需要在页面中创建表格数据时，采用html表格；如果只需要对内容使用表格的方式呈现，那么就用css表格。

表格中无外边距

这里写图片描述
注：border-spacing对IE6一下版本不支持

border-collapse

border-collapse：collapse; 折叠边框，可以把两个紧挨的边框合并成一个边框

text-align

规定元素中的文本的水平对齐方式

tr>td:nth-child(2),tr>td:nth-child(3),tr>td:nth-child(6){
    text-align: center; //默认是left
}

tr>td:nth-child(4),tr>td:nth-child(5){ //nth-child从1 开始计数
    text-align: right;
}

tr>td:nth-child(4);//nth-child(even) nth-child(2n)都可以表示偶数项

跨行rowspan和跨列colspan

<tr>
   <td>Walla Walla,WA</td>
   <td>June 15th</td>
   <td>75</td>
   <td colspan="2">1204ft</td>
   <td>29686</td>
   <td>4/5</td>
</tr>

这里写图片描述
使用跨行或跨列是记得要删除多余单元格

列表标记list-style-type 和list-style-image

li{
    list-style-type:circle;url(image/mark.gif);
    list-style-position:inside;//有缩进
}

//还可以定制标记
li{
    list-style-image:url(image/mark.gif);
    list-style-position:outside;//无缩进(默认)
}

HTML表单

//form:表单开始标记;action:web服务器地址
<form action="http://www.baidu.com" method="POST">
    First Name: <input type="text" name="firstname" value="" /><br />
    Last Name: <input type="text" name="lastname" value="" /><br />
    <input type="submit" />
</form>

文本输入

<input type="text" name="lastname" value="" placeholder="123" required/>
//placeholder:占位提示;required:必须输入这个域

提交输入

<input type="submit" name="submit" value="" />

单选框输入

//每个选项必须用相同的type和相同的name，不过可以用不同的value
<input type="radio" name="hotornot" value="hot" />
<input type="radio" name="hotornot" value="not hot" />

复选框输入

//同上
<input type="checkbox" name="hotornot" value="hot" />
<input type="checkbox" name="hotornot" value="not hot" />
<input type="checkbox" name="hotornot" value="cold" />

多行文本区

//rows和cols分别告诉浏览去文本去高度和宽度为多少个字符
<textarea name="comments" rows="10" cols="48"></textarea>

下拉菜单

//如果使用<select multiple></select>,就会变成多选菜单
<select name="charac"> //用name属性指定唯一的名字
    <option value＝"Buckaroo">Buckaroo Banzai</option>
    <option value＝"Tommy">Perfect Tommy</option>
    <option value＝"Penny">Penny Priddy</option>
</select>

其他（并不是所有浏览器都支持）

数字输入

//限制只能输入数字
<input type="number" min＝"0" max="20" />

这里写图片描述

范围输入

//类似于数字输入，但是它会显示一个滚动条
<input type="range" min＝"0" max="20" step＝"5" />

这里写图片描述

颜色输入

//单击控件会出现颜色选择器
<input type="color" name="1" />

日期输入

//单击控件会出现日期选择器
<input type="date" name="1" />

emai、url、tel、password输入

<input type="email" name="1" />
<input type="url" name="2" />
<input type="tel" name="3" />
<input type="password" name="4" />//文本框的输入会被隐去

上传文件

//可以向服务器发送整个文件，此时Method必须用POST
<input type="file" name="file" />

元素分组fieldset和legend

<fieldset>//包围一组元素
    <legend>//为元素提供标签
        <input type="checkbox" name="spice">Salt<br>
        <input type="checkbox" name="spice">Pepper<br>
        <input type="checkbox" name="spice">Garlic<br>
    </legend>
</fieldset>

这里写图片描述

框架

<frameset>（框架集）已从HTML5中移除，但是<iframe>（内联框架）仍然存在

frameset和frame

<frameset rows="50,*"><!-- 将浏览器窗口垂直分为两部分，上面的高度为50像素，下面的占了剩余的高度-->
    <frame src="top.html" name="top" /> <!-- 每个frame指定应该链接到哪个文档-->
    <frame src="home.html" name="home" />
    <noframes>  <!--支持框架的浏览器会忽略noframes中的内容，类似于<noscripts>-->
      <body>    <!--一般可用于<body>中的标签不能用于<frameset>标签内-->
        <h1>Sample Framed Site</h1>
        Your brower dose not support frames.Sorry!
      </body>
    </noframes>
  </frameset>

<a href="home.html" target="home">Home</a><!--浏览器根据name属性来链接到目标框架-->

iframe
iframe 仍是HTML5的一部分，与图像类似，内联框架能够具有环绕其的文字，并且可以设置围绕内联框架的边框和页面空白。

<!--html代码-->
<body>
    <h1>Inline Frame Example</h1>
    <div>
      <iframe src="iframe.html" frameborder="1">
      <!--<iframe>与</iframe>之间是当浏览器不支持iframe时显示的信息-->
        <p>Uh oh.....your brower does not support iframe!</p> 
      </iframe>
    </div>
  </body>

<!--css代码-->
iframe {
    frameborder:"1";//0和1,0表示没有边框
}

内联框架常用于从其他网站中引入内容

Alagisme

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTML基础元素引用： <q>和<blockquote>标签如果想在一段中加上引用就用<q>，内联元素；如果想让引用自成一段则用<blockquote>，块元素。换行：<br />列表有序列表:<ol start="5"><li></li></ol>; 无序列表:<ul><li></li></ul>; 自定义列表:<dl> <dt> </dt> <dd> </dd>
复制链接

扫一扫