前端开发学习笔记-----HTML

{% meting "2111364820" "tencent" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:200px" "preload:auto" "autoplay" %}
菜鸟教程: HTML CSS

视频: php js

HTML

一.初识 认识html标签

Tips:标签推荐小写!

1.标签(一般成对出现)

  • < h1 >到< h6>表示标题
  • < p >表示段落
  • < a >用来定义链接
  • 提示:在 href 属性中指定链接的地址
  • < img >来定义图像

    如: < img src="/images/logo.png" width="258" height="39" /> 图像的名称和尺寸是一属性的形式提供

  • < br> 换行

    mark

  • < body> 元素定义了 HTML 文档的主体
  • < html> 元素定义了整个 HTML 文档

    切记:不要忘记结束标签!!!!!!

    没有内容的HTML元素被称为空元素.

    空元素在开始标签中关闭.如 < br >这样的元素就是没有关闭标签的空元素 在开始菜单中加上撇斜杠也就是 / 可以关闭空元素 如< br />

    2.HTML属性

    HTML的元素可以设置属性,属性可以在元素中添加附加信息.属性存在开始标签中,属性应该始终包括在引号内.

    如:< a href="http://blog.fangmingxuan.com">This is my blog>

    HTML属性参考:

    mark


    二.标签详细说明

    1.标题 < h1>至< h6>

  • 标题通过< h1>至< h6>来定义,其中< h1>定义最大标题< h6>定义最小标题

    ​ < hr >元素在HTML页面中创建水平线.

    ​ 实现效果:

    mark

  • HTML中注释的方法为

    < !-- 注释内容 -->

    总结:mark

    2.段落< p>

    切记:浏览器并不是完全按照段落内输入的内容进行输出

    mark

    3.文本格式化

  • HTML文本格式化标签
  • < b> 定义粗体文本
    < em> 定义着重文字
    < i> 定义斜体字
    < small> 定义小号字
    < strong> 定义加重语气
    < sub> 定义下标字
    < sup> 定义上标字
    < ins> 定义插入字
    < del> 定义删除字

  • 通常标签< strong>替换加粗标签< b>来使用, < em>替换 < i>标签使用
  • HTML "计算机输出" 标签

    < code> 定义计算机代码
    < kbd> 定义键盘码
    < samp> 定义计算机代码样本
    < var> 定义变量

    < pre> 定义预格式文本

  • HTML 引文, 引用, 及标签定义

    < abbr> 定义缩写

    < address> 定义地址
    < bdo> 定义文字方向
    < blockquote> 定义长的引用
    < q> 定义短的引用语
    < cite> 定义引用、引证
    < dfn> 定义一个定义项目。

    实现过程:

    <h4>文本格式化</h4>
         <br />
    	 <b>这个文本是加粗的</b>
    	 <br />
    	 <strong>这个文本是加粗的</strong>
    	 <br />
    	 <big>这个文本字体放大</big>
    	 <br />
    	 <em>这个文本是斜体的</em>
    	 <br />
    	 <i>这个文本是斜体的</i>
    	 <br />
    	 <small>这个文本是缩小的</small>
    	 <br />这个文本包含
    	 <sub>下标</sub>
    	 <br />这个文本包含
    	 <sup>上标</sup>
    	 <hr />
    	 <p>该段落文字从左到右显示。</p>  
     	 <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>  
    	 <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
    

    效果:mark

    4.HTML链接< a>来设置一个超文本链接

    <超链接可以是一个字,一个词....也可以是一幅图,点击内容来跳转

    标签< a>中使用href属性来描述链接的地址

  • target 属性可以定义被链接的文档在何处显示.
  • **

  • target="_blank"**会让超链在新窗口打开文档.

  • id 属性可用于创建在一个HTML文档书签标记
  • 先用< a id="需要标记的部分"> 标记部分< /a>

    然后用< a href="#需要标记的部分">访问 标记部分< /a>

    如果不在同一个页面需要加上页面地址

    5.头部< head>

    &nbsp

  • < head> 元素包含了所有的头部标签元素。在 < head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: < title>, < style>, < meta>, < link>, < script>, < noscript>, and < base>.

  • 使用**< title>**标签定义HTML文档标题
  • 使用**< base>**定义页面中所有链接的默认的链接目标地址,如可以先定义一个链接为新窗口打开,下面的URL可以直接使用不需要再后面加上**target="_blank"**即可再新窗口打开
  • 使用 **< meta>** 元素来描述HTML文档的描述,关键词,作者,字符集等。我把它当作注释或者声明来理解.**< meta>** 标签提供元数据.元数据不显示在页面上,但是会被浏览器解析.一般放在**< head>**区域.

    **

  • < link>**标签定义了文档与外部资源之间的关系

    **

  • < style>标签定义了HTML文档的央样式文件引用地址.在< style>**标签中可以直接添加样式来渲染HTML文档

    为搜索引擎定义关键词:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    为网页定义描述内容:
    <meta name="description" content="免费 Web & 编程 教程">
    定义网页作者:
    <meta name="author" content="Runoob">
    每30秒钟刷新当前页面:
    <meta http-equiv="refresh" content="30">
    

    三.深入

    1.CSS

    css是用于渲染HTML元素标签的样式.

    使用**style="text-decoration:none;"**属性,可以使超链接没有下划线

    CSS可以通过以下方式添加到HTML中:

  • 内联样式--在HTML元素中使用"style"属性

  • 内部样式表--在HTML文档头部**< head>区域使用< style>**元素来包含CSS

  • 外部引用--使用外部CSS文件,(推荐方法)

    ​ 如:内联样式

    <p style="color:blue;margin-left:20px;">看内联样式效果</p>
    
    

    ​ 效果:

    mark

    background-color可以定义一个元素的背景颜色,颜色可用英文代码或者16进制代码表示.

    ​ 如:将body背景色改成淡青色,主标题的背景色改成蓝色

    mark

    ​ 效果:

    mark

  • 可使用font-family color font-size text-align(文字对齐属性) 等属性来定义字体的样式,多个样式之间用分号分隔.
  • 如:

    <p style="font-family:arial;color:red;font-size:20px;">段落</p>
    
    

  • 内部样式表可在**< head>部分通过< style>**标签定义内部样式表
  • <head>
    	<meta charset="utf-8">
    	<title>前端开发笔记</title>
    	<meta name="description" content="前端开发学习笔记,实例测试">
    	<meta name="author" content="隔壁家的三少爷">
    	<style type="text/css">
    		h1,h2,h3 {color: green}
    		p {color: blue}
    	</style>
    
    </head>
    

  • 外部样式表,可以改变所有应用此文件的站点的外观
  • **< link>**定义资源引用地址

    2.图像,HTML中 图像使用 **< img>**来定义

  • < img>是个空标签,它只包含属性,没有闭合标签.要在页面上显示图像,需要使用源属性 src .源属性的值是图像的URL地址.
  • alt属性为图像定义一串预备的可替换的文本,即当图像在浏览器上无法显示的时候,则替换为这一串文本,这样可以很快找到出错地方在哪
  • heightwidth 属性用于设置图像的高度和宽度.属性值默认单位为像素
  • 3.表格**< table>定义用< tr>来定义行 ,< td>来分割行并且输入内容 ,< th>来定义表头.< caption>来给表格价格标题< cellpadding>可以改变单元格边距, < cellspacing> 可以改变单元格间距.< colgroup>**为表格设置背景色

    <table border="1" cellpadding="10">
         	<colgroup>
         		<col span="2" style="background-color: pink">
         		<col style="background-color: yellow">
         	</colgroup>
         	<caption>表格效果</caption>
         	<tr>
         		<th>图片</th>
         		<th colspan="2">描述</th>
         	</tr>
         	<tr>
         		<td><img src="http://qiniuph.fangmingxuan.com/blog/20200422/1ccYuXRXXsjO.png?imageslim" height="150" width="192"></td>
         		<td>鹿			</td>
         		<td>海报</td>
         	</tr>
         </table>
    

  • 效果:

    mark

    4.列表

  • 有序列表
  • ​ 有序列表使用**< ol>**标签,此列项目使用数字进行比奥及

    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    
    <ol start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    

    mark

  • 无序列表
  • ​ 无序列表使用**< ul>**标签,此列项目使用粗体圆点标记.

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

    mark

  • 自定义列表
  • ​ 自定义列表不仅仅是一列项目,而是项目机器注释的组合

    ​ 自定i列表一**< dl>标签开始.每个自定义列表项以< dt>开始.每个自定义列表项的定义以< dd>**开始.

    <dl>
        <dt>Coffee</dt>
        	<dd>- black hot drink</dd>
        <dt>Milk</dt>
        	<dd>- white cold drink</dd>
    </dl>
    

    mark

    5.区块-布局

  • 大多数 HTML 元素被定义为块级元素内联元素

    ​ 实例: < h1>, < p>, < ul>, < table>

  • 内联元素在显示时通常不会以新行开始。

    ​ 实例: < b>, < td>, < a>, < img>

    **

  • < div>**元素是块级元素,可用于组合其他HTML元素的容器,我是把它当作像C语言中的函数块一样来理解,与范围外的其他元素成分相互独立,可以单独设置属性.如css等

    **

  • < span>**元素是内联元素,我认为它可以单独的改变句中某一部分内容的属性

    **

  • < table>**终究只是个表格布局,不过它可以胜任一些比较正式的或者需要一定格式的一些网页布局

    6.表单:用于收集不同类型的用户输入

  • 表单元素可允许用户在表单中输入内容,如: 文本域(textarea) ,下拉列表,单选框(radio-buttons) ,复选框(checkbxes)等等.

  • 表单使用表单标签 *< form>*来设置

    a. 输入元素 < input>

  • 文本域 通过**< input type="text">**标签来设定

    <form>
    姓名: <input type="text" name="姓名">
    </form>
    

    mark

  • 密码字段,此字段下的字符不会明文显示.

    <form>
    密码: <input type="password" name="pwd">
    </form>
    

    mark

    b. 选择框

  • 单选按钮 (Radio Buttons) < input type="radio"> 标签定义了表单单选框选项

    <form>
        性别:
    	<input type="radio" name="sex" value="male">男
    	<input type="radio" name="sex" value="female">女
    </form>
    

    mark

  • 复选框 (checkboxes) *< input type"checkbox">*定义复选框,在给出的选择中选择一个或多个选项

    有喜欢的东西吗?
    			  <input type="checkbox" name="fav"> 乐高 <br>
    			  <input type="checkbox" name="fav"> 电脑 <br>
    			  <input type="checkbox" name="fav"> 手办 
    
    

    mark

  • 下拉列表

    <form action="">
    		<select name="food">
    			<option>noodle</option>
    			<option>rice</option>
    			<option>soup</option>
    		</select>
    	</form>
    

    mark

    c.按钮 button

  • 创建按钮

    <input type="button" value="此处自定义按钮名称">
    

  • 提交按钮 submit

    <input type="submit" value="提交">
    
    有喜欢的东西吗? <br>
    			  <input type="checkbox" name="fav"> 乐高 <br>
    			  <input type="checkbox" name="fav"> 电脑 <br>
    			  <input type="checkbox" name="fav"> 手办 <br>
    			  <input type="submit" value="提交"><br>
    

    mark

    7.框架 通过使用框架,可以在同一个浏览器窗口中显示不止一个页面 iframe

  • iframe语法:

    <iframe src="URL"></iframe>
    

    a.设置高度与宽度 使用width和height

    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
    

    b.移除边框

    <iframe src="demo_iframe.htm" frameborder="0"></iframe>
    

    c.使用iframe显示目标链接页面

    <iframe src="http://blog.fangmingxuan.com" name="blog" width="1600" height="900"></iframe>
    	<p><a href="http://blog.fangmingxuan.com" target="blog"></a></p>
    
    

    mark

    8.颜色 可使用颜色名或 十六进制颜色或者RGB颜色来表示,web安全色可确保能在所有计算机上正确显示所有的颜色

    9.脚本 JavaAcript是HTML页面具有更强的动态和交互性

    ​ **< script>**标签用于定义客户端脚本,比如Javascript. **< script>**元素既可包含脚本语句,也可通过 src属性 只想外部脚本文件

  • Tips:JavaScript 最常用于图片操作、表单验证以及内容动态更新。

    <script>
    	document.write("Hello World!")
    </script>
    <noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
    <p>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容(文本)来替代。</p>
    
    <li> 当浏览器**不支持Javascrip**t时会用  **noscript**  标签的内容来替换,提醒.
    

    10.字符实体 HTML中的预留字符必须被替换为字符实体.

    ​ 一些在键盘上找不到的字符也可以使用字符实体来替换.

  • 如: HTML中不能使用小于号 和大于号 因为浏览器会误认为它们是标签.如果希望正确地显示预留字符,我们必须在HTML源代码中使用字符实体(character entities). 格式为 &entity_name; 或**&#entity_number;**

  •    a.不间断空格
  •                         浏览器总是会截短HTML页面中的空格.在页面显示前,浏览器只会留下一个空格,删除多余的其他空格.如果需要连续使用多个空格 必须使用 & nbsp;  字符实体.

  •    b.结合音标符
  •                               就是可以在字母上面加上变音符号 à  á â  ã  分别是 & #768; & #769; & #770; & #771;

  •    c.字符实体
  • 	空格	&nbsp;	&#160;
    <	小于号	&lt;	&#60;
    >	大于号	&gt;	&#62;
    &	和号	&amp;	&#38;
    "	引号	&quot;	&#34;
    '	撇号 	&apos; (IE不支持)	&#39;
    ¢	分	&cent;	&#162;
    £	镑	&pound;	&#163;
    ¥	人民币/日元	&yen;	&#165;
    €	欧元	&euro;	&#8364;
    §	小节	&sect;	&#167;
    ©	版权	&copy;	&#169;
    ®	注册商标	&reg;	&#174;
    ™	商标	&trade;	&#8482;
    ×	乘号	&times;	&#215;
    ÷	除号	&divide;	&#247;
    

  • Tips: 虽然HTML不区分大小写,但实体字符对大小写敏感
  • 三.总结

    1.HTMl速查列表

    HTML 速查列表
    HTML 速查列表. 你可以打印它,以备日常使用。
    
    HTML 基本文档
    <!DOCTYPE html>
    <html>
    <head>
    <title>文档标题</title>
    </head>
    <body>
    可见文本...
    </body>
    </html>
    基本标签(Basic Tags)
    <h1>最大的标题</h1>
    <h2> . . . </h2>
    <h3> . . . </h3>
    <h4> . . . </h4>
    <h5> . . . </h5>
    <h6>最小的标题</h6>
     
    <p>这是一个段落。</p>
    <br> (换行)
    <hr> (水平线)
    <!-- 这是注释 -->
    文本格式化(Formatting)
    <b>粗体文本</b>
    <code>计算机代码</code>
    <em>强调文本</em>
    <i>斜体文本</i>
    <kbd>键盘输入</kbd> 
    <pre>预格式化文本</pre>
    <small>更小的文本</small>
    <strong>重要的文本</strong>
     
    <abbr> (缩写)
    <address> (联系信息)
    <bdo> (文字方向)
    <blockquote> (从另一个源引用的部分)
    <cite> (工作的名称)
    <del> (删除的文本)
    <ins> (插入的文本)
    <sub> (下标文本)
    <sup> (上标文本)
    链接(Links)
    普通的链接:<a href="http://www.example.com/">链接文本</a>
    图像链接: <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
    邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>
    书签:
    <a id="tips">提示部分</a>
    <a href="#tips">跳到提示部分</a>
    图片(Images)
    <img src="URL" alt="替换文本" height="42" width="42">
    样式/区块(Styles/Sections)
    <style type="text/css">
    h1 {color:red;}
    p {color:blue;}
    </style>
    <div>文档中的块级元素</div>
    <span>文档中的内联元素</span>
    无序列表
    <ul>
        <li>项目</li>
        <li>项目</li>
    </ul>
    有序列表
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
    定义列表
    <dl>
      <dt>项目 1</dt>
        <dd>描述项目 1</dd>
      <dt>项目 2</dt>
        <dd>描述项目 2</dd>
    </dl>
    表格(Tables)
    <table border="1">
      <tr>
        <th>表格标题</th>
        <th>表格标题</th>
      </tr>
      <tr>
        <td>表格数据</td>
        <td>表格数据</td>
      </tr>
    </table>
    框架(Iframe)
    <iframe src="demo_iframe.htm"></iframe>
    表单(Forms)
    <form action="demo_form.php" method="post/get">
    <input type="text" name="email" size="40" maxlength="50">
    <input type="password">
    <input type="checkbox" checked="checked">
    <input type="radio" checked="checked">
    <input type="submit" value="Send">
    <input type="reset">
    <input type="hidden">
    <select>
    <option>苹果</option>
    <option selected="selected">香蕉</option>
    <option>樱桃</option>
    </select>
    <textarea name="comment" rows="60" cols="20"></textarea>
     
    </form>
    实体(Entities)
    &lt; 等同于 <
    &gt; 等同于 >
    &#169; 等同于 
    

    谨此记录,方便查阅.

    参考学习于:菜鸟教程 ,

    Q.E.D.