HTML学习笔记
登录
标签搜索
侧边栏壁纸
博主昵称
bai1hao

  • 累计撰写 19 篇文章
  • 累计收到 1 条评论
编程

HTML学习笔记

bai1hao
bai1hao
2024-07-21 / 0 评论 / 16 阅读 / 正在检测是否收录...

HTML NOTE

创建于2021.10.28

@标准

  1. 一定要以<!DOCTYPE>开头常用:<!DOCTYPE html>
  2. 一定要在<head>中指定正确的字符编码
  3. 一定要在<head>中写title元素
  4. 始终对图像使用alt属性
  5. 始终定义图像尺寸，可减少闪烁
  6. 为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。

无必要缩进:

<body>
  <h1>Famous Cities</1>
  <h2>Tokyo</h2>
  <p>lorem</p>
</body>

更好的格式:

<body>
<h1>Famous Cities</1>
<h2>Tokyo</h2>
<p></p>
</body>

@元素

  1. 使用小写标签。
  2. 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
  3. 某些 HTML 元素具有空内容（empty content)。<br/>
  4. 块元素-特立独行
    内联元素-随波逐流

@属性

  1. 使用小写属性。
  2. 始终加引号。
  3. 完整的标签参考手册。
    https://www.w3school.com.cn/tags/index.asp
  4. 所有连续的空格或空行都会被算作一个空格。

常用标签：

    <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.

  1. &lt;html&gt;在html中显示为<html>
  2. &amp;在html中显示为&
  3. &copy;显示为©（这玩意儿是版权符号）

@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">
    &copy
</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>
  1. table header cell 表头单元格(HTML中的th标签)
  2. table data cell 表格数据单元(HTML中的td标签)
  3. 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-width
2.max-device-width
3.显示方向[orientation, 横向(landscape)或纵向(portrait)]
4.max-width
5.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;
}

按浏览器默认的关键字设置字体大小，大多数默认为12px

p {
    font-size:150%;
}

该百分比是相对于其父元素的字体大小！

p {
    font-size:1.5em;
}

和百分比作用相同

建议：body使用关键字，内容使用百分比

@字体深浅(粗细)

常用值
粗体:bold
普通(去除父元素继承的属性):normal

font-weight:bold

注:
1.bolder,lighter大多数字体无变化
2.100-900(100的倍数) 支持的字体不多，大多数无变化

@字体样式(斜体等)

p {
    font-style:italic;
}

1.斜体(向右倾斜，部分浏览器还会有弯曲的衬线):italic
2.倾斜(字体向右倾斜):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十进制,然后再*16
2.取右边的c写出十进制:12
3.最后相加，即:12+12*16=12+192=204
eg.解析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;

样式

  1. solid 实线
  2. double 双实线
  3. groove 页面上的槽
  4. outset 外凸
  5. dotted 点线
  6. dashed 破折现
  7. inset 内凹
  8. 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.设置位置为左上

@id

eg.<h1 id="top">页首的标题</h1>
用css的id选择器可以使对应的内容特立独行

#top {
    /*这里面的属性只针对top，不会再针对其他内容*/
}

命名:id中不能有空格

@选择器

  1. id选择器 #+id
  2. 类选择器 .类名
  3. 子孙选择器 前两种后空格加子孙元素
  4. 属性选择器

a[target="_blank"] 选择满足括号条件的a元素
[title~="flower"] 选择title有flower的元素

eg. #elixirs h2
当

是id为elixirs的元素的子元素或孙元素时选择

eg. #elixirs>h2
只有当

是id为elixirs的元素的子元素时才选择

@简写

background

p {
    background-image: url(images/background.gif);
    background-repeat: no-repeat;
    background-position:top left;
}

简写:

background: url(images/background.gif) no-repeat;

margin

margin-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 3

1.每有一个id加1
2.每有一个类或伪类加1
3.每有一个元素名加1

eg.
h1.blueberry 得分 011
h1 得分 001

对于同一个元素(真正的同一个，而非同名)，分越高越特定，浏览器采用最特定的那个css

当规则冲突时

<h1 class="blueberry berry">

h1.blueberry
h1.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属性
默认值为static

  1. absolute(绝对定位)
  2. fixed(固定定位)
  3. relative(相对定位)
  4. 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参数可省略

0
html
版权属于： bai1hao
本文链接： https://bai1hao.top/index.php/archives/14/
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

评论

博主关闭了所有页面的评论