前端基础学习总结
html归根到底就是一堆标签的集合从而构成网页的基本框架，但是只有html是远远不够的（因为做出来的贼丑）所以需要css进行页面的渲染
html的基础知识
html的标签书写的两种形式
– a. 自闭合标签：<标签名 />
– b. 非自闭合标签：<标签名></标签名>
对文本标签的学习
锚点的学习
A. 对文本处理的标签
- h1,h2,h3,h4,h5,h6
特点：从h1->h6 字体依次变小，字体颜色依次变浅。且会自动换行 - 换行标签
<br/>文本处理时可能需要换行 就是用它 - 字体下滑线标签
<u></u> - 字体倾斜标签
<i></i> - 字体加粗标签
<b></b>不过一般使用css 的font-weight - 段落的标签
<p></p> - 空格字符
在进行段落处理时 首行没缩进 用空格代替
 （跟着我念 牛逼视频）哈哈（是不是很形象）
B. 输入文本的标签
- input标签
注：<input type="text" value=""></input>type的标签是text时才是输入文本的文本框,不过缺陷的是输入的文本只会显示一行，因此适用于简短的文本输入 - textarea标签
<textarea></textarea>不过要用style进行渲染下输入框的大小
C.图片的插入
img标签
书写格式<img src="照片的路径" width="200px height="200px" title="照片停留时显示的文字" alt="假如路径出现问题时显示的文字"></img>
D.列表的引入
先看一个例子理解下什么是列表
- first
- second
- third
上面就是一个列表(我直接用代码写的就显示上面的结果 可以看出markdown支持html部分语言)
代码如下<ul><li>first</li><li>second</li><li>third</li></ul>
如果要显示有序列表
- first
- second
- third
代码如下<ol type><li>first</li><li>second</li><li>third</li></ol>
type可以有 a,A,1,I进行显示
如果想自定义标签的话
- 下面是我的标签
- first
- second
代码如下<dl><dt>下面是我的标签</dt><dd>first</dd><dd>second</dd></dl>
E. 单选按钮
先看例子
学生
老师
属性介绍
name：当name值一样的时候只能选择一个按钮
value：是存放后台数据的标签 以便找寻对应的数据
identify=0 后台会根据0找到0对应的数据
checked 是默认的选项 上述代码默认是选择学生
F. 多选按钮
标签
代码如下；<select name="address"><option value="">--请选择--</option><option value ="0" selected="selected">中国</option><option value ="1">美国</option><option value ="2">英国</option><option value ="3">日本</option></select>
G .form表格的学习
类似于excel的表格
-
table标签
属性：- border ：修饰边框 默认颜色为黑色 可以通过 bordercolor 设置边框的颜色
- cellpadding 设置文字内容与内边框的距离
- cellspacing 设置内边框与外边框的距离
-
tr2>th4 使用tab键快速生成代码
效果：
代码如下
<table border="1px" cellspacing="1 px" cellpadding="4px" bordercolor="red">
<tr height="35px">//可以设置单元格的高度
<th width="100px">姓名</th> //也可以使用css对标签进行处理 因为这样写的话对每个标签都要写 宽度和高度
<th>性格</th><!--th加黑居中-->
<th>爱好</th>
<th>颜值</th>
<th>看书</th>
</tr>
<tr align="center">
<td>girlgod</td>
<td>豪爽</td>
<td>吃</td>
<td>高</td>
<td>java</td>
</tr>
</table>
当然这样肯定是不够的的 我们在word中会经常有的动作就是合并单元格table当然可以进行这样的动作
横向合并属性 colspan 从当前位置开始向右进行合并单元格 记得合并几个就要在所在的tr标签相应的删除几个td标签
纵向合并标签 roespan 从当前位置开始向下进行合并单元格 ，记得合并多少个单元格就在向下的几个tr标签内删除一个td标签
~掌握了这个就可以做网页版的个人简历了
~在做的过程中一样大小的宽度 对于不同的table来说可能有部分误差
H .超链接的学习
标签 <a href="url（或者本地资源路径的html）">我是一个链接</a>
例子
百度
上面的链接就是用以下代码写的<a href="http://www.baidu.com" target="_blank">百度</a>
target属性：
_blank 在新的标签页显示
_parent 在父级页面显示
_self 在当前页面显示
_top 在顶层页面显示target本意是目标的意思 那么当然可以指定他到name指定的位置进行操作
即将当前链接显示的内容放在 name指定的位置显示 这个需要借助frame进行操作
大概形象以下就是现在的网页中有一部分就是将当前网页的连接内容显示信息在当前网页的某个位置
I.锚点的学习
所谓的锚点就是 抛一个锚 然后到达指定的位置
经常在读小说的时候，会经常用到锚点点击目录第几章，进而跳转到具体的页数
<a href="#名字">介绍</a>
在指定的位置加上
<a name="名字"></a>
这样就可以通过点击介绍 进而跳转到指定位置
上一篇： 多继承的构造函数和析构函数