前端学习笔记

老鹏ｸﾞｯ!(๑•̀ㅂ•́)و✧

于 2021-11-03 22:34:36 发布

阅读量534

点赞数

分类专栏：笔记文章标签：前端 html

本文链接：https://blog.csdn.net/qq_47004770/article/details/121132410

版权

笔记专栏收录该内容

51 篇文章 0 订阅

订阅专栏

——————————————————前端开发（HTML部分）

P10: head, title, base, meta, SEO:

head标签：

（1）base，link， script ，style ，title，meta可以用于head部分；

（2）base：为页面上的所有链接规定的默认地址或目标；

（3）href ：规定页面中所有相对链接的基准URL；

（4）target：在何处打开链接，包含（_blank _parent _self _top _framename（框架名称））

（5）title：网页的名字；

例如：

其他标签：
（1）link：定义文档和外部资源的关系。（如：引入）

（2）style：定义“内嵌样式”

（3）script 引入外部脚本,或定义内嵌脚本等

（4） metal 提供页面相关的元信息( meta — information ),标签位于文档的头部,不包含任何内容

（4）——1：content 定义与 http — equiv 或 name 属性相关的元信息

（4）——2：http - equiv 把 content 属性关联到 HTTP 头部( content - type , expires , refresh , set - cookie )

如:< meta http - equiv =" Refresh ＂ content ="5; url = http 😕/ www . icketang . com ＂>

（4）——3：name 把 content 属性关联到一个名称( author , description , keywords ( SEO 优化)等)

P11: 字符集：
（1）国外网站，使用UTF-8。有大量中文，要求网页加速快，使用gb2312/GBK;

P12:body, 标签嵌套：

1.HTML标签分类：
（1）容器级标签：h1-h6 ； pre ; div。。。。

（2）文本级标签：p ; code ; span。。。。

注意：一般是容器标签嵌套文本标签。

P13：标题和段落：
（1）h1-h6标签 : 默认加粗；具有换行符；字体逐渐变小。(注意：不要使用”h1-h6标签“进行嵌套处理！！！)

（2）P标签：<1>p标签可以嵌套在块级元素内；<2> 但是p标签不可以嵌套其他块级元素（如：div, p , h系列）

P14：路径:

1.img标签：

（1）单标签；

（2）属性：

（2）——1：srcl 添加资源文件的路径

（2）——2： alt 图片加载失败后的文本提示

（2）——3：title 文本提示信息(鼠标悬停)

（2）——4：width 设置图片的宽度

（2）——5：height 设置图片的高度

（2）——6： border 设置图片的边框厚度(默认黑色实线,且不可修改)

P15:超链接和锚点链接

1.a标签：可以实现超链接，进行页面跳转。

2.a 标签是一个双标签,有开始标记和结束标记< a href ="#">点我跳转</ a >（注意：”#号—>打开当前页面“）

3.属性:
（1） href 设置超链接的地址#代表链接到当前页面

（2） title 文本提示信息

（3） rell 规定当前文档与被链接文档之间的关系

（4） download 规定被下载的超链接目标

（5） media 规定被链接文档是为何种媒介/设备优化的。

（6） type 规定被链接文档的的 MIME 类型。

4.target属性：
（1）_ self 当前页面中打开新的页面(新页面覆盖当前页面)

（2） blank 在新的页面中打开(会创建一个新的窗口来打开新页面)

（3）- parent 页面的父窗口或父框架中打开

（4）_ top 将页面在整个浏览器窗口打开

（5） framename 在指定的框架中打开页面

5.锚点：

（1）锚点的设置：给标签设置 name 或 id 属性；通过另外一个 a 标签 href 属性去链接这个锚点；可以链接到当前页面中的指定位置,还可以链接到其他页面的指定部分。

代码示例1：

//Demon_1.html文件：(此处代码其他部分就简化了！！！)
		<h1 id="top">顶部</h1>

        <p>1新闻消息</p>
        <p>2新闻消息</p>
        <p>3新闻消息</p>
        <p>4新闻消息</p>
  		<p>1新闻消息</p>
        <p>2新闻消息</p>
        <p>3新闻消息</p>
        <p>4新闻消息</p>
		<p>1新闻消息</p>
        <p>2新闻消息</p>
        <p>3新闻消息</p>
        <p>4新闻消息</p>
        <p>1新闻消息</p>
        <p>2新闻消息</p>
        <p>3新闻消息</p>
        <p>4新闻消息</p>
        
        <a href="#top">返回顶部</a>

代码示例1：

//Demon_2.html文件：(此处代码其他部分就简化了！！！)
		<a href="../pages/01 锚点.html#middle">新闻消息界面</a>
		
       

//01 锚点.html文件：
新闻消息新闻消息新闻消息</p>
<p>11新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>12新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>13新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>14新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>15新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>16新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>17新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>18新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>19新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p id="middle">20新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>21新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>22新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>23新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息</p>
<p>24新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新闻消息新

P18：无序列表：

无序列表: 给文本添加无序的列表语义。项与项之间没有顺序的先后之分(没有先后顺序)。
ul ：定义无序列表；li ：列表项。
ul 里可以嵌套一个或者多个li 标签,但 ul 里面只能放 li 标签,不能放其他内容。
ul 和 li 这两个标签必须同时出现,不能单独书写。
li 标签是一个典型的容器级标签,可以放置任何的内容标签。甚至可以放置子级 ul 与 li 。
type 属性修改: disc 默认实心圆 circle 空心圆 square 实心方块

P19：有序列表：

有序列表: 给文本添加有序列表的语义。
ol :定义有序列表；li：列表项。
ol 和 li 也是一组标签,必须同时出现。
ol 里只能嵌套 li 标签。 li 不能脱离 ol 自己出现。 ol 里可以嵌套多个 li 标签。
li 是一个容器级标签,里面可以放置任何内容,甚至 ol 、 ul 。
有序列表属性 ol 元素属性：

（1） type 属性设置有序列表的项目符号：

	<1>.A 大写英文字母 
	<2>.a 小写英文字母 
	<3>.1阿拉伯数字
	<4>.1大写罗马数字 
	<5>.i 小写的罗马数字

（2）start 设置列表符号从第几个开始排列,属性值只能是阿拉伯数字。

（3）reversed 设置有序列表项目符号的倒序(html5新增)，这是一个布尔型的属性,关于这类型的属性有两种写法：reversed 或 reversed =“ reversed ”

注: ul 、 ol 项目符号不能互相使用;但是标签可以使用它们任何一个

（2）

p20：定义列表：

无序列表：列表给我们的文本添加定义列表语义。
dl：定义列表；dt：定义标题；dd：定义描述。
dl 里面嵌套了 dt 和 dd。
dl 里面只能放置 dt 、 dd 。
dl 里面可以放置多组的 dt 和 dd 。
dt 和 dd 是同一级的标签。
dt 后面的 dd 可以有多个。
dt 后面可以没有 dd ,表示没有解释说明。
dt 和 dd 都是容器级标签,里面的内容是不限制的。
dd 是对 dt 的解释、说明、定义。

P21.表格：
1.table 标签属性:
（1） border 设置表格的边框

（2）bordercolor 设置边框的颜色

（3）height 、 width 设置表格的宽高

（4）align 设置表格的整体水平对齐方式 center 居中 left 默认居左 right 居右

（5） celspacing 设置边框与边框之间的距离

（6）celpadding 设置内容与边框之间的距离

（7） background 设置表格的背景图片

（8）bgcolor 设置表格的背景颜色

（9）summary 表格隐藏信息,用来提高 SEO

2.tr, th, td标签：
tr :行语义,一对 table 标签中有几对 tr 标签,就代表这个表格中有多少行。

td ( th ):单元格语义,一对 tr 标签中有几对 td ( th )标签,就代表当前行有多少个单元格。

th 中的文本具有默认加粗,居中的效果。

属性如下:

（1）align 设置的当前行单元格中文本的水平对齐方式 left right center

（2）bgcolor 、 background 设置背景颜色和背景图片

3.合并表格：（tr, td标签）
（1）rowspan：跨行合并。
（2）colspan：跨列合并。
（3）属性值：是多少就合并多少。

P22.划分区域：

（1）caption：表格标题。

注意：设置标题
表格标题的添加方式:
1.使用标题标签h1—h6

2.使用表格自带的标题标签 caption（caption 标签必须写在 table 开始标签的后面）

3.标准中规定,一个表格只能添加一对 caption 标签,也就是只能有一个标题;多个 caption 存在的时候，浏览器存在兼容性问题: IE 和 Chrome 能全部显示,火狐只能识别第一个注:表格中一些固定的嵌套。

4.注意：表格中一些固定的嵌套：
table 一般嵌套 tr , tr 中嵌套 td。
只有 td 或 th 可以像 div 那样,作为容器嵌套任何。

（2）thead：表头。

（3）tbody：主体部分。

P22:多行文本框和label
1.form 标签：
表单用来收集用户数据,并将其提交到对应的地址。
（1）form :是表单的语义化标签,属性如下
name ：定义表单的名称

action ：设置数据提交的地址

method ：设置数据提交的方式,如: GET 提交, POST 提交。

target：页面打开方式,如_ self ,_ blank ,_ parent ,_ top , framename
（2）表单中的控件: textarea 文本域 select 下拉列表 input 输入框 button 按钮.

2.textarea 与 label 标签：
（1） textarea 多行文本域,又可以叫做多行文本输入框,属性如下:

rows：设置行高,属性值是数字

cols：设置列宽,属性值是数字

label 标签为表单控件( textarea , input )定义标注

（2）for 规定 label 绑定到哪个表单控件( id )。
我们还可以将表单控件写在 label 元素内,实现联动。

P23：下拉框：
1.3.select 标签：
（1） select 标签可以创建单选或多选菜单,属性:

multiple 设置多选；

size 设置显示在页面上的列表的项数；

option 标签用来定义下拉列表中的一个选项(一个条目),属性:
selected 设置默认被选中的列表项(布尔型属性)；

注意:内容只能是文本,不能出现标签；

optgroup 标签定义选项组；

label 为选项组规定描述；

（2）代码：

  <form action="">

        <label>邮箱：</label>
        <select id="email" size="5">

                <option value="">@1777eee.com</option>
                <option value="">@1777ddff.com</option>
                <option value="">@177dd.com</option>
                <option value="">@177s.com</option>
            
                <optgroup label="弹出选项：">	//分组
                   
                    <option >111111111111111</option>
                    <option >222222222222222</option>
                    <option >333333333333333</option>
                    <option >444444444444444</option>

                </optgroup>
        </select>

    </form>

P24：Button和input：

(1)input标签：
请添加图片描述
(2)input标签属性值：

（3）Button标签：

（4）button和input之间比较：
在这里插入图片描述
P25：通用属性：

P26：其他标签：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <pre>
       wp

       www

       wwww
   </pre>

   <iframe src="https://www.baidu.com" framborder="10" width="600" height="600"></iframe>


</body>
</html>

P27：字符实体和代码规范：
（1）字符实体：
请添加图片描述
（2）代码规范：

老鹏ｸﾞｯ!(๑•̀ㅂ•́)و✧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记

——————————————————前端开发（HTML部分）P10: head, title, base, meta, SEO:head标签：（1）, , （2）base：为页面上的所有链接规定的默认地址或目标；（3）href ：规定页面中所有相对链接的基准URL；（4）target：在何处打开链接，包含（_blank _parent _self _top _framename（框架名称））（5）title：网页的名字；例如：其他标签：（1）link：定义文档和外部资源的关系。
复制链接

扫一扫

专栏目录