程序猿小白學習歷程

时间 2019-11-08

标签程序繁體版

原文原文链接

从如今开始记录个人学习点滴----一般使用的一些标签的用途css

<h1></h1>--<h6></h6>:（heading tap）标题标签，字体由大到小html

<p></p>: (paragraph tap) 段落标签浏览器

<ul></ul>: (unordered list) 无序列表标签
<ol>: (order list) 有序列表标签
<li>: (item list) 列表项标签，是<ul>和<ol>的字标签
例如：
<ul>
<li></li>
</ul>服务器

<ol>
<li></li>
</ol>post

<body> 标签：把全部显示在网页中的内容放入<body>标签
<head> 标签：网页中不可见部分放入<head>标签中，这些代码不会如今浏览器中，
会写一些其余有用的内容，好比CSS或JavaScript

导入项乱码的解决：GBK 中文编码 UTF-8 国际编码全球通用通常使用这个学习

编写代码的快捷方式：
<ol>下面有3个<li>字标签输入ol>li*3 按Tab 键生成字体

HTML超连接: URL
URL:包括协议, 服务器, 被请求的文件;
http://deu.51cto.com/smillin.html/
协议服务器文件路径大数据

如何制造超连接？
a 标签：写在<a></a>之间的部分，就是网页中可点击的超连接网站

HTML属性（HTML attribute）: href;
<a href="http://......html">免责声明</a>
由属性名等号属性的值三部分组成编码

若是想让超连接中的文字被点击的时候，那个页面就被打开
那么使用 href 属性
href 是 hypertext reference的缩写，是超文本引用的意思

href 属性的值必须写在双引号之间，如"属性的值"

HTML 属性小结：
一、写在开始标签中
二、能够为标签添加额外的功能和信息

target 属性：当超连接被点击的时候，新页面（href所指向的页面）将在什么地方被打开

target 属性有两个值：
一个是 _blank:在浏览器的新标签或新窗口中打开页面。
另外一个是 _self: 在当前窗口中打开页面，替换原来的页面。

绝对路径老是向一个特定的服务器上文件发送请求。
<a href="http://example.com/leag.html">
绝对路径老是包含协议和服务器

相对路径不指定特定的服务器
<a href="legal.html" target="_blank">
相对路径不包含协议和服务器

注意：若是不包含协议/服务器,浏览器会假设协议和服务器与发出请求的页面相同
写的时候须注意：标签名与标签名之间要有空格，属性与属性之间也要有空格

当要链接的网页在相同的服务器时，一般会使用相对路径

当想要链接到其余网站/服务器的时候，老是使用绝对的路径

上一级同目录格式： ../
上一级不一样目录格式：../目录名称

20180701
在页面中添加一个表单
在主内容区域添加，如何添加呢
一、先添加一个form标签
1-一、而后添加第一个文本框text，放在label标签里,文本框使用Input 添加，input 标签的一个type属性,type的值文本框text;
1-2同时把label和input关联上，那么咱们给input标签起一个id 属性值等于“recipes-name”，这个名字是能够随意起的，可是
要保证这个id 和 label 标签的 for 属性值要一致.
1-3若是你在 input 的标签中加入一个 value 属性随便定义他的值，value="美食“，那么这个美食就是这个input标签的默认值
咱们通常不须要默认值因此不用添加.

二、添加一个上传控件file,也是用label 和 input 属性，一样用id和for 把label和input关联起来.
2-1用<br>能够把食品名称和上传成品图换行

三、添加一组单选按钮radio 叫美食类型,一样用 label和 input，（道理同上）,单选按钮的值是 radio，第一个类型是原创
第二个类型是转载；
3-1 设置让两个类型按钮造成一个互斥的现象：分别给他们加一个name属性，也就是给他们去一个名字type，name=“type”，
name 属性相同让他们成为一体；
3-2 接下来让原创/转载与它们前面的按钮关联起来：因此为他们添加 id 和 for 属性;
注意：在同一个页面中不能有id的属性值相同哦，因此能够分别设置id为type-a 和 type-b
3-3 假设在页面加载的时候默认被选中原创或转载，那应该怎么作呢？
答案是能够在原创/转载前面的单选按钮添加一个 checked 便可，例如：
<input type="radio" name=“type” id="type-a" checked><label for="type-a">原创</label></input>

4：接下来添加一个下拉列表select，显示这道菜或这个美食适合的人数，下拉列表使用 select标签,
4-1须要用option标签为下拉列表select添加选项
4-2让默认加载的时候页面显示2人怎么操做：直接在2人的option标签中加入一个 selected,页面加载就会默认为被选中2人

5：接下来为表单添加两个文本区域label：显示材料和制做过程,多行文本使用 textarea;
5-1 一样用 for 属性和 id 属性将它们关联起来；而后添加换行 <br>
5-2 设置不容许用户改变文本大小，为textarea 标签添加一个 CSS 属性，在通用样式添加禁用页面中全部的textarea标签
拖动的特性：resize:none;

6为页面添加一个复选框 checkbox；一样用for 和 id 把他们关联起来
6-1 若是想要页面加载的时候复选框默认为被选中的，为复选框添加一个属性checked

7 为表单添加提交和重置按钮，提交按钮的type属性值是 submit,重置按钮的属性值是 reset
同时submit 和 reset 这两个按钮有个默认的文本标签叫提交和重置；
能够给input 标签添加一个value属性来重置按钮的文本值

8：submit是如何工做的
8-1先找到form标签，为他添加一个 action 属性， action 须要添加一个url地址，这个地址是服务器上处理这个的表单
数据的一个服务器脚本，先创建简单文件进行操做success.html（标题表单提交成功的信息）
8-2表单中广大数据是如何被浏览器打包的：
浏览器打包表单数据有两种方式：第一种方式是默认方式get，method="get";另一个是 post
8-3若是浏览器想要打包页面中的数据，那咱们就要给这个表单控件起一个名字，也就是 name 属性，一般状况下为了方便记忆，
name 的属性值会设置跟id的属性值一致name="recipe-name"
8-4 如何让浏览器分别出打包的数据是原创仍是转载？
能够分别为单选按钮添加一个属性 value ，例如第一个单选按钮的值为 1，第二个为2：value="1"
由于 get属性的方法缺点比较多，好比泄露信息、密码等，所以在form中方法的属性还有 post 属性
把 form 中方法改成 post，你会发现url地址栏中没有被浏览器打包的信息了，因此通常状况下表单的形式通常以 post提交
并且含有多行文本区域的时候，那必定要用 post 方式，由于get 的方式没有办法追加这么多的信息。

9处理提交和重置按钮以外还有一个普通按钮，他的type等于 button，也能够给他一个value值，显示在按钮上面，这个
按钮做用不大，能够不设置，若是他想要工做的话，必需要有JAVAScript的帮助；
另外还有一个按钮叫 button按钮，他的优势是在<button ></button>指间能够任意写html代码，好比说图片 img，那么他
就会变成一个图片按钮

最后页面当中不用这两个按钮可把她删除

<form action="success.html" method="get">
<label for="recipe-name">食品名称</label>
<input type="text" id="recipe-name" name="recipe-name"></input><br>

<label for="photos">上传成平图</label>
<input type="file" id=“photos"></input><br>

<label>美食类型</label>
<input type="radio" name=“type” id="type-a" value="1"><label for="type-a">原创</label></input>
<input type="radio" name=“type” id="type-b" value="2"><label for="type-b">转载</label></input><br>

<label>人数</label>
<select>
<option>1人</option>
<option selected>2人</option>
<option>3人</option>
<option>多人</option>
</select><br>
<label for="ingradients">材料</label>
<textarea id="ingradients"></textarea><br>
<label for="derections">制做过程</label>
<textarea id="derections"></textarea><br>

<input type="checkbox" id="newsletter">
<label for="newsletter">订阅新闻邮件？</label><br>
</input>
<input type="submit" value=“发布”>
<input type="reaet" value=“从新填写”>
<input type="button" value=“普通按钮”>
<button>button按钮</button>

</form>

20180702
表格基本标签
要建立一个最简单的表格，至少须要哪三个标签：

table:表格标签

tr:表格行标签，table row 的简写

td:数据单元格标签，table data 的简写

利用这三个标签建立一个最简单的单元格
1-1首先要有 table 标签

1-2假如你的表格有两行，那么在table标签中建立两个 tr 标签

1-3假如每一行有三个单元格，那么就在每一个tr 标签中建立3个td标签

1-4而后在单元格里添加内容
1-5 为表格的标签添加一个 border 属性，border="1",这样表格就有边框了

2-1也能够用 th 标签表示表格头（table head 简写）代替 td 标签表示表格头，大多数浏览器会把表格头显示粗体居中的文本
固然不必定要把表格头th放在第一行，只要你想让一个单元格中的文字显示粗体居中就可使用 th 标签代替 td 标签

3-1带有标题的表格
可使用 caption 标签为表格添加一个标题

3-2caption：表格标题必须是 table 标签的字标签,默认状况下浏览器会把标题放在表格的上方

3-3若是你不喜欢标题的位置，可使用css从新指定他的位置，
为 caption 的属性指定 caption-size的值为 bottom,标题就会显示在表格的下方

4-1跨行的单元格
单元格跨越了上下两个行，能够用 rowspan属性指定表格中一个数据单元格占据多少行
rowspan 属性表示当前单元格要跨越的行数；

5-1 跨列单元格
colspan 属性表示当前单元格要跨越的列数；能够用 colspan 属性指定表格中的一个数据单元格占据多少列

CSS
.caption{
caption-size: bottom;
}

6-1一般不会用 border 属性来定义表格的边框，由于这个用法不是W3C所推荐的,通常使用CSS定义表格的边框等其它表格样式
6-2 若是你想增大单元格之间的间距可使用 border-spacing属性 border-spacing: 5px;
6-3 若是你想合并表格中的单元格你能够设置 border-collapse属性的值为 collapse ，border-collapse： collapse；
table{
border-spacing: 5px; 增大单元格之间的间距
border-collapse： collapse；合并表格中的单元格
border: 1px solid lightgray;
} 实线浅灰色
th, td{
padding: 3px;
border: thin dashed lightblue;
} 细虚线浅蓝色
th{
background-color: lightyellow;
} 浅黄色

制做表格
先给table标签订义一个name名例如 <table class="suggest">
给表格定义样式
一、宽度width100%;

2给全部td标签补白padding;

3给左侧全部td标签订义一个class属性例如<td class="td-label">,每一行的td标签都添加（除了按钮那个），而后给他们定义样式
宽度width 100px;
4全部文本显示在单元格右侧 text-align: right;

5给按钮的td 也定义一个name class="td-btn"
让按钮显示在单元格中间：text-align: center;

6给文本框定义样式 input
宽度width 500 补白padding7像素边框border 2像素粗线solid 颜色和标题颜色同样#79b1a3

7文本输入框指定样式
suggest input[type=text]
当 type 属性的值为text 指定只有文本输入框标签使用样式

8为文本区域标签订义样式
宽度width500 padding7 border2 solid #79b1a3

9为文本区域textarea定义不一样的高度，为了无分开要给他们添加class 属性区分开来,给他们定义不一样的高度
10可是若有这textarea有 id 的话，而且id的值不一样，因此在CSS选择器当中咱们也能够利用这个id来进行样式的定义，
这个叫作 id选择器，例如用id 定义样式，在CSS中这样写：#+id的值，例如id=“ingredients"时就写#ingredients{}
定义高度height 100，另外一个300像素

11未发布按钮和从新填写按钮定义新的样式，指定某一个的属性使用中括号[]的方式或使用它的类
方式1 .suggest input[type=submit], .suggest input[type=reset]{}
方法2 .suggest .td-btn input{}
这样就能够把submit按钮和rest按钮区分出来了
设置宽度width120像素字体大一些font-size20像素

注意！！！寫代碼的時候必定要細心！寫代碼的時候必定要細心！寫代碼的時候必定要細心！重要的事情説三遍！！！不要漏寫字母或符號，同時也不要重複寫；學會分析出現的問題，當你找到問題的缘由之後nihilistic發現其實我們所犯的錯誤都是一些很小很簡單的小問題！