前端基础之HTML

Hypertext Markup Language

Posted by youyue on January 1, 2018

|

注意:本文在网站显示格式异常,正确格式点我查看

  • 超文本标记语言HTML(Hypertext Markup Language )是一种用于创建网页的标记语言。
  • 浏览器发请求 –> HTTP协议 –> 服务端接收请求 –> 服务端返回响应 –> 服务端把HTML文件内容发给浏览器 –> 浏览器渲染页面

    HTML常用标签

    head内常用标签

    Meta标签

    1.http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
    2.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

    非Meta标签

      <!--标题-->
      <title>oldboy</title>
      <!--icon图标-->
      <link rel="icon" href="favicon.ico">
      <!--样式文件-->
      <link rel="stylesheet" href="mystyle.css">
      <!--JS文件-->
      <script src="myscript.js"></script>
    

    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>
    

    特殊字符

      &    &amp
      空格 &nbsp
      版权 &copy
      注册 &reg
    

    div标签和span标签

    div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

img标签

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

a标签

<a href="http://www.iyouyeu.net" target="_blank" >点我</a>

列表

1.无序标签

	<ul type="disc">
	  <li>第一项</li>
	  <li>第二项</li>
	</ul>

2.有序标签

	<ol type="1" start="2">
	  <li>第一项</li>
	  <li>第二项</li>
	</ol>

3.标题列表

	<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>yue</td>
		<td>编程</td>
	  </tr>
	  <tr>
		<td>2</td>
		<td>Bender</td>
		<td>喝酒</td>
	  </tr>
	  </tbody>
	</table>

属性:

- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)

form表单

功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性:
属性|值|含义 —|—|— action|URL|指定一个表单处理目标URL,表单数据将被提交到该URL地址的处理程序。如果该属性值为空,则提交到文档自身。 method|get或post|将表单数据提交到http服务器的方法,默认为get enctype|application/x-www-form-urlencoded|指定表单数据的编码类型,此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencode对所有字符进行编码。如果表单包含用于文件上传的控件(input type=”file”),那么这个属性值必须设置为multipart/form-data,不对字符进行编码。

input系列

type属性值|表现形式|对应代码 —|—|—

	text	|单行输入文本	 |<input type=text" />
	password|密码输入框   |<input type="password"  />
	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" value="隐藏按钮"  />
	file	|文本选择框	|<input type="file"  />
类型(type)说明:
text:文本输入框
password:密码输入框
radio:单选框
checkbox:多选框
submit:提交按钮
button:可点击的按钮,没有任何行为,一般配合JS使用
hidden:对用户不可见,通常用于修改某条数据时,记录数据的id值
file:提交文件  form表单需要加上enctype="multipart/form-data",method="post"

属性说明:
name:表单提交时的“键”,注意和id的区别
value:表单提交时对应项的值
type="button", "reset", "submit"时,为按钮上显示的文本年内容
type="text","password","hidden"时,为输入框的初始值
type="checkbox", "radio", "file",为输入相关联的值
checked:radio和checkbox默认被选中的项
readonly:text和password设置只读
disabled:所有input均适用 

select标签

	<form action="" method="post">
	  <select name="city" id="city">
		<option value="1">北京</option>
		<option selected="selected" value="2">上海</option>
		<option value="3">广州</option>
		<option value="4">深圳</option>
	  </select>
	</form>
属性说明:

multiple:布尔属性,设置后为多选,否则默认单选
disabled:禁用
selected:默认选中该项
value:定义提交时的选项值

labal标签

定义:<label> 标签为 input 元素定义标注(标记)。
说明:

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
	<form action="">
	  <label for="username">用户名</label>
	  <input type="text" id="username" name="username">
	</form>

textarea多行文本

	<textarea name="memo" id="memo" cols="30" rows="10">
	  默认内容
	</textarea>
属性说明:

name:名称
rows:行数
cols:列数
disabled:禁用