程序猿小白學習歷程

从现在开始记录我的学习点滴----通常使用的一些标签的用途

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

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

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

<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 属性小结：
1、写在开始标签中
2、可以为标签添加额外的功能和信息

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

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

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

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

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

当要连接的网页在相同的服务器时，通常会使用相对路径

当想要连接到其他网站/服务器的时候，总是使用绝对的路径

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

20180701
在页面中添加一个表单
在主内容区域添加，如何添加呢
1、先添加一个form标签
1-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标签的默认值
我们一般不需要默认值所以不用添加.

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

3、添加一组单选按钮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">
给表格定义样式
1、宽度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發現其實我們
所犯的錯誤都是一些很小很簡單的小問題！

posted on 2018-07-01 23:38 以夢爲馬阅读(149) 评论(0) 收藏举报

刷新页面返回顶部

以夢爲馬

程序猿小白學習歷程

导航

公告