码迷,mamicode.com
首页 > Web开发 > 详细

HTML-常用标签

时间:2018-09-07 13:58:04      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:合并   文本   select标签   内容   成功   外边距   单选   实现   行内元素   

  部分内容转自:https://www.cnblogs.com/liwenzhou/p/7988087.html

★head内常用标签

<title></title>			定义网页标题
<style></style>			定义内部样式表
<script></script>		定义JS代码或引入外部JS文件
<link/>				引入外部样式表文件
<meta/>				定义网页原信息

★body内常用标签

◇基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

◇特殊字符

&nbsp;    空格
&gt;    >
&lt;    <
&amp;    &
&yen;    ¥
&copy;    版权
&reg;    注册

◇div标签和span标签

div标签: 另起一行开始渲染 【块级标签】
span标签:不需要另起一行渲染 【行内标签】

块级标签:另起一行开始渲染
行内标签:不需要另起一行

标签嵌套:
块级元素【可以】嵌套行内元素及部分块级元素
行内元素【不能】嵌套块级元素

注意:p标签不能块级标签,也不能包含p标签

◇img标签

<img src="图片的路径" >
技术分享图片
alt="图片未加载成功时的提示" 
title="鼠标悬浮时提示信息" 
width="" height="高(宽高两个属性只用一个会自动等比缩放)"
img可传参数

◇超链接标签

<a href="超链接">点我跳转</a> 
技术分享图片
target="_blank"        在新标签页打开目标网页
target="_self"        在自己的标签页打开目标网页 【默认】    
a可传参数
技术分享图片
绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
相对URL - 指当前站点中确切的路径(href="index.htm")
锚URL     - 指向页面中的锚(href="#top"
href属性

◇编号

无序号编号

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>
技术分享图片
disc    (实心圆点,默认值)
circle    (空心圆圈)
square    (实心方块)
none    (无样式)
type属性

有序号编号

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>
技术分享图片
1     数字列表,默认值
A     大写字母
a     小写字母
Ⅰ    大写罗马
ⅰ    小写罗马
type属性

标题编号

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>    

◇表格

技术分享图片
<table>
  <thead>        # 头部
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>        # 身体
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>
语法
技术分享图片
border:         表格边框.
cellpadding:     内边距
cellspacing:     外边距.
width:             像素 百分比.(最好通过css来设置长宽)
rowspan:         单元格竖跨多少行
colspan:         单元格横跨多少列(即合并单元格)
table可传参数

◇form标签

表单用于向服务器传输数据,从而实现用户与Web服务器的交互


表单能够包含:
  1,input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
  2,textarea、select、fieldset和 label标签

<form> </form>
技术分享图片
action            规定向何处提交表单的地址(URL)(提交页面)
autocomplete    规定浏览器应该自动完成表单(默认:开启)
enctype            规定被提交数据的编码(默认:url-encoded)
method            规定在提交表单时所用的 HTTP 方法(默认:GET)    --> post get
name            规定识别表单的名称(对于 DOM 使用:document.forms.name)
novalidate        规定浏览器不验证表单
accept-charset    规定在被提交表单中使用的字符集(默认:页面字符集)
target            规定 action 属性中地址的目标(默认:_self)
form可传参数

◇input标签

<input type="属性名">
技术分享图片
name:                                表单提交时的“键”,注意和id的区别
value:                                表单提交时对应项的值
    type="button", "reset", "submit"时,    为按钮上显示的文本年内容
    type="text","password","hidden"时,        为输入框的初始值
    type="checkbox", "radio", "file",        为输入相关联的值
checked:                            radio和checkbox默认被选中的项
readonly:                            text和password设置只读
disabled:                            禁用
input可传参数
技术分享图片
type元素会根据不同的 type 属性,变化为多种形态
    
type属性值      表现形式         对应代码
        
text           单行输入文本    <input type=text" />
password    密码输入框           <input type="password"  />
date        日期输入框        <input type="date" />
checkbox    复选框            <input type="checkbox" checked="checked"  />
radio        单选框            <input type="radio"  />
submit        提交按钮        <input type="submit" value="提交" />
reset        重置按钮        <input type="reset" value="重置"  />
button        普通按钮        <input type="button" value="普通按钮"  />
hidden        隐藏输入框        <input type="hidden"  />
file        文本选择框        <input type="file"  />
type属性

◇select标签

<select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
</select>
技术分享图片
multiple:布尔属性,设置后为多选,否则默认单选
select可传参数
技术分享图片
disabled:禁用
selected:默认选中该项
value:定义提交时的选项值
option可传参数

◇textarea标签

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
技术分享图片
name:名称
rows:行数
cols:列数
disabled:禁用    
textarea可传参数

 

HTML-常用标签

标签:合并   文本   select标签   内容   成功   外边距   单选   实现   行内元素   

原文地址:https://www.cnblogs.com/sunch/p/9603806.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!