html知识点

最新推荐文章于 2024-05-23 13:39:19 发布

liuchonghua

最新推荐文章于 2024-05-23 13:39:19 发布

阅读量217

点赞数 1

分类专栏：网页前端文章标签： html入门

本文链接：https://blog.csdn.net/liuchonghua/article/details/79727782

版权

网页前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html

基本框架

<html>
	<head>
		<meta charset="utf-8" />  <!--声明编码格式为utf-8格式-->
		<title>网页标题</title>
	</head>
	<body>
		网页的内容
	</body>
</html>

文本标签

<h1>标题</h1> <!--标题样式默认放大、换行-->        
    <h2>标题2</h2>  <!--从h1到h7从大到小排列-->
    <hr /> <!--分割线-->        
    <p>段落标签</p> <!--上下有段落间距，前后换行-->    
    <blockquote>带缩进的段落</blockquote> <!--blockquote内所有行都会缩进-->        
    123<br /> 133<br />    <!--段内换行上下不加间距-->    
    x<sup>2</sup>  <!--上标签-->    
    x<sub>2</sub>    <!--下标签-->    
    <pre>
        1234
    原样输出标签
    </pre>
    <strong>实例1</strong><br />        <!--加粗标签-->
    <em>实例2</em><br />    <!--斜体标签-->
    <center>文本01</center>    <!--居中标签-->
        <font size="4" face="微软雅黑" color="#0f0">文本</font> <br />
        <!--font标签的属性：size定义文字大小最高到
                            face定义文字字体
                            color定义文字颜色-->
        <p>转义字符</p>
        文本&nbsp;文本 <!--空格-->
        &lt;<br /><!--  <  -->
        &gt;<br /><!--  >  -->
        注册商标R标签&reg;<br />
        版权所有C标签&copy;

结果如下

html文本样式css样式也可以实现并且更灵活便于维护。

超链接标签

<a href="连接到的地址或资源文件" target="_self">超链接</a>
	<!--harf内可以使用的协议：
		file://	本地文件
		http://自己的执行流程 :通过查看hosts文件中有没有该域名对应的ip,有的话,调用程序访问,如果没有,就联网操作访问
		thunder://迅雷协议
		mailto:邮件协议
		target: _self:在当前窗口直接开
			_blank:新建一个窗口打开-->
a标签还可以用来做跳转
	<a name="cat"></a>  <!--打锚点，name中定义一个锚点名称-->
	<a href="#cat">返回</a> 	
	    <!--点击的时候页面会跳转到锚点位置
	    也可以用在不同页面链接到锚点时候href内先写链接到的页面的地址在加#锚点名-->

图像标签

<img src="img/1.jpg"/>
	<!--src:链接到的资源图片
	width:宽度可以为px或者%
	height:高度
	title:悬停状态鼠标处显示的文字
	alt:当图片失效时显示的内容-->

表格

可以用于网页布局但是不好控制并且需要全部加载后才可以显示，现在已经弃用。

<table border="1px" width="100px" height="100px">
	<!--border:边框
	cellpadding：单元格内边距
	cellspacing：单元格之间的边距
	align:表格对于窗口的对其方式
        	属性值:left   center  right
        width:表格的宽度
        height:表格的高度
        bgColor:背景色-->
<caption>表头，位于表格上方</caption>
	<tr><!--行标签-->
		<th colspan="2" ><!--居中加粗的单元格-->
		    <!--colspan横向合并-->
		    Header
		</th>
	</tr>
	<tr>
		<td rowspan="2"><!--单元格标签-->
		<!--rowspan纵向合并-->
		    Data
		</td>
		<td>Data</td>
	</tr>
	<tr><td align="center">Data</td></tr>
	<!--align:对其方式-->
</table>

输出如下：

表单标签

用于采集用户输入的数据

<form action="#" method="post" onsubmit="">
    <!--创建一个表单域
    action设置提交的地址
    method设置提交的方式有get和post两种
    get不安全信息会显示在地址栏，并且有大小限制
    post信息不会显示在地址栏且没有大小限制
    onsubmit返回提交的结果
        true:表示提交成功
        false:表示提交失败-->
<input type="text" name="use" value="默认" />
	<!--文本框
	name属性必填用于给后台做标记
	value定义默认显示的内容
        placeholder属性：定义提示内容以灰色字显示，有输入内容时消失
        -->
<input type="password" name="pwd" value="123" />
	<!--密码框:用小点显示-->
<input type="radio"  name="sex" value="男"  />男
<input type="radio"  name="sex" value="女" />女
	<!--单选框:name设置为相同才可以单选-->
<input type="checkbox"  name="nn" value="1" />1
<input type="checkbox"  name="nn" value="2" />2
	<!--复选框:name属性设置为相同-->
<input type="hidden" name="h1" />
	<!--隐藏域:没有显示但是可以携带数据-->		
<input type="file" name="h3" />
	<!--选择文件上传-->
<textarea name="text" rows="5" cols="20">。。。。</textarea>
	<!--文本域
	    rows:文本域中有多少行
	    cols:一行能写多少个字符-->
<select name="h4">
	<option selected="selected"  value="请选择">请选择</option>
        <!-- selected="selected" 预先选定的-->
	<option value="第一个">第一个</option>
</select>
	<!--下拉列表-->
<input type="button"  value="按钮"/>
<input type="submit"  value="提交"/>
<input type="reset" value="重置" />
</form>

输出效果：

表单标签均要设置name属性用于给后台标记

type属性
text	文本域，设置rows（文本行数）cols（行字符数）后变为一个输入区域
password	密码框
radio	单选框
checkbox	复选框
hidden	隐藏域，不会显示可以携带信息
file	上传文件按钮，会显示所选文件的名字
button	一个按钮
submit	提交按钮
reset	重置按钮

liuchonghua

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html知识点

html目录html基本框架文本标签超链接标签图像标签表格表单标签基本框架&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;!--声明编码格式为utf-8格式--&gt; &lt;title&gt;网页标题&lt;/title&gt; &lt;/head&am
复制链接

扫一扫

专栏目录