Html学习：基础属性和控件

勘察加熊人

已于 2022-03-25 13:42:28 修改

阅读量232

点赞数

分类专栏： Vue.js 文章标签： html5

于 2022-03-24 11:23:26 首次发布

本文链接：https://blog.csdn.net/cf8833/article/details/123706533

版权

Vue.js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML的基础知识，包括HTML的定义、作用及其在网页结构中的角色。内容聚焦于HTML的元素组成，说明了HTML元素如何指示浏览器展示内容，如标题、段落和链接等。此外，还预告了后续课程将涉及的各种基础控件。

摘要由CSDN通过智能技术生成

Html学习：第一课

html基础属性和控件

HTML代表超文本标记语言
HTML 是用于创建网页的标准标记语言
HTML 描述网页的结构
HTML由一系列元素组成
HTML 元素告诉浏览器如何显示内容
HTML 元素标记内容片段，例如“这是一个标题”、“这是一个段落”、“这是一个链接”等。

<html>
<head>
  <meta charset="UTF-8"/>
  <title>Node_of_HTML</title>
</head>
<body>
<h1 align="center">click right view code</h1>
<br/>
<h2>step1:simple data</h2>
<a href="https://www.baidu.com">more line</a>
<br/>
<a href="https://www.baidu.com" target="_blank">new windows to link</a>
<br/>
<a href="https://www.baidu.com" target="_self">old windows to open</a>
<br/> this is no size ,is a compare
<br/>
<b>large size for B</b>
<br/>
<em>view for I</em>
<br/>
<u>get a word Bottom line</u>
<br/>
<s>
  delete view
</s>
<br/>
<b><em><u>
  <s>
    get add view
  </s></u></em></b>
<br/>
<h2>step2: table slide</h2>
<br/>
<b>1.simple table</b>
<br/>
<table border="1px" align="center">
  <thead>
  <tr>
    <th>name</th>
    <th>age</th>
    <th>password</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>admin</td>
    <td>man</td>
    <td>123456</td>
  </tr>
  <tr>
    <td>user</td>
    <td>women</td>
    <td>654321</td>
  </tr>
  <tr>
    <td>tom</td>
    <td>man</td>
    <td>998356</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <th>name</th>
    <th>sex</th>
    <th>password</th>
  </tr>
  </tfoot>
</table>
<br/>
<b>2. clien add table</b>
<br/>
<table border="1px" align="center">
  <tbody>
  <tr>
    <th rowspan="2">aaa</th>
    <th>aaa</th>
    <th>aaa</th>
    <th>aaa</th>
  </tr>
  <tr>
    <td colspan="2">aaa</td>
    <td>aaa</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
    <td>aaa</td>
  </tr>
  </tbody>
</table>
<br/>
<b>3.listview sort</b>
<br/>
<br/>
<b>true sort list</b>
<ol>
  <li>hello ,good morning</li>
  <li>I am fine</li>
  <li>hello,everybody</li>
</ol>
<br/>
<b>false sort list</b>
<ol reversed="">
  <li>hello ,good morning</li>
  <li>I am fine</li>
  <li>hello,everybody</li>
</ol>
<br/>
<b>English sort list</b>
<br/>
<ol type="a">
  <li>hello ,good morning</li>
  <li>I am fine</li>
  <li>hello,everybody</li>
</ol>
<br/>
<b>list view add</b>
<br/>
<ol>
  <li>image reset</li>
  <ol>
    <li>java</li>
    <li>php</li>
    <li>javascript</li>
  </ol>
  <li>big number reset</li>
  <ol type="a">
    <li>java</li>
    <li>php</li>
    <li>javascript</li>
  </ol>
  <li>default language reset</li>
  <ol type="a">
    <li>java</li>
    <li>php</li>
    <li>javascript</li>
  </ol>
</ol>
<br/>
<b>not have true sort tip</b>
<br/>
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
<br/>
<h2>step:3 dividing</h2>
<form>
  <br/>
  <b>1.simple text line</b>
  <br/>
  <input/>
  <input type="index"/>
  <br/>
  <b>2.slide text file</b>
  <br/>
  <input type="index" value="java is NO:1"/>
  <br/>
  <b>do not have tab text file</b>
  <br/>
  <input type="index" placeholder="input user"/>
  <br/>
  <input type="index" placeholder="input password"/>
  <br/>
  <b>lime input word size text Filed</b>
  <br/>
  <input type="index" placeholder="maxlength" maxlength="5"/>
  <br/>
  <b>get more text field</b>
  <br/>
  <input type="index" placeholder="input password" size="50"/>
  <br/>
  <b>only reader text field</b>
  <br/>
  <input type="index" value="you can not delete me" readonly=""/>
  <br/>
  <b>password not see text filed</b>
  <br/>
  <input type="password" placeholder="please input password"/>
  <br/>
  <b>more line table form ,can touch width height</b>
  <br/>
  <textarea rows="20"> 汉皇重色思倾国，御宇多年求不得。 杨家有女初长成，养在深闺人未识。 天生丽质难自弃，一朝选在君王侧。 回眸一笑百媚生，六宫粉黛无颜色。 春寒赐浴华清池，温泉水滑洗凝脂。 侍儿扶起娇无力，始是新承恩泽时。 云鬓花颜金步摇，芙蓉帐暖度春宵。 春宵苦短日高起，从此君王不早朝。 承欢侍宴无闲暇，春从春游夜专夜。 后宫佳丽三千人，三千宠爱在一身。 金屋妆成娇侍夜，玉楼宴罢醉和春。 姊妹弟兄皆列土，可怜光彩生门户。 遂令天下父母心，不重生男重生女。 骊宫高处入青云，仙乐风飘处处闻。 缓歌慢舞凝丝竹，尽日君王看不足。 </textarea>
  <br/>
  <b>9.button</b>
  <br/>
  <input type="submit" value="send"/>
  <br/>
  <button>button two</button>
  <br/>
  <input type="submit" value="send"/>
  <br/>
  <b>10.form check</b>
  <br/>
  <input type="range" min="-100" max="100"/>
  <input type="range" min="-200" max="200" step="100"/>
  <input type="range" min="-200" max="200" step="100" value="-200"/>
  <br/>
  <input type="number" min="-100" max="100" value="0"/>
  <br/>
  <b>11.checkbox</b>
  <br/>
  <input type="checkbox"/>选择
  <br/>
  <b>12.single checkbox</b>
  <br/>
  <input type="radio" name="a" checked=""/>java
  <input type="radio" name="a"/>php
  <input type="radio" name="a"/>javascript
  <br/>
  <b>12.select from check</b>
  <br/>
  <select>
    <option>huawei</option>
    <option>xiaomi</option>
    <option>oppo</option>
  </select>
  <br/>
  <b>13.select form and input</b>
  <br/>
  <input type="text" placeholder="other food please input" list="datalist1"/>
  <datalist id="datalist1">
    <option>apple</option>
    <option>banner</option>
    <option>orange</option>
  </datalist>
  <br/>
  <b>14.email phone url time color</b>
  <br/>
  <input type="email"/>
  <input type="tel"/>
  <input type="url"/>
  <input type="date"/>
  <input type="color"/>
  <br/>
  <b>15.hide form</b>
  <input type="hidden" value="123"/>
  <br/>
  <br/>
  <b>16.image button and check file</b>
  <br/>
  <input type="image" src="assets/logo.jpg" width="8%"/>
  <br/>
  <input type="file" multiple=""/>
</form>
<br/>
<h2>step4:insert image</h2>
<br/>
<b>1.create image</b>
<br/>
<img src="assets/logo.jpg" width="128px" alt="alice"/>
<br/>
<b>2.can not find image</b>
<br/>
<img src="assets/logo.jpg" width="123px" alt="alice"/>
<br/>
<b>3.click image to internet</b>
<br/>
<a href="https://www.baidu.com" target="_blank"> <img src="assets/logo.jpg" width="128px" alt="alice"/> </a>
<br/>
<b>4.distance click image</b>
<br/>
<img src="assets/logo.jpg" usemap="#map1"/>
<h2>step5:insert video</h2>
<br/>
<b>click play video</b>
<br/>
<video src="assets/gameplay.mp4" controls="" preload="auto" poster="assets/logo.jpg"></video>
<h2>step6:insert video</h2>
<br/>
<b>click play music</b>
<br/>
<audio src="assets/FlowerFire.mp3" controls=""></audio>
</body>
</html>

第二课：各种基础控件

<html>
<head>
  <meta charset="UTF-8"/>
  <title>HelloWorld</title>
</head>
<body>
hello world
<h1 style="background-color: red">h1</h1>
<h2 style="color: blue">h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<br/>
<b>粗体</b>
<br/>
<br/>
<strong>强字体</strong>
<br/>
<br/>
<em>强调</em>
<br/>
<br/>
<i>斜体</i>
<br/>
<br/>
<small>小字</small>
<br/>
<br/>
<sub>下标</sub>
<br/>
<br/>
<sup style="background-color: aqua">上标</sup>
<br/>
<br/>
<a href="https://www.baidu.com" target="_blank">
  <button type="button" style="color: blue">百度一下，你就知道</button>
</a>
<br/>
<img src="assets/logo.jpg" style="width: 50px;height: 50px" alt="image"/>
<ul>
  <li>coffee</li>
  <li>tea</li>
  <li>milk</li>
</ul>
<br/>
<br/>
<ol>
  <li>table</li>
  <li>chair</li>
  <li>bed</li>
</ol>
<dl>
  <dt>
    red
  </dt>
  <dt>
    green
  </dt>
  <dt>
    yellow
  </dt>
  <dt>
    purple
  </dt>
</dl>
<div>
  <h1>文本测试</h1>
</div>
<div class="font-red background-blue border-solid">
  <span>类的测试</span>
</div>
<iframe src="assets/like.html" width="800" height="200"></iframe>
<br/>
<br/>
<form method="post">
  <label for="studentName"> <br/> <span>姓名</span> <br/> <input id="studentName" type="text" name="studentName"/>
  </label>
  <label for="sexDiv1"> <br/> <span>性别</span> <br/> <input id="sexDiv1" type="radio" name="sexDiv" value="male"/>男
    <input id="sexDiv2" type="radio" name="sexDiv" value="female"/>女 </label>
  <label for="interest1"> <br/> <span>兴趣爱好</span> <br/> <input id="interest1" type="checkbox" name="interest"
                                                               value="eating"/>吃饭 <input type="checkbox" name="interest"
                                                                                         value="swimming"/>游泳 <input
    type="checkbox" name="interest" value="sing"/>唱歌 </label>
  <br/>
  <span>城市选择</span>
  <br/>
  <select name="address">
    <option value="1">杭州</option>
    <option value="2">福州</option>
    <option value="3">厦门</option>
    <option value="4">北京</option>
    <option value="5">哈尔滨</option>
  </select>
  <br/>
  <span>多行文本</span>
  <br/>
  <textarea name="introduce" rows="10" cols="30"> 秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下，包举宇内，囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法度，务耕织，修守战之具；外连衡而斗诸侯。于是秦人拱手而取西河之外。 </textarea>
  <br/>
  <input type="reset" value="重置"/>
  <input type="submit" value="发送"/>
</form>
</body>
</html>

勘察加熊人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html学习：基础属性和控件

Html学习：第一课html基础属性和控件HTML代表超文本标记语言HTML 是用于创建网页的标准标记语言HTML 描述网页的结构HTML由一系列元素组成HTML 元素告诉浏览器如何显示内容HTML 元素标记内容片段，例如“这是一个标题”、“这是一个段落”、“这是一个链接”等。<html><head> <meta charset="UTF-8"/> <title>Node_of_HTML</title></head
复制链接

扫一扫