HTML基础学习

最新推荐文章于 2024-12-16 16:52:23 发布

原创最新推荐文章于 2024-12-16 16:52:23 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了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>

<表示< >表示>

<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="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