Web前端学习重点笔记

HeHolly

已于 2023-06-21 22:59:29 修改

阅读量386

点赞数 2

文章标签：前端学习笔记

于 2023-05-03 22:20:23 首次发布

本文链接：https://blog.csdn.net/m0_65484865/article/details/130298736

版权

第一章：Web前端开发技术综述

第二章：HTML基础

第三章：格式化文本与段落

标记：

标题字标记：<h1>大</h1>——<h6>小</h6>

字体标记：<font face=""></font>

水平线标记：<hr noshadow>

段落缩进标记：<blockquote></blockquote>默认5个字符位置

拼音标记：<ruby>何<rp>(</rp><rt>he</rt><rp>)</ruby>

原样显示标记：<pre></pre>

特殊符号：

显示结果	说明	符号代码
	空格
>	大于号	>
<	小于号	<
&	&符号	&
"	双引号	"
©	版权	©
®	注册商标	®
'	单引号	'

文本修饰标记：

标记	说明
<b></b>	加粗
<i></i>	倾斜
<del></del>	删除线
<u></u>	下划线
<sup></sup>	上标
<sub></sub>	下标
<strong></strong>	加粗
<em></em>	倾斜
<smell></smell>	变小字号
<big></big>	变大字号

第四章：列表

有序列表<ol>……</ol>

type="1(默认)|A|a|i|I"

无序列表<ul>……</ul>

type="disc(默认)|circle|square"

定义列表<dl>……</dl>

基本语法：

<dl>
<dt>项目1
<dd>描述1</dd>
<dd>描述2</dd>
</dt>
<dt>项目2
</dt>
</dl>

菜单列表<menu>……</menu>

目录列表<dir>……</dir>

列表可以嵌套，但不能交叉嵌套。

在创建列表时，li标记的结束标记可以省略。

第五章：超链接与浮动列表

第六章：图像与多媒体文件

第七章：CSS基础

第八章：DIV与SPAN

第九章：CSS样式基础

第十章：DIV+CSS页面布局

padding复合写法：上右下左

第十一章：表格

表格基本属性语法：

<table width="" height="" border="" bordercolor="" align="" frame="" rules="">
<caption>表格标题</caption>
<tr></tr>
    <th></th>
    <td></td>
    <td></td>
<tr></tr>
</table>

语法说明：

bordercolor：边框颜色（rgb函数、16进制、英文名称）

bordercolorlight设置表格左、上边框颜色（亮边框）

bodercolordark设置表格右、下边框的颜色（暗边框）

bgcolor：表格背景颜色

background：背景图片

frame:外（above上、below下、hsides上下、vsides左右、void无、lhs左、rhs右、border所有）

rules:内（all所有、none无、rows行、cols列、groups介于行列间的边框）

cellspacing：单元格间间距，默认值为2px

cellpadding：单元格内容与单元格边框间距

表格行及单元格属性

align=“left|center|right”

valign=“top|middle|bottom”

rowspan：单元格跨行合并

colspan：单元格跨列合并

表格嵌套一般采用在td内嵌套表格

表格和单元格背景可同时指定，元素优先级：td>tr>table

第十二章：表单

基本语法：

<form method="post|get" action="">
/*action规定向何处发送表单数据*/
/*method默认为post*/
    <input type="text" name="">
    <input type="checkbox" checked="checked">
    <textarea name="" rows="" cols="" wrap="soft|hard" required="required">
    /*可见行列数*/
    /*文本区域*/
    </textarea>
    <select name="" size="" multiple>
       <optgroup lable="描述">
        <option value="" selected></option>
        <option value=""></option>
       </optgroup>
       /*规定该选项组描述*/
    </select>
    /*选择框*/
</form>

定义域和域标题

<form>
    <fieldest>
        <legend align="left|center|right">域标题</legent>
    </fieldest>
</form>

表单信息的输入类型：

重要属性

text：value（默认值）、readonly（文本框内容只读）

checkbox：checked（预选择）

botton|reset|submit：onclick（事件代码、弹出提示框）

textarea：wrap="soft|hard"（soft提交时不换行，hard换行）、required（是否为必须值）

select：size（下拉列表可见选项数）、multiple（可选多个选项）

option：selected（预选列表项）

第十三章：HTML5基础与CSS3应用

HTML5页面结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="Description" content="">
    <title>HTML5结构标记</title>
</head>
<body>
    <header>
        <nav></nav>//导航
    </header>//页眉
    <article>
        <section></section>
    </article>//内容
    <aside>
    </aside>
    <footer>
    </footer>//页脚
</body>
</html>