yinhaifeng

1. HTML基础结构

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>标题部分</title> 
<meta name="keywords" content="关键字" />  
<meta name="description" content="本页描述或关键字描述" /> 
</head> 
<body> 
  内容 
</body> 
</html>

 -主要记住

<html> 
<head> 
<title>标题部分</title> 
</head> 
<body> 
  内容 
</body> 
</html>

-----------------------------------------------------------------------------------------------------

 2. HTML常用标签

 -<!--...--> 是注释标签 

   -块级元素

  1.总是从新的一行开始

  2.高度、宽度都是可控的

  3.宽度没有设置时,默认为100%

  4.块级元素中可以包含块级元素和行内元素

 -行内元素

  1.和其他元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度,不可以改变

  4.行内元素只能行内元素,不能包含块级元素

  -<h1>到<h6> 是标题标签也是一个块级元素

<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

 -<p> 是段落标签也是一个块级元素

 -<div> 标签

     <div>你可以当做一个容器,<div>容器,没有特指装什么,你想装什么就装什么,<div>可以用来给文本分区

     <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。

 -<ul>...</ul>  无序列表也是一个块级元素

<ul>
    <li></li>
</ul>

  -<ol>...</ol>  有序列表也是一个块级元素

<ol>
    <li></li>
</ol>

  -<table>...</table>  表格也是一个块级元素

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

  -<a> 标签定义超链接,用于从一张页面链接到另一张页面   是行内元素

<a href="javaScript:;"></a> // javaScript:; 这个是我不想让<a>标签不要跳转使用的一种手法
<a href="https://www.baidu.com"></a> // href 里是你要跳转的地址

   -<img>  标签是向网页插入一张图片  是行内元素

<img src="" /> // src 里是你要插入图片的位置

 

  -<span> 被用来组合文档中的行内元素,是行内元素

  -<b> 标签规定粗体文本,是行内元素。

  -<em> 标签把文本定义为强调的内容,是行内元素

  -<strong> 标签把文本定义为语气更强的强调的内容,是行内元素

  -<i> 标签显示斜体文本效果,是行内元素

  -<br/> 标签只是简单地开始新的一行

  -<hr/> 标签在 HTML 页面中创建一条水平线,可以在视觉上将文档分隔成各个部分

-表单

  -<form>  表单也是一个块级元素

    <form> 标签用于为用户输入创建 HTML 表单。

     表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

     表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

     表单用于向服务器传输数据。

   -<input type="" /> 输入框 

    type 属性规定 input 元素的类型

    type里面:

      text(定义单行的输入字段,用户可在其中输入文本),

      password(定义密码字段。该字段中的字符被掩码),

      submit(定义提交按钮。提交按钮会把表单数据发送到服务器),

      reset(定义重置按钮。重置按钮会清除表单中的所有数据),

      radio(定义单选按钮)

      checkbox(定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项)

   -<textarea>  标签定义多行的文本输入控件

  -<select>

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

   <select> 元素中的 <option> 标签用于定义列表中的可用选项。

<select>
    <option value="1">1</option >
</select>

  -引用样式

    1. style 行内样式

     又称内联表单样式,它直接写在标签内部,用style属性声明。行内样式不能实现所有的样式。

   2.<style> 嵌入式样式

     又称内部样式表,必须写在<head>标签中,用<style>标签申明。

   3. <link> 外部样式

     外部样式表较其他两种方式,优势在于:1. 利用通用样式表,减少重复样式的冗余编码和修改;2. 内容与样式分开存储,加快了编码的效率,同时增加了文档的可读性;3.外部样式表可以被缓存,减少了带宽的使用,加快了网页打开的速度。

分类:

技术点:

相关文章: