关于自学HTML+CSS+JS的日子

大一新生第一个寒假，对于专业的认识不是特别充足。

在某站上看见了前端开发，正好想起自己加了一个前端社团于是便开始了键盘敲烂的日子~

在学习的过程中，自己总结了一些笔记和想法。

学习前端的最开始就是对于标签的认识和使用。标签很多很复杂，对于每个标签不一定百分之百我都可以记住和使用，但是我会尽可能的记住和做好笔记。保证在用的时候知道去哪里查，对于自己的学习有个认识和理解。

HTML语言都在<>里，且绝大多数都是成对存在。

标签的关系包含或者并列

<！DOCTYBE html>使用的是html5版本

<html lang=“zh-CN”> 中文网页

特殊符号

空格符   小于号< 大于号 >

和& 人民币¥ 版权 ©

注册商标&reg,; 摄氏度° 正负号±

乘号× 除号÷ 平方2 (上标2)²

立方3 (上标3)³

标签

从属于<body>里

<p></p>段落标签 <h1-h6>标题标签

<br />强制换行 <strong></strong>或者<b></b>加粗标签

<em></em>或者<i></i>倾斜

<del></del>删除线 <ins></ins>下划线

<div></div>分割区间独占一行

<span></span>小区间，一行可以有很多个

加入图片的标签<img src=“图像URL”/> 单标签

解释:图片显示不出来则显示alt的内容鼠标放在图片上显示title的内容并且设置的长度和宽度 border显示边框

引入图片的方式:

1.同级文件夹直接<img src="图片名称+格式"/>

2.下级文件夹<img src="文件夹名称/图片名称+格式"/>

3.上级文件夹<img src="../图片名称+格式">

超链接:点击文字或者图片，跳转网页。

一.跳转为外部网址

1.<a href="http://网址" target="_self或者_blank">图片或者文字<a> self在本页面打开，blank打开新页面跳转。

二.跳转为内部地址 <a href=”XX.html”>文字或者图片</a>

三.空跳转<a href=”#”></a>

四.如果跳转地址是一个文件，则会下载文件。

五.跳转到本页面的任何位置则:<a href=”#id”></a> <h3 id=”XX”></h3>

单元格

表格的基本语法:

Table表示单元格 tr表示单元格的一行 td表示一行中的数据 <th></th>表头单元格加粗显示

如下所示:

<table>

</table>

为了使结构清晰可以采用

表格头部<thead></thead> 且内部必须要有<tr>一行

表格内容<tbody></tbody>

表格的属性:

align 可以选择 left center right 表示对齐方式
border 可以选择 1或者”” 1表示有边框 “”表示无边框
cellpadding 像素值单元边沿和内容的宽度
cellspacing 像素值单元格之前的空白
width 像素值或者百分比表格的宽度

合并单元格

合并方式:

1.跨行合并 <td rowspan=“合并个数”>

2.跨列合并 <col rowspan=“合并个数”>

目标单元格:

跨行合并最上侧写合并代码跨列合并最左侧写合并代码

合并单元格三部曲:

先确定合并方式
找到目标单元格
删除多余单元格

无序列表

使用代码

<ul>

</ul>

有序列表(会在每个选项中自动排序)

<ol>

</ol>

自定义列表

<dl></dl>用于定义列表 <dt></dt>表示定义项目/名字 <dd>定义解释</dd>

表单（获取用户数据）

表单组成:表单域，表单控件，提示信息。

表单域:可以吧用户信息提交给服务器

表单域使用代码:<form></form>

表单控件:

选择内容<input type=“”>

补充:

额外补充:

<label for=”ID”>男</label> <input type=”text” id=”ID”>

用户点击男时，会自动聚焦点击按钮

下拉元素

语法:

<select>

<option>选择1</option>

<option>选择2</option>

<option>选择3</option>

</select>

文本域元素

每日总结：<textarea>总结内容</textarea>

简单来说就是给用户一个文本框，让用户输入较长的文本内容。

关于自学HTML+CSS+JS的日子相关推荐

FF05期末作业成品代码——美食汇-美食菜谱(5页) HTML+CSS+JS网页设计期末课程大作业
HTML5期末大作业:美食网站设计--美食汇-美食菜谱(5页) HTML+CSS+JS网页设计期末课程大作业作品介绍 1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载, ...
tp view html 引用css,TP5.1：将外部资源引入到框架中（css/js/font文件）
为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...
html页面整体变灰,CSS + JS 网站变灰（变黑白），兼容所有浏览器。
有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10.11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一 ...
【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty\j ...
html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
css/js压缩工具
css/js压缩工具 http://ajaxmin.codeplex.com/
html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...

关于自学HTML+CSS+JS的日子

关于自学HTML+CSS+JS的日子相关推荐

最新文章

热门文章