當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html一发入魂

發布時間：2024/1/8 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 html一发入魂小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

初識HTML

什么是HTML：

超文本標記語言：

超文本包括：文字圖片音頻視頻動畫等
html5+css3
自帶瀏覽器跨平臺：
- 微軟
- google
- 蘋果
- Mozilla
W3C ：萬維網聯盟
- 結構化標準語言（html(超文本語言),xml（配置文件））
- 表現標準語言（css）
- 行為標準（DOM ,ECMAScript）

常見IDE：

記事本
DW
IDEA
WebStorm

網頁基本標簽

基本標簽：

<h1>一級標簽</h1><h2>二級標簽</h2><h3>三級標簽</h3><h4>四級標簽</h4><h5>五級標簽</h5><h6>六級標簽</h6><hr><p> 小白兔白又白，</p><p>兩只耳朵豎起來，</p><p>愛吃蘿卜愛吃菜， </p><p>跑起路來真叫快。 </p><p>小白兔白又白， </p><p>兩只耳朵豎起來， </p><p>愛吃蘿卜愛吃菜，</p><p>跑起路來真叫快。</p><hr>小白兔白又白， <br>兩只耳朵豎起來， <br>愛吃蘿卜愛吃菜， <br>跑起路來真叫快。 <br>小白兔白又白， <br>兩只耳朵豎起來， <br>愛吃蘿卜愛吃菜， <br>跑起路來真叫快。<br><h1>字體樣式標簽</h1>粗體：<strong>我真帥</strong><br>斜體：<em>我真帥</em><br>空格：空 格 <br>大于：><br>小于：<<br>版權：©<br>

圖像超鏈接網頁布局

圖像標簽：

例子： <img src="https://hbimg.huabanimg.com/d2c549e046be5b2367ae2e12fa957f42de6a1ed335381-qiXTTm_fw658/format/webp" alt="庫里" title="懸停文字" width="100px" height="200px" >

鏈接標簽：

列表表格媒體元素

列表：

<body>  <ol><li>java</li><li>python</li><li>運維</li><li>前端</li><li>c</li> </ol><hr>  <ul><li>java</li><li>python</li><li>運維</li><li>前端</li><li>c</li> </ul><hr>  <dl><dt>學課</dt><dd>java</dd><dd>python</dd><dd>Linux</dd><dd>c</dd><dt>位置</dt><dd>河南</dd><dd>南陽</dd><dd>杭州</dd> </dl>

表格：

<table border="1px"><tr><td colspan="4" style="text-align: center" >學生成績</td></tr><tr><tr><td rowspan="2" style="text-align: center">JKChen</td><td>語文</td><td>100</td></tr><tr><td>數學</td><td>101</td></tr></tr><tr><tr><td rowspan="2" style="text-align: center">兇狠</td><td>語文</td><td>100</td></tr><tr><td>數學</td><td>102</td></tr></tr>

媒體元素：

<video src="../resources/video/生活別處的你.mp4" controls autoplay></video> <br><audio src="../resources/audio/生活在別處的你.mp3" controls autofocus loop="false"></audio><embed height="100" width="100" data="../resources/audio/生活在別處的你.mp3" ></embed>

頁面結構：

內聯框架：

是一個非常有用的標簽，可以用它來模擬Ajax效果，使用iframe可以在一個表格內調用一個外部文件

即內聯框架通過內聯框架可以實現在網頁中“插入”網頁  <iframe src="http://www.baidu.com" name="hello" frameborder="0" width="100%" height="800px"></iframe>

表單及表單應用

表單語法：

表單元素格式：

表單常用元素：

<form action="5.列表.html" method="post"><p>名字：<input type="text" name="name" placeholder="請輸入名字..."></p><p>密碼：<input type="password" name="pwd" placeholder="請輸入密碼..."></p><p>性別：<input type="radio" value="boy" name="sex"checked>男<input type="radio" value="girl" name="sex">女</p><p>愛好：<input type="checkbox" value="sleep" name="hobby">睡覺<input type="checkbox" value="code" name="hobby" checked>敲代碼<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="game" name="hobby">游戲</p><p>按鈕：<input type="button" name="btn1" value="點擊邊長"> </p><p>國家：<select name="列表名稱" id=""><option value="china">中國</option><option value="usa">美國</option><option value="rth">瑞士</option><option value="uk">英國</option><option value="ny" selected>南陽</option></select></p><p>反饋：<textarea name="textarea" cols="30" rows="10" placeholder="請輸入你的反饋"></textarea></p><p>選擇文件<input type="file" name="files"><input type="button" name="upload" value="上傳"></p><p>郵箱：<input type="email" name="email"></p><p>網址：<input type="url" name="url"></p><p>數字：<input type="number" name="num" max="100" min="0" step="1"></p><p>音量：<input type="range" min="0" max="100" name="voice" step="10"></p><p>搜索：<input type="search" name="seach"></p><p><input type="submit"><input type="reset"></p>