静态资源Html基础语法
生活随笔
收集整理的這篇文章主要介紹了
静态资源Html基础语法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.div劃分【樣式控制】
<style>div {/*顯示邊框*/border: 1px solid pink;/*寬度 占用屏幕的60%*/width: 60%;/*高度 500像素*/height: 500px;/*邊框外邊距*/margin: auto;/*文字居中*/text-align: center;/*height: 500px;*//*line-height: 500px;*/}</style>2.div浮動樣式
<style>div {border:1px solid pink;}.left {width: 20%;height: 500px;float: left;}.center {width: 60%;height: 500px;float: left;}.right {width: 19%;height: 500px;float: left;}.footer {clear: both;text-align: center;background-color: blueviolet;} </style>3.圖片插入
<body> <!--同文件下直接拆入圖片，同級不同文件則進入上一層 再寫入圖片文件夾名稱/圖片名稱--> <!--圖片標簽:<imgp屬性:--> <!-- src-圖片的路徑--> <!-- title-鼠標懸浮時顯示的內容--> <!-- alt-圖片找不到時顯示的內容--> <!-- width-圖片的寬度--> <!-- height-圖片的高度--><img src="../images/1.jpg" title="廣告" alt="圖片找不到啦" width="150px" height="150px"/><img src="https://img2.baidu.com/it/u=143818365,1814365001&fm=26&fmt=auto&gp=0.jpg" width="200px"/> </body>4.超鏈接
<style>a {/*去掉超鏈接的下劃線*/text-decoration: none;/*超鏈接的顏色*/color: black;}/*鼠標懸浮的樣式控制*/a:hover {color: red;}</style>5.添加背景圖片
<style>body {background: url("../images/2051454.jpg");}</style>6.表單的相關標簽
<body> <!--action="#":指定跳轉路徑表單項標簽：<label> 表單元素說明屬性：for屬性，屬性值必須和表單項標簽id屬性值一致表單項標簽：<input> 多種類型數據屬性：type-數據類型id-唯一標識name-提交服務器的標識value-默認的數據值placeholder-默認的提示信息required-是否必須按鈕標簽：<button>屬性：type-按鈕的類型(submit提交、reset重置、button普通按鈕)--><form action="#" method="get" autocomplete="off"><label for="usename">用戶名：</label><input type="text" id="usename" name="usename" placeholder="請在此處輸入用戶名" required/><label for="password">密碼</label><input type="password" id="password" name="password" placeholder="請在此處輸入用戶名" required/><label for="tel">密碼</label><input type="tel" id="tel" name="tel" placeholder="請在此處輸入電話號碼"/><button type="submit">提交</button><button type="reset">重置</button><button type="button">按鈕</button></form> </body>7.其他表單的相關標簽
<body> <!--下拉列表標簽：<select>列表項標簽：<option>列表項分組標簽：<optgroup> 屬性：label設置分組名稱文本域標簽：<textarea>屬性：rows-行數cols-列數 --> <form action="#" method="get" autocomplete="off">所在城市：<select name="city"><option>---請選擇城市---</option><optgroup label="直轄市"><option>北京</option><option>上海</option></optgroup><optgroup label="省會市"><option>杭州</option><option>武漢</option></optgroup> </select><br/>個人介紹：<textarea name="desc" rows="5" cols="20"></textarea><button type="submit">提交</button><button type="reset">重置</button> </form> </body>總結
以上是生活随笔為你收集整理的静态资源Html基础语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： tekla的电脑配置(tekla电脑最优
- 下一篇： 静态资源Css基础语法