Web前端之HTML

来源：互联网发布：浙大网络线怎么用 mac 编辑：程序博客网时间：2024/05/17 01:53

前端是什么?
前端对于网站来说，通常是指网站的前台部分，除了html和css完成视觉效果以外还要有交互体验，这就需要js去实现了。

那么什么是HTML?
HTML 是用来描述网页的一种超文本标记语言 (Hyper Text Markup Language)它不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)。
而目前最新的 HTML 标准是HTML5，它是专门为承载丰富的 web 内容而设计的，并且无需额外插件，拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建，而且它是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML 标签

 1. HTML 标签是由尖括号包围的关键词，比如 <html> 2. HTML 标签通常是成对出现的，比如 <b> 和 </b> 3. 标签对中的第一个标签是开始标签，第二个标签是结束标签

<html><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>解释:<html> 与 </html> 之间的文本用来描述网页<body> 与 </body> 之间的文本是可见的页面内容<h1> 与 </h1> 之间的文本被显示为标题<p> 与 </p> 之间的文本被显示为段落

常用标签:
这里写图片描述

文章标签

标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）如:<html><!-- 这是一个注释 --><body><p>hr 标签定义水平线：</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p><hr /><p>这是段落。</p></body></html>

运行效果:
这里写图片描述

段落

段落是通过 <p> 标签定义的。如果您希望在不产生一个新段落的情况下进行换行，请使用 <br /> 标签。<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。你也许会发现 <br> 与 <br /> 很相似。在 XHTML、XML 以及 HTML5中，不允许使用没有结束标签（闭合标签）的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。

文章的预格式标签<pre></pre>

<html><body>    <pre>                静夜思            床前明月光，            疑是地上霜。                  举头望明月，                  低头思故乡。    </pre></body></html>

标记一个缩写<abbr></abbr>

<html><body>    The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.</body></html>

文本标签

超链接标签

<html><body><a href=”http://www.baidu.com” target=”_blank”>百度</a></body></html>

HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，就相当于目录搜索内容一样，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字，也可以使用 id 属性来替代 name 属性，命名锚同样有效。

<html><body><p><!-- 点击查看Chapter 4就会滚动上来 --><a href="#C4">查看 Chapter 4。</a></p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>Chapter 3</h2><p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p></body></html>

这里写图片描述

基本文本标签

<html><body>    <i>我是斜体文本标签</i>    <b>我是粗体文本标签</b>    <strong>我是加强语气的粗体文本标签</strong>    <sup>我是上标文本</sup>    <sub>我是下标文本</sub></body></html>

图像标签

<!DOCTYPE html><html>        <head>    <meta charset=”UTF-8”>    <title>我的第一个网页</title>        </head><body>    <img src="本地图片路径/url链接地址" alt="美女"/></body></html><!-- alt属性是一旦图片没有加载成功，用来替代显示的内容 -->

表格标签

<html><body>    <table border="1">              <tr>    <th>Company</th>    <th>Address</th>  </tr>  <tr>    <td>Apple, Inc.</td>    <td>1 Infinite Loop Cupertino, CA 95014</td>  </tr>    </table></body></html>

运行结果:
这里写图片描述

表格的跨行与跨列
语法：
<td colspan="value">跨两列
<td rowspan="value">跨两行

<!-- 跨两列 --><table border="1">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td colspan="2">January</td>  </tr>  <tr>    <td colspan="2">February</td>  </tr></table>

运行结果:
这里写图片描述

表格单元格内的标签嵌套

<table border="1">            <tr>                <td>                    <table>                        <tr>                            <td>                                内层table的td内容1                            </td>                            <td>                                内层table的td内容2                            </td>                        </tr>                    </table>                </td>            </tr>            <tr>                <td>                    外层table的td内容                </td>            </tr>        </table>

运行结果:
这里写图片描述

利用cellpadding设置单元格的内容与其边框之间的空白

<table border="1" cellpadding="10"></table>

利用cellspacing设置单元格之间的距离

<table border="1" cellspacing="10"></table>

向表格或者单元格添加背景颜色或者背景图片

<table border="1"  style="background:#abcdef;background:url(img/HBuilder.png);"></table>

在表格单元格中排列内容align="left/right/center"

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

<!-- <img>标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式--><html><body><h2>未设置对齐方式的图像：</h2><p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p><h2>已设置对齐方式的图像：</h2><p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p><p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p><p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p><p>请注意，bottom 对齐方式是默认的对齐方式。</p></body></html>

这里写图片描述

列表标签

有序列表

<ol>  <li>苹果</li>  <li>香蕉</li>  <li>橘子</li></ol>

运行结果：

苹果
香蕉
橘子

无序列表

<ul>  <li>苹果</li>  <li>香蕉</li>  <li>橘子</li></ul>

运行结果：

苹果
香蕉
橘子

自定义列表

 <dl>          <dt>helloworld</dt>          <dd>每一门新的语言都要打印一个hello world</dd>          <dt>helloworld</dt>          <dd>每一门新的语言都要打印一个hello world</dd>          <dt>helloworld</dt>          <dd>每一门新的语言都要打印一个hello world</dd>      </dl>

运行结果:

helloworld: 每一门新的语言都要打印一个hello world
helloworld: 每一门新的语言都要打印一个hello world
helloworld: 每一门新的语言都要打印一个hello world

列表嵌套

<ul>          <li>宠物</li>              <ol>                  <li>猫</li>                  <li>狗</li>              </ol>          <li>人类</li>              <ul>                  <li>英国人</li>                  <li>中国人</li>              </ul>          <li>植物</li>      </ul>      <ol>          <li>宠物</li>          <ul>              <li>猫</li>              <li>狗</li>          </ul>          <li>人类</li>          <ol>              <li>英国人</li>              <li>中国人</li>          </ol>          <li>植物</li>      </ol>

运行结果：
这里写图片描述

表单`<form>表单元素</form>`

用于收集不同类型用户输入的数据。

表单元素：

<form><!--文本框-->First name:<br><input type="text" name="firstname"><br>Last name:<br><input type="text" name="lastname"><!--密码框--><input type="password" name="pwd"><!--单选按钮--><input type="radio" name="sex" value="男" checked>男<br/><input type="radio" name="sex" value="女">女<br/><!--复选框--><input type="checkbox" name="food" value="苹果">苹果<br/><input type="checkbox" name="food" value="橘子">橘子<br/><!--提交按钮--><input type="submit"  value="提交"><!--下拉菜单--><select name="cars" >    <option value="vovol">沃尔沃</option>    <option value="benz">奔驰</option>    <option value="bmw">宝马</option></select><!--文本域--><textarea rows="10" cols="30">hello</textarea></form><!--带下拉边框的表单--><form action="">    <fieldset id="">        <legend>个人信息</legend>        <input type="text" size="30"><br />        <input type="text" size="30"><br />        <input type="text" size="10">       </fieldset></form>

form表单中的label标签
<label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
【注意】<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form action="">        <label for="male">男</label>        <input type="radio" name="gender" id="male"/><br />        <label for="female">女</label>        <input type="radio" name="gender" id="female"/><br />        <label for="email">输入邮箱地址</label>        <input type="email"  id="email" placeholder="Enter email"/><br />    </form>

表单元素属性:
name属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

<!DOCTYPE html><html><body><form action="/demo/demo_form.asp">First name:<br><input type="text" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form> <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p><p>first name 不会被提交，因为此 input 元素没有 name 属性。</p></body></html>

运行结果：
这里写图片描述

这里写图片描述

value属性
一旦赋值，值就会出现在表单中。

readonly属性
规定输入字段为只读，不能修改的。

<input type="text" name="country"   value="China" readonly="readonly" />

disabled属性
规定禁用 input 元素，被禁用的 input 元素既不可用，也不可点击。

 <input type="text" name="lname" disabled="disabled" />

【注意】disabled 属性无法与 <input type="hidden"> 一起使用

<form action="demo_form.php"><!--size属性-->  Email: <input type="text" name="email" size="35"><br><!--maxlength属性-->  PIN: <input type="text" name="pin" maxlength="4" size="4"><br>  <input type="submit" value="提交"></form>

HTML框架

可以在同一个浏览器窗口中显示不止一个页面

<iframe src="http://www.baidu.com" width="200" height="200" frameborder="0"></iframe><!--使用iframe显示目录链接页面--><iframe src="http://www.baidu.com" name="a"></iframe><p><a href="http://www.sina.com" target="a">新浪</a></p><!--点击新浪会在iframe设定的窗口中加载新浪页面-->

HTML块级元素与内联元素

大多数 HTML 元素被定义为块级元素或内联元素，“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。

HTML <span>元素是内联元素，可用作文本的容器。
<span>元素也没有特定的含义。
当与 CSS 一同使用时， <span> 元素可用于为部分文本设置样式属性。

阅读全文

0 0

Web前端之HTML

HTML 标签

文章标签

文本标签

图像标签

表格标签

列表标签

表单<form>表单元素</form>

HTML框架

HTML块级元素与内联元素

表单`<form>表单元素</form>`