分类
学习笔记

H5、CSS&JS

写于大二暑假实习前突击复习,师承b站Pink老师

web标准的构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

结构:结构用于对网页元素进行整理和分类,现阶段主要是HTML

表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS

行为:行为是指网页模型的定义及交互的编写,现阶段主要学的是JavaScript

标签

  1. 单标签与双标签

例:单标签<br /> 双标签<html></html>

  1. 标签关系

包含关系 例:

<head>
      <title></title>
</head>

并列关系 例:

<head></head>
<body></body>

常用标签

1.
<h1>--<h6>标题标签</h1>--</h6>
文字加粗一行显
由大到小依次减

`2.
<p>段落标签</p>

3.
<br />换行标签

4.
<strong>加粗</strong>或<b></b>
<em>倾斜</em>或<i></i>
<del>删除线</del>或<s></s>
<ins>下划线</ins>或<u></u>

5.
盒子标签,<div></div>与<span></span>皆无语义,div单独占一行(大盒子),span可跨行(小盒子)

6.
图像标签,<img src="图像URL" />
属性:
src      图片路径     必须属性
alt      文本         替换文本,图像不能显示时出现文字
title    文本         提示文本,鼠标放到图片上显示的文字
width    像素         设置图像的宽度
height   像素         设置图像的高度
border   像素         设置图像的边框粗细

7.
超链接标签,<a href="目标链接"></a>
属性:
href   用于指定链接目标的URL地址
target   用于指定链接页面打开方式,默认为_self,_blank为在新窗口中打开
锚点链接 例:
<a herf="#名字">moonmy</a>
<h4 id="名字">moonmy</h4>

注释与特殊字符

<!--注释语句--> 快捷键 Ctrl+/
特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
¥RMB&yen;
©版权&copy;
®注册商标&reg;
摄氏度&deg;
±正负号&plusm;
乘号&times;
÷除号&divide;
²平方2(上标2)&sup2;
³立方3(上标3)&sup3

表格标签

<table></table>用于定义表格标签
<tr></tr>用于定义表格中的行
<td></td>用于定义表格中的单元格
(三者依次嵌套)
<th></th>表头单元标签,居中加粗
<thead></thead>表格头部区域
<tbody></tbody>表格主体区域
合并单元格:
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
目标单元格:
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码
合并步骤:
①确定何种合并方式
②找到目标单元格写上合并代码
③删除多余单元格
属性名属性值描述
alignleft、center、right表格相对周围元素对齐方式
border1 or “”是否有边框
cellpadding像素值边沿与内容之间空白,默认1像素
cellspacing像素值单元格之间空白,默认2像素
width像素值或百分比规定表格宽度
css内容

列表标签

无序列表:
<ul></ul>一般以项目符号呈现列表项
<li></li>一般列表项定义
注:各个列表无顺序等级之分为并列的;<ul>中只允许嵌套<li>,其他标签可以放入<li>

有序列表:
<ol></ol>有排列顺序之分,列表以数字来显示
(其余同无序列表)

发表评论