HTML_247960353.html-CSDN博客

本文链接：https://blog.csdn.net/weixin_45761101/article/details/104591476

web开发职位
ul设计师：做网站效果图
web前端工程师：图片切割和网页制作
web后端工程师：对网站数据进行增删改查等逻辑处理，并将数据交给前端工程师
数据库工程师：对网站数据进行储存和优化

web三大技术
网页的简单概括=HTML（内容）+CSS（装饰）+JS（动态效果）；

web三大开发工具
1、浏览器：IE、Chrome、firework、safari、opera
2、网页编辑器：dw（Dreamweaver）、s（sublime text）、ws（webstorm）、h（hbuilder）
3、切图软件：ps（photoshop）、fw（firework）

HTML总述：

HTML功能：用来表示浏览器的页面。

1、结构：

<!DOCTYPE html>     
<html >     
  <head>
   <meta charset="UTF-8">     <title>页面标题</title>   
  </head>     
  <body>   
   <h1>我的第一个标题</h1> <p>我的第一个段落。</p>     
  </body>  
</html>

*<!DOCTYPE html> 这里用来是声明HTML5； 
doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
* <html> 元素是 HTML 页面的根元素
* <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
* <title> 元素描述了文档的标题
* <body> 元素包含了可见的页面内容
* <h1> 元素定义一个大标题
* <p> 元素定义一个段落
* <!--这是注释-->在小括号当中的代码或者文字将不被浏览器编译

2、链接

HTML链接 
  <a href="http://www.baidu.com">这是一个链接</a>   
  href:   指定超文本链接的地址   
  注意：这里必须写上http://

HTML图像
  <img src="/images/logo.png" width="258" height="39" />
  src：指定图片的链接地址。
  src后面的地址可以是绝对地址或者相对地址
  如果两个文件在同一级目录下可以直接写文件名
  如果两个文件不在同一级目录
  图片在img文件下，html文件包含img文件和以.html
  链接地址应该写成..\img\2.jpg（html为文件包含图片和.html的文件）

HTML关联css文件
<link rel="stylesheet" type="text/css" href="style.css" >
其中style.css文件和以.html在同一级别目录

HTML关联js文件
<script type="text/javascript" src="hi.js"></script>
其中需要注意的是浏览器首先会加载完成html代码，然后再去执行脚本代码。
<script type="text/javascript" src="patch.js" defer></script>
defer属性延迟js脚本文件的执行

3、html字符实体

为了帮助我们可以显示预留字符如 < > 我们应该使用字符实体Entities 来代替预留字符。
<pre> 标签用于定义预格式化的文本。
<code> 标签用于定义计算机代码片段。
块级元素：<span>
行级元素：<p>
在html中想要在浏览器实现多行换行或者空格，在编写html文档时等需要用标签实现。
例：<p> 我在学习<br>html</p>
就会实现我在学校和html分成两行。

4、引用

<p>孔子有云：<q>学而不思则罔，思而不学则殆。</q></p>
<q> 标签定义较短的引用

浏览器通常会在引用内容的两侧添加引号。

<blockquote>
        <p>梦想是什么，梦想就是一种让你感到坚持就是幸福的东西。</p>
        <p>当才华撑不起野心的时候，只能安静读书。</p>
</blockquote>

这个标签的应用和<q>标签类似，效果浏览器显示缩进。

<p><abbr title="鱼C工作室">FishC.com</abbr> was founded in 2010.</p>

<abbr> 标签定义简称或缩写，鼠标放在”FishC.com“上面出现鱼C工作室的小方框
通过对缩写进行标记，能够为浏览器、拼写检查和搜索引擎提供有用的信息。

<p><dfn>HTML</dfn>是一门用于创建网页的标准标记语言。</p>

<dfn> 标签表现定义中的术语。
表现为HTML为斜体

<strong>联系我们</strong><br>
邮箱：<a href="mailto:fishc_service@126.com">fishc_service@126.com</a><br>
微信：fishc_studio（公众号）<br>
</address>

<address> 标签定义文档或文章的作者/拥有者的联系信息。

<ruby>魑<rp>（</rp><rt>chī</rt><rp>）</rp></ruby>
<ruby>魅<rp>（</rp><rt>mèi</rt><rp>）</rp></ruby>

<ruby> 标签定义注音符号。
<rt> 标签与 <ruby> 标签搭配中使用，用于定义注音符号。
<rp> 标签与 <ruby> 标签搭配中使用，用于定义不支持 ruby 元素的浏览器所显示的内容。

5、格式化

<p>strong标签让文本变粗且有<strong>强调作用</strong></p>
<p>b元素也能使得文本<b>变粗</b>，但没有没有强调语义。</p>

<p>em元素可以让文本<em>变斜</em>！且有<em>强调语义</em></p>
<p>i元素也可以让内容<i>倾斜</i>，只不过它没有附带任何表示强调的语义。</p>

不推荐上面的使用方式，习惯性使用css

<style type="text/css">
        .bold {font-weight: bolder;}
        .italic {font-style: italic;}
</style>

<p class="bold">这里的内容都加粗会比较好看！</p>
<p class="italic">这里的内容还是倾斜的好……</p>

<p>官网从 <del>www.fishc.com</del> 变成 <ins>ilovefishc.com</ins></p>

<ins> 标签用于定义新插入的文本。
与 <del> 标签配合使用，来描述文档中的更新和修正。

<p><s>“男人就应该三妻四妾”</s>这种观点是不正确的！</p>

<s>标签用来定义那些不正确的文本

<p><mark>可乐</mark>、<mark>雪碧</mark>、<mark>柠檬茶</mark>，请问客官喝点啥？</p>

<mark>标签用来标记，文本显示为黄色。

<p>E = MC<sup>2</sup></p>
<p>Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn</p>

<sup> 标签用于定义上标文本。
<sub>标签用于定义下标文本。
大都使用在数学等式、科学符号和化学公式中都非常有用。

6、列表

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

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

<ol>
<li>HTML5 & CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>

<ol> 标签用于定义有序列表。
<li> 标签用于定义列表中的项目。
<li> 标签可用在有序列表 <ol> 和无序列表 <ul> 中。

<ol>
        <li>《零基础入门学习汇编语言》</li>
        <li>《解密系列》
            <ul>
                <li>基础篇</li>
                <li>调试篇</li>
            </ul>
<ol>

列表允许多级嵌套。

<dl>
        <dt>fishc.com.cn</dt>
        <dd>一个神奇的论坛。</dd>
</dl>

<dl> 标签定义了一个包含术语定义以及描述的列表。
<dd> 标签用于定义列表中项目的描述部分。
<dt> 标签用于定义列表中的项目（即术语部分）。

7、表格

每个表格都必须有三个标签<table> <tr> <td>

<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>小甲鱼</td>
<td>18</td>
</tr>

<table> </table>:声明这里是一个表格域
<tr> </tr>:表示行首行列：<th> </th>
<td> </td>:表示列

使用css对表格进行修饰

<style>
        table {
            border: 1px solid black;
            border-collapse: collapse;  #border-collapse 属性设置表格的边框是否被合并为一个单一的边框。
        }
        th {
            border: 1px solid red;
        }
        td {
            border: 1px solid blue;
        }
</style>

为了跟好的被搜索引擎理解对表格布局时有了语义化标签
<thead> </thead>:将表格划分为头部
<tbody> </tbody>:主体
<tfoot> </tfoot>:页脚

8、HTML表单

<form action="welcome.php" method="post">
名字：<input type="text" name="name"><br><br>
邮箱：<input type="text" name="email"><br><br>
<button type="submit">提交</button>
<button type="reset">重写</button>
<button type="submit" formmethod="get">GET</button>
<button type="submit" formmethod="post">POST</button>
</form>

功能：收集用户信息，将这些信息传递给后台服务器
通常由三部分组成表单元素、提示信息、表单域

表单域：<form> </form>将表单中的数据传输到后台服务器
表单元素：<input>表单输入框 <textarea>多行文本框 <select>下列表 <label>表单辅助项
HTML将数据发送给后台服务器用到<from>的action、method、enctype、target

<from action="welcom.php" method="post" autocomplete="on">

<form target="_blank" action="welcome.php" method="post"  autocomplete="on">
性别：<input type="text" name="name" value="女" readonly><br><br>
年龄：<input type="text" name="email" disabled ><br><br>
<button type="submit">提交</button>

target属性设置目标链接
autocomplete的值可以记录上一个浏览者的记录，只需要改成off即可。
value="女" 值被设定。
disabled 属性设置后按钮不可更改，且不向服务器传值。
readonly 属性设置后数值不可以更改，但是会提交到服务器。