前端学习笔记

最新推荐文章于 2024-04-25 22:53:37 发布

命运的羁绊

最新推荐文章于 2024-04-25 22:53:37 发布

阅读量597

点赞数 1

分类专栏： java 文章标签： java html css javascript

本文链接：https://blog.csdn.net/jdudneufnidjdh/article/details/118977399

版权

前端

HTML

<!-- 内容 -->
<!DOCTYPE html><!--DOCTYPE:告诉浏览器的规范-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta用来描述网站的一些信息，用来做SEO-->
    <meta charset="UTF-8">
    <meta name = "keywords" content="小康，小陈，纪念册">
    <meta name="description" content="小康与小陈的日常生活">

    <!--网站的标题-->
    <title>Title</title>
</head><!---->
<!--网页的主体-->
<body>

1 基本标签

<!--标题标签-->
<h1>
    奔赴
</h1>
<!--字体样式标签-->
<strong>粗体  </strong><br><!--换行标签放里面或者外面都行-->
<em>斜体</em>
<!--水平线标签-->
<hr/>
<!--段落标签-->
<p><!--写一个p，然后摁TAB键就自动生成-->
    转眼已走过了两年时光，<br/>
    <!--换行标签：单标签，换行标签字距比较小-->
    小陈丢掉了曾经的彷徨，<br/>
    时间滤不尽你我的过往，<br/>
    你也同我一起走向远方。<br/>
    <br/>
    记忆的车轮辗到我脸上，<br/>
    时光又来到了卫光街旁，<br/>
    初次见你时的心中惶惶，<br/>
    化为异地时的念念不忘，<br/>
</p>
<!--特殊符号-->
&nbsp;<!--空格,其他符号可以&然后下拉选择-->

2 图像标签

<!--图像标签
src:图片地址，分为绝对地址和相对地址(推荐使用)
../代表上一级目录
alt:代表图片加载不出来时显示的信息-->
<img src="../resource/image/pt2019_12_19_13_50_07.jpg" alt="小陈和小康" title="C&K" width="300" height="300">

3 超链接标签

<!--超链接标签-->
<!--a标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪打开 _blank 在另一个页面中打开  _self 在自己的网页中打开（默认）-->
<a href="https://www.baidu.com">点击我跳转到那个页面</a>
<!--可以文字链接，也可以设置成图片超链接-->

<!--锚链接：实现页面间的跳转
1、需要一个锚标记-->
<a name="top">顶部标记</a>
<!--2、跳转到标记-->
<a href="#top">回到顶部</a>

<!--功能性链接
邮件链接：mailto
qq链接：在QQ推广里可以自动生成然后添加上-->

4 行内元素和块元素

块元素：h、p标签等

行内元素：a、strong、em

5 列表标签

分类：

有序列表：ol-li
无序列表：ul-li
自定义列表：dl-dt（列表名称）/dd（列表内容）——应用在网页底部

6 表格标签

创建表格：table border

行：tr

列：td

跨列：td colspan

跨行：td rowspan

7 媒体元素

视频元素：video（摁住tab键自动生成）

src：资源路径（通常用相对路径）

controls：控制视频播放

autoplay：自动播放

音频元素：audio（摁住tab键自动生成）

同视频元素

8 页面结构分析

header 头部

footer 脚部

section web页面中独立的区域

artcle 独立的文章内容

aside 相关应用或者内容（侧边栏）

nav 导航类辅助内容

9 iframe内联框架

有点像图片和媒体元素，可以调节宽度和高度

10 表单post和get提交（登录注册）

form标签
method：规定如何发送表单数据，常用值post和get，post方式提交安全，还可以传输大文件
action：表示向何处发送表单数据，表单提交的位置可以是网站，也可以是请求处理地址
texterea：文本域
- cols显示多少列
- rows显示多少行
select：
- 列表名称name
- 下拉选择option
- 默认选中的selected
input：type，所有属性都要加name
- 文本输入框text
- 密码框password
- 提交submit
- 重置reset
- 初始值value，可以给标签赋值
- 最大输入长度maxlength
- 文本框的长度size
- 单选框radio
- 多选框checkbox
- 按钮button
- 图片按钮image
- 默认选中checked
- 文件域file
- 邮件email
- 数字验证number，max最大值，min最小值，step每次加减的值
- 滑块range，max最大值，min最小值，提交时可以获取值
- 搜索框search
- 只读readonly
- 禁用disabled
- 隐藏hidden

11 增强鼠标可用性

点击文字可以锁定id，mark为锁定id的名字

<label for="mark">你点我试试</label>
<input type="text" id="mark">

表单初级验证

减轻后端压力和提高安全性

placeholder提示信息

required非空判断，不能为空

pattern正则表达式，要用的时候可以直接查找

CSS

Cascading Style Sheet、CSS选择器是重点。css文件放在head标签里头

<!--外部样式：通过link标签，实现内容和表现分离-->
<link rel="stylesheet" href="css/firstcss.css">
<body>
<h1>小陈与小康</h1>
</body>

h1{
   
    color: burlywood;
}

1 CSS的三种导入方式

优先级：就近原则，看谁离代码更近

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: bisque">小陈与小康</h1>

<!--内部样式：在head标签中写style的css代码-->
<style>
        h1{
    
            color: bisque;
        }
    </style>

2 CSS的三种选择器

选择页面上的某一个或某一类元素。不遵循就近原则，id选择器>类选择器>标签选择器

2.1 基本选择器

标签选择器

<!--会选择页面上所有这个标签的元素-->
<style>
        h1{
    
            color: bisque;
        }
    </style>

类选择器

<!--类选择器的格式， .class的名称{}
    优点：可以多个标签归类，可以复用-->
    <style>
        .k{
    
            color: aliceblue;
        }
        .p

最低0.47元/天解锁文章

命运的羁绊

关注

1
点赞
踩
2

收藏

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

前端HTML<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <meta name = "keywords" content="小康，小
复制链接

扫一扫