前端基础-html学习

HTML的定义

html是一种超文本标记语言，英文名称HyperText Markup Language。它既是一种规范，也是一种标准，通过标记符号来标记要显示网页中的各个部分。

特点：

html是一个文本文件
html可以直接有浏览器运行
html文件必须使用html或者xhtml为后缀

编写HTML文件

内容待补充

<!DOCType html>
<html>
<head>
<meta charset="utf-8"/>
<title>标题</title>
</head>
<body>
</body>
</html>

THML标签分类

html标签主要分为两大类

1、自闭合标签

2、主动闭合标签

head常用标签

1、meta标签

2、title标签

<title> 元素可定义文档的标题。

<head>
    <title>XHTML Tag Reference</title>
</head>

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

3、link标签

<head>
    <link rel="stylesheet" type="text/css" href="theme.css" />
</head>

4、style标签

<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

5、script标签

<script type="text/javascript">
    document.write("Hello World!")
</script>

body常用标签

1、实体字符

&nbsp 空格
&gt 大于号
&lt 小于号

2、p标签

<p> 标签定义段落。

<p>This is some text in a very short paragraph</p>

3、br标签

<br> 可插入一个简单的换行符。

<p>
    To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

4、h1~h6标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

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

5、span标签

<span> 标签被用来组合文档中的行内元素。

span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<span>some text.</span>

6、input标签

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

属性	值	描述
type	text password submit button radio checkbox file rest	输入框，内容为明文输入框，内容为密文提交按钮用在表单form内，提交所在表单单选框，checked="checked"默认选中，name属性相同互斥复选框，checked="checked"默认选中，name属性相同批量获取数据上传文件，依赖form表单的属性enctype="multipart/form-data" 重置按钮
name	field_name	定义 input 元素的名称。
value	value	规定 input 元素的值。
checked	checked	规定此 input 元素首次加载时应当被选中。
accept	mime_type	规定通过文件上传来提交的文件的类型。
disabled	disabled	当 input 元素加载时禁用此元素。
maxlength	number	规定输入字段中的字符的最大长度。
readonly	readonly	规定输入字段为只读。
size	number_of_char	定义输入字段的宽度。
src	URL	定义以提交按钮形式显示的图像的url

<form action="form_action.asp" method="get">
    用户名: <input type="text" name="user" />
    密码: <input type="password" name="passwd" />
    <input type="submit" value="Submit" />
</form>

7、select标签

select 元素可创建单选或多选菜单。

属性	值	描述
name	name	规定下拉列表名称
size	number	规定下拉列表中可见选项的数目
multiple	multiple	规定可选择多个选项
disabled	disabled	规定禁用该下拉列表

8、option标签

<option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

属性	值	描述
value	text	定义送往服务器的选项值
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态
disabled	disabled	规定此选项应在首次加载时被禁用

<select>
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</select>

9、optgroup标签

<optgroup> 标签为<select> 标签定义选项组。label为必要属性，为选项组命名。

<select>
    <optgroup label="Swedish Cars">
      <option>Volvo</option>
      <option>Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option>Mercedes</option>
      <option>Audi</option>
    </optgroup>
</select>

10、a标签

<a>标签定义超链接，用于从一张页面链接到另一张页面。最重要的属性是 href 属性，它指示链接的目标。

<a href="http://www.w3school.com.cn">W3School</a>

<a>标签还可以作为锚，用它指向页面内某个标签，可以直接跳转到对应标签。

<a href="#menu1">目录一</a>

<div id="menu1">正文一<div>
<div id="menu2">正文二<div>
<div id="menu3">正文三<div>

11、img标签

img 元素向网页中嵌入一幅图像。<img> 标签并不会在网页中插入图像，而是从网页上链接图像。

属性	值	描述
src	URL	规定显示图像的 URL(必需属性)
alt	text	规定图像的替代文本(必需属性)
title	text	鼠标悬浮提示文字

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

12、ul标签

<ul> 标签定义无序列表。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

13、ol标签

<ol> 标签定义有序列表。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

14、dl标签

<dl> 标签定义了定义列表

<dl> 标签用于结合 <dt>（定义列表中的项目-标题）和 <dd>（描述列表中的项目-内容）。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

15、table标签

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

colspan属性用于列合并单元格

<table border="1">
    <tr>
        <td colspan="3">合并第一行的三列</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

rowspan属性用于行合并单元格

<table border="1">
    <tr>
        <td rowspan="2">合并第一列的两行</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

16、label标签

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<label for="username">用户名：</label>
<input id="username" type="text" name="user" />

17、fieldset标签

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们

<legend> 标签为 fieldset 元素定义标题

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

18、textarea标签

<textarea> 标签定义多行的文本输入控件。使用 CSS 的 height 和 width 属性来规定textarea的尺寸。

<textarea name="text">
    在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>

posted @ 2019-09-09 17:16 xjggg 阅读(111) 评论(0) 收藏举报

刷新页面返回顶部

xjggg

九层之台起于垒土，千里之行始于足下