大一新生第一个寒假,对于专业的认识不是特别充足。
在某站上看见了前端开发,正好想起自己加了一个前端社团于是便开始了键盘敲烂的日子~
在学习的过程中,自己总结了一些笔记和想法。
学习前端的最开始就是对于标签的认识和使用。标签很多很复杂,对于每个标签不一定百分之百我都可以记住和使用,但是我会尽可能的记住和做好笔记。保证在用的时候知道去哪里查,对于自己的学习有个认识和理解。
HTML语言都在<>里,且绝大多数都是成对存在。
标签的关系 包含或者并列
<!DOCTYBE html>使用的是html5版本
<html lang=“zh-CN”> 中文网页
<meta charset = “UTF-8”> 万国符,防止出现乱码 属于<head>标签里
特殊符号
空格符 小于号< 大于号 >
和& 人民币¥ 版权 ©
注册商标®,; 摄氏度° 正负号±
乘号× 除号÷ 平方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”/> 单标签
<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>
表格的属性:
- align 可以选择 left center right 表示对齐方式
- border 可以选择 1或者”” 1表示有边框 “”表示无边框
- cellpadding 像素值 单元边沿和内容的宽度
- cellspacing 像素值 单元格之前的空白
- width 像素值或者百分比 表格的宽度
合并单元格
合并方式:
1.跨行合并 <td rowspan=“合并个数”>
2.跨列合并 <col rowspan=“合并个数”>
目标单元格:
跨行合并 最上侧写合并代码 跨列合并 最左侧写合并代码
合并单元格三部曲:
- 先确定合并方式
- 找到目标单元格
- 删除多余单元格
无序列表
使用代码
<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>
简单来说就是给用户一个文本框,让用户输入较长的文本内容。