HTML基础学习

<div style="width: 100px; height: 100px;background-color:red;">faslkfsldfjsldfabcdef</div>

英文之间添加空格后：

<div style="width: 100px; height: 100px;background-color:red;">fas lkfsld fjs ldfa bcdef</div>

如果内容是中文：

<div style="width: 100px; height: 100px;background-color:red;">前端工程师前端工程师前端工程师前端工程师前端工程师</div>

div中的内容有多个空格，当成一个空格看待，其实是分隔符

<div style="width: 100px; height: 100px;background-color:red;">前端                                                                  工程师</div>

如果想要实现文字之间多个空格，使用HTML编码&; 其中 表示空格

<div style="width: 100px; height: 100px;background-color:red;">前端&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工程师</div>

&lt;表示<   &gt;表示>

<div>这是一个&lt;div&gt;</div>

有序列表：type的值由5种：1/a/A/i/I，默认值是1;     reversed="reversed"表示逆序；tart=“2”表示从第二个开始排序

<ol type="1"><li>html</li><li>css</li><li>JavaScript</li><li>jQuery</li><li>Vue</li></ol>

无序列表：type值：disc/circle/square

<ul type="disc"><li>html</li><li>css</li><li>JavaScript</li><li>jQuery</li><li>Vue</li></ul>

<img src="" alt="" title=""/>标签

src的值：

1网上url

2.相对地址：在同一个文件夹下

html文件在C:a/b/1.html

图片文件在C:a/b/123.jpg

src="123.jpg"
3.绝对地址：

html文件在C:a/b/1.html

图片文件在C:a/b/c/123.jpg

src="C:a/b/c/123.jpg"

alt=""图片链接错误时，会显示alt中的文字；

title=""鼠标放在图片上时会显示的信息

<a href=""  target=""> </a>

 target="_blank"表示在新标签打开链接
<a></a>有三种用途：

超级链接；

锚点，比如回到顶端；

打电话 发email

<a href="tel：130......"  > 联系我们</a>

<a href="mailto："  > 联系我们</a>

还有一种用途：协议限定符<a href="javascript:while(1){alert("让你手贱")}"  > 点我试试</a>

点击后会执行JavaScript代码

form表单：若要成功提交，必须有name属性

分别输入sunny 和123

提交前：http://127.0.0.1:8020/miaov/VQuery.html?

提交后：http://127.0.0.1:8020/miaov/VQuery.html?username=sunny&password=123

<form method="get" action=""><p>用户名：<input type="text" name="username" /></p><p>密码 ： <input type="password" name="password"/></p>    <p>    <input type="submit" />    </p></form>

单选框：name属性值必须相同，name就好像是题目，name相同就表示是同一道题目的单选题，必须要有value属性才能提交

<form method="get" action="">    html<input type="radio" name="web" value="html"/>    css<input type="radio" name="web" value="css"/>    javaScript<input type="radio" name="web" value="javaScript"/>    <p>    <input type="submit" />    </p></form>

点击第一个按钮后：

下拉菜单select：

<form method="get" action=""><select name="province"><option>北京</option><option>上海</option><option>石家庄</option></select><input type="submit"  /></form>

主流浏览器及内核：

IE                   trident

Firefox            Gecko

chrom             Webkit

Safari              Webkit

Opera             Presto