HTML 基础标签--快速入门

一,HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
</body>
</html>
 <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
 <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
 <meta charset=“ UTF-8” /> 必须写.采取 UTF-8来保存文字. 如果不写就会乱码.

二,HTML标签

1. 简单标签

标题标签 <h1> - <h6>
1. 加了标题的文字会变的加粗,字号也会依次变大。
2. 一个标题独占一行。
​
<p> 我是一个段落标签 </p>
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
​
  文本格式化标签
  加粗 <strong></strong>或<b></b>
  倾斜 <em></em>或者<i></i>
  删除线 <del></del>或者<s></s>
  下划线 <ins></ins>或者<u></u>
​
   <div> <div>。 大盒子,独占一行
  <span> <span>。小盒子,一行上可以多个
      
   图像标签
 <img src="图像URL" />
 src: 指定图像文件的路径和文件名。必须属性
 alt: 替换文本。 图像不能显示时的提示文字
 title:提示文本。 鼠标放到图像上,显示的文字
 
  超链接标签
  <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
    href: 用于指定链接目标的url地址,必须属性
    target:链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。
  链接类型
      外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
      内部链接: 网站内部页面之间的相互链接. 例如 < a href="index.html"> 首页 </a >。
      空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 </a > 。
      下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
      网页元素链接: 像、表格、音频、视频等都可以添加超链接.
      锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
      <a href="#two"> 第2集 </a>
      <h3 id="two">第2集介绍</h3>
      
  特殊字符    
    &nbsp;   空格
    &lt;   <   小于号
    &gt;   >   大于号
​

2. 表格标签及表格属性

  1. 表格标签:表格是用来显示数据

 <table> </table> 是用于定义表格的标签。
 <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。
 <th>姓名</th> 表头单元格标签, 表头单元格里面的文本内容加粗居中显示
 <td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中

  1. 表格结构标签

 <thead></thead>:用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
 <tbody></tbody>:用于定义表格的主体,主要用于放数据本体 。
 以上标签都是放在 <table></table> 标签中。
​
  1. 合并单元格方式

    写于<td></td>中

    1. 跨行合并:rowspan="合并单元格的个数"

    2. 跨列合并:colspan="合并单元格的个数"

删除多余的单元格。

3. 列表标签

列表就是用来布局的,无序列表、有序列表和自定义列表。

  1. 无序列表(重点)

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
</ul>
  1. 有序列表(理解)

<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
</ol>
  1. 自定义列表(重点)

在 HTML 标签中,<dl> 标签用于定义描述列表(或定义列表),该标签会与 <dt>(定义项目/名字)和
<dd>(描述每一个项目/名字)一起使用。 
    
 <dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>
    
    

4. 表单标签

 标签用于定义表单域,以实现用户信息的收集和传递。
      
  <form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
  </form>
                                                 
 action        url地址
用于指定接收并处理表单数据的服务器程序的url地址。
method         get/post
用于设置表单数据的提交方式,其取值为get或post.
name            名称
用于指定表单的名称,以区分同-个页面中的多个表单域。                                                            

1. input输入表单元素

<input type="属性值" />
根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

type 属性的属性值及其描述如下:

除 type 属性外,标签还有其他很多属性,其常用属性如下:

input例题

  1. 有些表单元素想刚打开页面就默认显示几个文字怎么做

答: 可以给这些表单元素设置 value 属性=“值”

用户名: <input type="text" value="请输入用户名" />
  1. 页面中的表单元素很多,如何区别不同的表单元素?

    答: name 属性:当前 input 表单的名字,后台可以通过这个 name 属性找到这个表单。页面中的表单很多, name 的主要作用就是用于区别不同的表单

用户名: <input type="text" value="请输入用户名" name="username" /> 

name 属性后面的值,是自定义的

radio (或者checkbox)如果是一组,我们必须给他们命名相同的名字

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
  1. 如果页面一打开就让某个单选按钮或者复选框是选中状态?

    答: checked 属性:表示默认选中状态。用于单选按钮和复选按钮

性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
​
  1. 如何让input表单元素展示不同的形态? 比如单选按钮或者文本框

    答: type属性:type属性可以让input表单元素设置不同的形态

<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>

2. <select> 表单元素 下拉列表

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
</select>
在<option> 中定义 selected =“ selected " 时,当前项即为默认选中项

3. <textarea> 表单元素

<textarea rows="3" cols="20">
 文本内容
</textarea>
cols=“每行中的字符数” ,rows=“显示的行数”,

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

WQach

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值