Day 3 (html,CSS)
1.id:不能重复,识别某个HTML文件上的元素,for对应id
<input type="radio" id="male" name="sex">
<label for="male">男性</label>
2.name：取得name的栏位取value值,；做为radio、checkbox的分组
3.value="aaa" => 预设value为aaa 如果 输入bbb送出的value会变成bbb
<form method="GET">
<label for="user">姓名：</label>
<input type="text" id="user" placeholder="阿哈哈" name="user" value="aaa"><br>
</form>
4.若只有GET,submit後会显示於网页上
<form method="GET">
5.action会送到该.PHP
<form method="GET" action="XXXX.PHP">
6.目前进度
-
一般标签：p span div br hr pre img a video h1-6
-
语意标签：header form article footer nav section em strong figure
-
有结构的：ul+li ol+li dl+dt+dd table+tr+td
-
表单：form => lable input select+optgroup+option datalist
-
HTML属性
type:
name:
id:
class:
width(table img):
height(table img):
for
value
style
src
controls
content
href -
CSS属性
width
color
text-align
background-image
vertical-align
7.把body的CSS路径 搬到 个别.css时 要注意图片路径,免得抓不到
<link rel="stylesheet" href="./10_style.css">
8.CSS里面有继承关系!!
但不是全部属性都有继承 EX:border
<style>
body{
font-family: fantasy;
border: 1px solid red;
}
p{
/* font-family: fantasy; */
/* border: 1px solid red; */
}
div{
/* font-family: fantasy; */
}
h3{
/* border: 1px solid red; */
}
</style>
范例：
div
{
/* 在同一列里面 但 有自己的区域 */
display: inline-block;
}
/* 用 #id 挑选，帮这 5个 div 各自设定颜色 color */
#Bulbasaur
{
color: seagreen;
}
字串1为绿色
<div>
<h3 class="pokemon" id="Squirtle" >字串1</h3>
</div>
div里面的(字串1+字串2)通通因继承关系而变色
<div id="Squirtle">
<h3 class="pokemon">字串1</h3>
<p>字串2</p>
</div>
9.权重关系
- !important > 行内 > div#id > #id > .class > <标签>
- 权重一样大,下面盖掉上面的,因为程序由上往下跑
- 权重,游标指着等一下也能看到(0,0,2)
- 但尽量不要写在行内,难维护
参考资料
https://ithelp.ithome.com.tw/articles/10196454
!important
#Bulbasaur
{
background-color: green!important;
}
行内
<div class="pokemon" id="Bulbasaur" style="background-color: pink;">
div#id
div#cat
{
background-color: blue;
}
#id
#Charmander
{
background-color: #EB4537;
}
.class
.pokemon
{
background-color: #EB4537;
}
权重一样大,会变成红色
#Squirtle
{
background-color: blue;
}
#Squirtle
{
background-color: red;
}
全文
<style>
img {
width: 200px;
}
div {
display: inline-block;
}
.pokemon
{
background-color: #EB4537;
}
#Bulbasaur
{
background-color: green;
}
#Charmander
{
background-color: #EB4537;
}
#Squirtle
{
background-color: #EB4537;
}
#Pikachu
{
background-color: #EB4537;
}
div#cat
{
background-color: blue;
}
</style>
<body>
<div class="pokemon" id="Bulbasaur">
<h3>字串1</h3>
<img src="./image/Pokemon/001.png" alt="">
</div>
<div class="pokemon" id="Charmander" >
<h3>字串2</h3>
<img src="./image/Pokemon/004.png" alt="">
</div>
<div class="pokemon" id="Bulbasaur" style="background-color: pink;">
<h3>字串3</h3>
<img src="./image/Pokemon/001.png" alt="">
</body>
10.CSS 样式不成功
1.属性彼此之间互相影响
collapse(不要空间),spacing(要空间) 性质冲突
table
{
border: 2px solid red;
border-collapse: collapse;
border-spacing: 10px;
}
2.权重
3.写错
4.选错人
5.link 路径
6.大小写
11.如果有冲突,可能是预设
https://www.w3schools.com/tags/tag_tr.asp
tr
{
border-bottom: 2px dashed blue; //无法显示
}
Default CSS Settings
tr {
display: table-row; //行内
vertical-align: inherit;
border-color: inherit;
}
完成
tr
{
border-bottom: 2px dashed blue;
display: block; //转区块
}
12.关於类似"即时翻译"功能的转跳方式
可研究ajax
https://zh.wikipedia.org/wiki/AJAX
为了转生而点技能-JavaScript，day6(初探物件构造及物件取值
物件(Object) 构造：物件就是多种属性的集合，里面有属性及值，其中属性只能是字串，增加属性利用...
Day 4：认识HTML＋HTML架构
建立HTML档案 打开VSCode > 档案 > 另存新档为html档＋命名 > ...
拥有这些知识就不会迷失在浩瀚的宇宙
开启虚幻世界的大门 虚拟技术地端前哨站，首先登场的是VirtualBox。此篇，会简单讲述虚拟技术V...
Day_22 OpenVPN
前几天所述让我们能够连线回所架设的openwrt方法，虽然方便快速但比较粗糙，可以看到我连https...
第28天 - 文件审核系统(6)_审核端2
今天来做审核端去审核客户端的档案(列印的程序码都有点长，所以只把比较不一样的程序码给列出来) 根据昨...