前端界面之html学习笔记

html目前常用的两种文档类型是xhtml 1.0和html5

html注释

<!-- 这是一段注释  -->

html标签

<!-- 成对出现的标签  -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>

<!-- 单个出现的标签  -->
<br />
<img src="..." />
<input type="..." />

<!-- 标签之间的嵌套  -->
<p>
    <span>...</span>
    <a href="...">...</a>
</p>
<div>
      <h3>...</h3>
      <div>
              <span>...</span>
              <p>...</p>
      </div>
</div>

html标题：通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题

html段落：<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开

html换行：可以在代码的段落中插入<br />来强制换行

html图像：

<img src="images/pic.jpg" alt="产品图片" />

绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址

html链接：<a>标签在网页上定义一个链接地址，通过src属性定义跳转地址，title属性定义鼠标悬停时弹出提示文字框。

html有序列表：在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现

html无序列表：在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现

扫描二维码关注公众号，回复： 2900615 查看本文章

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释

html表单

<!-- form定义一个表单区域,action属性定义表单数据提交的地址，
method属性定义提交的方式。   -->
<form action="http://www..." method="get">

<!-- label标签定义表单控件的文字标注，input类型为text定义了
一个单行文本输入框  -->
<p>
<label>姓名：</label><input type="text" name="username" />
</p>

<!-- input类型为password定义了一个密码输入框  -->
<p>
<label>密码：</label><input type="password" name="password" />
</p>

<!-- input类型为radio定义了单选框  -->
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>

<!-- input类型为checkbox定义了单选框  -->
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>

<!-- input类型为file定义上传照片或文件等资源  -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>

<!-- textarea定义多行文本输入  -->
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>

<!-- select定义下拉列表选择  -->
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>

<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">

<!-- input类型为reset定义重置按钮  -->
<input type="reset" name="" value="重置">
</p>

</form>

前端界面之html学习笔记

猜你喜欢