前端学习-WebStorm安装和 html基础标签

作者: _Andy_ | 来源:发表于2018-04-20 15:23 被阅读36次

前端学习-WebStorm安装和 html基础标签
【1Day】Joshua—初识html+css学习笔记（1）
03-HTML常用标签
HTML5初级教学视频分享
HTML学习之路-第二天
HTML基础——基础标签
３－HTML的标签
Html--Day1
HTML基础学习笔记
HTML和CSS基础（一）之HTML的介绍

之前做好多项目都是混合开发，加载html页面，js与原生互相调用等，一直是懵懵懂懂。最终下决心，开始html/CSS/javascript 的学习

使用的是WebStorm 编辑器
看了很多破解的方法下面这个最简单需要的可以点击浏览
WebStorm mac版破解方法
https://blog.csdn.net/pariese/article/details/77540069

基础标签 p、br、h1-hn、b、i、u、s、p<sup>、p<sub> 、ol 、ul、dl 、pre

<p>人猿星球</p>
<p>大家好</p>
<p>大家好</p>

人<br />
猿<br />
星<br />
球<br />

<h1>1111</h1>
<h2>1111</h2>
<h3>1111</h3>
<h4>1111</h4>
<h5>1111</h5>

<b>粗体</b>
<i>协体</i>
<u>下划线</u>
<s>删除线</s>
p<sup>2</sup>
p<sub>2</sub>

<ol type="a">
   <li>有序排列</li>
   <li>有序排列</li>
   <li>有序排列</li>
</ol>

<ul type="squre">
   <li>无序排列</li>
   <li>无序排列</li>
   <li>无序排列</li>
</ul>

<dl>
   <dt>你们什么时候上班</dt>
   <dd>9点啊</dd>
</dl>

<pre>
sdadada
sdahjgj
     dasdssda
</pre>

&lt;body&gt;

EB6C160B-8B13-42AE-9A64-B61DA7C5A32E.png

基础标签 &gt 、 abbr 、table、a href、img、iframe

&lt;body&gt;

<abbr title="啥也不会 还装懂">我会的多了</abbr>


<table border="1px" cellpadding="5px"cellspacing="5px">
    <caption>用户信息</caption>
    <tr><th>姓名</th><th>年龄</th></tr>
    <tr><td>小米</td><td>12</td></tr>
    <tr><td colspan="2">小栏</td></tr>
    <tr><td>小都</td><td>15</td></tr>
    <tr><td rowspan="3">小栏</td><td>13</td></tr>
    <tr><<td>15</td></tr>

</table>

<a href="http://www.baidu.com"target="_blank">百度<img src="Andi.jpg"/></a>
<img src="Andi.jpg"/>
<!--<img src="../下载/bj.jpg"/>-->

<!-- 一个网页内嵌套另一个网页-->
<iframe src="html-2.html" frameborder="0" width="400" height="400"></iframe>

第二页 html-2.html

<!--_parent 上级
 _top 最顶层
 _blank 新开页面

 <img src="Andi.jpg"/>
 -->
<a href="http://www.baidu.com"target="_blank">点击跳转</a>

<form action="xxxx.aapx" method="get">
    <input type="text" name="textuserName"/>
    <input type="password" name="texpwd"/>
    <select name="scolor" > <!-- multiple="multiple"-->
        <option>蓝</option>
        <option>红</option>
        <option>黄</option>
    </select>
    <input type="radio" name="sex" id="dmale"/><label for="dmale">男</label>
    <input type="radio" name="sex" id="dfemale"/><label for="dfemale">女</label>
    <input type="file" name="fifle">
    <input type="checkbox">苹果<input type="checkbox">橘子
    <textarea name="ttext" cols="50" rows="10"></textarea>
    <input type="reset"><!-- 必须在form里-->
    <input type="submit"><!-- 必须在form里-->
    <input type="button" value="我是按钮">
</form>

622C19EE-3861-47CF-BF60-443793237AA6.png

基础标签 div 、audio、 video

<div>asdadasdasdasd</div>
<div>asdadasdasdasd</div>
<div>asda人猿星球asdasd</div>
<h1>人猿星球</h1><!--会被搜索 重点推荐-->
<div>asdadasdasdasd</div>
<div>asdadasdasdasd</div>
<div>asdadasdasdasd</div>

<audio src="UI文件/day11/音乐播放器素材/music/蓝莲花.mp3" controls="controls" autoplay="autoplay">

</audio>

<video src="assets/video/easternPalace.mp4" controls="controls" autoplay="autoplay" loop="3">

</video>

C1D8B5E1-495C-49F2-B309-DCC873423D24.png

基础标签 input、datalist、summary、menu、address、progress、<mark>、time、form

<input type="text" list="talist">
<datalist id="talist">
    <option>蓝</option>
    <option>红</option>
    <option>黄</option>

</datalist>
<!--定义文档细节-->
<details>
    <summary>你可能对这个感兴趣</summary>
    <p>怎么学习</p>
    <p>休息</p>
    <p>逛街</p>
</details>

<menu>
    <li>aaaaa</li>
    <li>aaaaa</li>
    <li>aaaaa</li>
</menu>

<address>
    存地址信息
</address>

<progress value="3" max="10">

</progress>

你好我是<mark>奥巴马</mark>的同学

<time>2018-4-18</time>

<form>
    <input type="email">
    <input type="url">
    <input type="tel">
    <input type="number" min="1" max="10" step="2">
    <input type="range"  min="1" max="10" step="2">
    <input type="color">
    <input type="date">
    <input type="month">
    <input type="week">
    <input type="submit">


</form>
<form autocomplete="no">
<input type="text" list="taglist">
<datalist id="taglist">
    <option>大连</option>
    <option>大1</option>
    <option>大2</option>
    <option>大3</option>
    <option>大4</option>
    <option>大5</option>
</datalist></form>


<input type="text" autofocus="autofocus">


<form action="index.aspx" method="post" id="form1">
    <input type="text"name="userName">
    <input type="submit">
</form>
<input type="password" form="form1">


<form action="index.aspx" method="post" id="form1">
    <input type="text"name="userName">
    <input type="text"name="pwd" formaction="index1.aspx">
    <input type="submit">
</form>

A5FE2898-AAA3-40E2-B924-6F57F0B288D5.png

基础标签 input type="file"、input type="text" 、<p contenteditable="true"、<p hidden="hidden"、<a href

<!-- multiple="multiple" 多选属性-->
<input type="file" multiple="multiple">
<form>
    <input type="text" pattern="(0-9)(6)" title="请输入邮编" required="required">
    <input type="submit">
</form>

<input type="text" placeholder="请输入名字">

<input type="text" required="required">

<p contenteditable="true">dasdasdadadsada</p>
<p hidden="hidden">asdasdad</p>

<!--按tab 建  tabindex="2" 选择顺序-->
<a href="0" tabindex="2">aaaaa</a>
<a href="0">aa222aaa</a>
<a href="0">aa233aaa</a>
<a href="0">aaa444aa</a>

2997949D-D361-45A7-9CC1-305A10920DC0.png

网友评论

本文标题：前端学习-WebStorm安装和 html基础标签

本文链接：https://www.haomeiwen.com/subject/qneakftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

前端学习-WebStorm安装和 html基础标签

相关文章