HTML基础笔记及实例1

作者: 阿r阿r | 来源:发表于2017-03-28 23:46 被阅读0次

HTML基础笔记及实例1
前端入门系列
HTML 学习笔记（二）
HTML学习笔记（二）之各种标签的使用方法（1）
HTML基础笔记（1）
Python及HTML基础（1）
HTML基础学习笔记
web前端笔记2：CSS入门
HTML基础-03
HTML5学习笔记之基础标签

<em></em>斜体
<strong></strong>粗体
<span></span>设置单独样式
<style>span{…}</style>
<q></q>双引号，引用，简短文本
<blockquote></blockquote> 长文本引用，缩进样式
<br/> 回车
  空格
<hr/> 分隔线
<addresss>地址
<code>显示代码程序，一行
<pre>长段代码</pre>
<u><li>列表
<ol><li>有序列表
<table><today><tr>表格，全部显示，行
<th>加粗标题
<td>行中的一列

<style type="text/css">
table tr td,th{
    border:1px solid #000;
}
</style> 给表格加边框

<a href=”目标网址”  target=”_blank”></a>目标网址在新窗口中打开

Paste_Image.png

<form method=”传送方式” action=”服务器文件”>  表单

<form><input type=”text/password”  name=”名称”  valule=”文本”/></form>
Type=text 文本输入 password 密码框输入
Name 文本框名字
Value 为文本输入框设置默认值<textarea rows=”行数” cols=”列数”> 文本 </textarea>  大段输入的表格文本框

<input  type="radio/checkbox"  value="值"  name="名称"  checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框；同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中

下拉列表
<option value=’提交值’>显示的值</option>
Selected=”selected”  默认选中
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项

<input   type="submit"   value="提交">  提交按钮
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

实例

<!DOCTYPE HTML>
<html>
<head>
<title>电影小调查</title>
<style>span{color:red}</style>
</head>
<body>
  <h1>你 喜欢的电影</h1>
<hr/>
  <p>你<strong>最喜欢</strong>的<em>电影</em>是什么？</p>
  <form method="post" action="save.php">
  <label for="myname">姓名:</label>
  <input type="text" value=" " name="myname" />
<br/><br/>
  <label>你的性别是：&nbsp</label>
  <input type="radio" value="1" name="gender" />
  <label>girl</label>
  <input type="radio" value="2" name="gender" />
  <label>boy</boy>
<br/><br/>
  <label><span>密码：</span></label>
  <input type="password" value="" name="pass" />
<br/><br/>
  <label>你最喜欢的电影是:</label>
<select>
  <option value="美女与野兽">美女与野兽</option>
  <option value="长城">长城</option>
  <option value="摆渡人" select="selected">摆渡人</option>
</select>
<br/><br/>
  </form>
  <h3>你的评价</h3>

  <form>
  <textarea rows="10" cols="50">请输入你的评价</textarea>
<br/>
  <input type="submit" value="确认" name="submitBtn" />
  <input type="reset" value="重置" name="resetBtn" />
  </form>
      <a href="http://www.baidu.com" target=”_blank”>欢迎点击搜索</a>
<br/>
  <a href="mailto:229658140@qq.com?subject=电影&body=我最喜欢了">发送邮件查询</a>
</body>
</html>

Paste_Image.png