夜光带你走进 前端工程师(一)

    xiaoxiao2022-07-12  155

    夜光序言:

     

     

    人有了物质才能生存;人有了理想才谈得上生活。你要了解生存与生活的不同吗?动物生存,而人则生活。

     

     

     

     

     

    正文:

     

    1:ctrl+/  :

     

    可以用显示灰色,那个东西

    ctrl+/+shift:用于注释一个部分

    <!DOCTYPE html> //ctrl+/  可以来显示为灰色   {浏览器得知自己要处理的内容是html}<html lang="en">  //{文档中html部分的开始}<head>//提供有关文档内容和标题信息的    <meta charset="UTF-8">  //编码,没有的话是乱码     <title>Title</title>   //标题</head><body><h1>冷静思考</h1> //明显比下面一个要大一点冷静思考</body></html>

    meta 源数据

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

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>设计草稿<a href="1create'html.html"target="_blank">计算机web技术</a><a href="1create'html.html">计算机web技术</a></body></html>

    问1:

    一:<a href="1create'html.html"target="_blank">计算机web技术</a>二:<a href="1create'html.html">计算机web技术</a>

    两种超链接有什么区别:自己冷静思考


     

    <!--<a href="1create'html.html"target="_blank">计算机web技术</a><a href="1create'html.html">计算机web技术</a><a href="1create'html.html"target="_self">计算机web技术</a>-->

     

    这三种都是超链接,有什么区别自己思考

    样式调整一般都是用的css

    <b>设计初稿</b> //粗体

    <em>设计初稿</em>  //斜体

    <u>设计初稿</u>  //下划线

    <s>设计初稿</s>  //中间一根

    <body>设计草稿<!--<a href="1create'html.html"target="_blank">计算机web技术</a><a href="1create'html.html">计算机web技术</a><a href="1create'html.html"target="_self">计算机web技术</a>--><!--<b>设计初稿</b> 粗体--><<!--em>设计初稿</em> //斜体--><u>设计初稿</u>  //下划线<s>设计初稿</s>  //中间一根线提供<b>有关文档</b>内容和<a href="1create'html.html"target="_blank"> 标题信息</a>的</body>

     

     


    表格元素Html5 讲解

     

    1:表格三大元素:<table>  ,  <t>  ,  <td>

    实例1:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>创建表格</title></head><body><table border="1px" align="center"> <!--//表格边框属性1像素,并且居中,如果有css就不麻烦了-->    <tr>        <td>admin</td>        <td>男</td>        <td>女</td>    </tr>     <!--一行里面的单元格--></table></body></html>

     

    Ps:上机操作

     

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>创建表格</title></head><body><table border="1px" align="center"> <!--//表格边框属性1像素,并且居中,如果有css就不麻烦了-->    <tr>        <td>admin</td>        <td>男</td>        <td>女</td>    </tr>     <!--一行里面的单元格-->    <tr>        <td>计算机学院</td>        <td>男</td>        <td>女</td>    </tr>     <!--一行里面的单元格-->    <tr>        <td>前端技术学院</td>        <td>男</td>        <td>女</td>    </tr>     <!--一行里面的单元格-->    {三行三列表格}</table></body></html>


    理解:

    1:

    <thead><tr>    <td>用户名</td>    <td>性别</td>    <td>职位</td></tr>     <!--一行里面的单元格--></thead>

     

     

    2:

    <tbody><tr>    <td>admin</td>    <td>男</td>    <td>初级</td></tr>     <!--一行里面的单元格--><tr>    <td>计算机学院</td>    <td>男</td>    <td>中级</td></tr>     <!--一行里面的单元格--><tr>    <td>前端技术学院</td>    <td>男</td>    <td>高级</td></tr>     <!--一行里面的单元格--></tbody><tfoot><tr>    <td>用户名</td>    <td>性别</td>    <td>职位</td></tr>     <!--一行里面的单元格--></tfoot>

    高级操作: <td>admin</td>   -------可以用<th>


    3:合并的单元格

    </table><br>  //<!--换行符-->

    <br>  <!--//<!–换行符–>--><table border="1px" align="center"> <!--//表格边框属性1像素,并且居中,如果有css就不麻烦了-->    <tr>        <th>aaaa</th>        <th>aaaa</th>        <th>aaaa</th>        <th>aaaa</th>    </tr>    <tr>        <th>aaaa</th>        <th colspan="2">aaaa</th>    <!--//合并单元格,学会操作-->        <th>aaaa</th>    </tr>    <tr>        <th>aaaa</th>        <th>aaaa</th>        <th>aaaa</th>        <th>aaaa</th>    </tr></table>

     

    思考:合并列单元格

    <br>  <!--//<!–换行符–>--><table border="1px" align="center"> <!--//表格边框属性1像素,并且居中,如果有css就不麻烦了-->    <tr>        <th rowspan="2">aaaa</th>   <!--//合并列单元格,学会操作-->        <th>aaaa</th>        <th>aaaa</th>        <th>aaaa</th>    </tr>    <tr>        <th colspan="2">aaaa</th>    <!--//合并行单元格,学会操作-->        <th>aaaa</th>    </tr>    <tr>        <th>aaaa</th>        <th>aaaa</th>        <th>aaaa</th>        <th>aaaa</th>    </tr></table>

    Html5 列表元素

     

    列表:一种内容组织方式

     

    有序列表:

    元素

    作用介绍

    <ol>

    表示有序列表

    <li>

    表示列表中的项目

     

    创建有序列表:

     

    代码

     

    浏览器预览

     

    <ol>

      <li>a</li>

       <li>a</li>

       <li>a</li>

    </ol>

     

     

    1:a

    2:a

    3:a

    <ol>元素属性:

     

    属性名称

     

    属性作用

     

    Type

     

    修改各列表项旁的编号类型

     

    Reversed

     

    降序排序

    有序列表中再插入有序列表:

     

    代码

     

    浏览器预览

     

    <ol>

       <li>处理图像</li>

       < ol type=”a”>

       <li>从图片和文件打印样式中提取文本</li>

    <li>在笔记本中插入屏幕剪辑</li>

    <li>剪辑图片</li>

    <li>在页面上组合图片</li>

    </ol>

    </ol>

     

     

     

       

        1:处理图像

          a .从图片和文件打印样式中提取文本

    b .在笔记本中插入屏幕剪辑

    c .剪辑图片

    d.在页面上组合图片

     

     

    无序列表:

     

    元素

     

    作用介绍

     

    ul

     

    表示无序列表

     

    li

     

    表示列表中的项目

     

    代码

     

    在浏览器中预览

     

    <ul>

      <li>a<li>

      <li>a<li>

    <li>a<li>

      <li>a<li>

    </ul>

     

     

    aa   a   a   
    最新回复(0)