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

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

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

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

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

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

标签的关系 包含或者并列  

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

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

<meta charset = “UTF-8”> 万国符,防止出现乱码  属于<head>标签里

特殊符号

空格符 &nbsp;     小于号&lt;      大于号 &gt;

和&amp;          人民币&yen;    版权 &copy;

注册商标&reg,;    摄氏度&deg;    正负号&plusmn;

乘号&times;       除号&divide;    平方2 (上标2)&sup2;

立方3 (上标3)&sup3;

标签

从属于<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”/> 单标签

<img src="myserious.jpg"alt="一个小狗头像"title="小狗"width="数字" height="数字" border="15"/>

解释:图片显示不出来则显示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>

       <tr><td></td></tr>

</table>

为了使结构清晰可以采用  

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

表格内容<tbody></tbody>

表格的属性:

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

合并单元格

合并方式:

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

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

目标单元格:

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

合并单元格三部曲:

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

                          无序列表                            

  使用代码

<ul>

<li> </li>

</ul>

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

<ol>

<li> </li>

</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>

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自动控制自己

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值