WEB前端学习--补3月30号课堂笔记

用户8711264

发布于 2023-03-21 17:14:24

4090

发布于 2023-03-21 17:14:24

文章被收录于专栏：李先生博客

认识元素与标记

html head meta title body 叫元素（标签标记 tag） html head title body成对标记 meta非成对成对标记有开始标记，结束标记元素分为块级元素非块级元素(行内元素) 块级元素独占一行

WS使用介绍【部分】

WS快捷键【部分】

自动格式化代码快捷键ctrl+alt+l 删除整行的快捷键是shift+delete

body标签如何格式化代码缩进

body内标签缩进文件->设置->编辑器->代码样式【html】【删body】

学习第一节课的元素

h1-h6标签使用

所有呈现在页面中的内容都是写在body元素内标题元素（成对）h1 h2 h3 h4 h5 h6【都是块级元素】例如：

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

注意

h6标签是标题标签，在使用过程中不能作为加粗字体和放大/缩小字体的目的使用

段落标签【p标签】

p是段落标签块级元素例如：

  <p></p>
  <p>段落一
<p/>
<p>段落二</p>

容器标签【span标签】

span是非块级元素(行内元素) 例如：

<span>这是span的内容</span>
<span>这里是第二个span</span

这里再讲一下换行标签换行标签 br 例如：

<span>这里是第1个span</span><br/>
<span>这里第二个span容器</span>

转义符介绍【部分】

空格，制表符，换行符都叫空白符。无论有多少空白符，浏览器都作为一个空格处理。所以这里我们引用了转义符：

    这是第一行<br/>
    这是 第二行<br/>
    这是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第三行<br/>
    版权符&copy;<br/>
    小于符&lt;<br/>
    大于符&gt;<br/>
    双引号&quot;&quot;<br/>
    
    空格 &nbsp;
    版权符 &copy;
    小于符 &lt;
    大于符 &gt;
    双引号 &quot;

pre标签--代码原样呈现

直接上示例：

             \  /\  /
              \/||\/
              / || \
              \ || /
              /\||/\
             /  \/  \

实际代码如下：

<pre>
             \  /\  /
              \/||\/
              / || \
              \ || /
              /\||/\
             /  \/  \
                         <span></span>
                         <br>
</pre>

上下标标签【上sup，下sub】

他们是一对成对标签例如：

    X<sup>2</sup><br/>
    H<sub>2</sub>O<br/>

列表标签【ul，ol，li】

标签介绍

unordered list; ul 无序列表块级元素 ordered list; ol 有序列表块级元素 list item; li 列表项块级元素

ul标签--无序列表

ul 无序列表标签元素有属性属性又有属性值 ul的type的属性值可以是 disc【默认值】 circle square

未嵌套

计算机
文学
数学
计算机
文学
数学

代码如下：

    <ul type="square">
        <li>计算机</li>
        <li>文学</li>
        <li>数学</li>
    </ul>
    <ul>
        <li type="square">计算机</li>
        <li type="circle">文学</li>
        <li type="disc">数学</li>
    </ul>

嵌套无序列表

计算机

编程
数据库
云计算


文学

中国文学
外国文学


数学

代码如下：

   <ul type="square">
        <li>计算机
            <ul>
                <li>编程</li>
                <li>数据库</li>
                <li>云计算</li>
            </ul>
        </li>
        <li>文学
            <ul>
                <li>中国文学</li>
                <li>外国文学</li>
            </ul>
        </li>
        <li>数学</li>
    </ul>

ol标签--有序列表

type属性的属性值 1 A I i

代码如下：

    <ol type="A">
        <li>计算机
            <ol type="i">
                <li>编程</li>
                <li>数据库</li>
                <li>云计算</li>
            </ol>
        </li>
        <li>文学
            <ol type="I">
                <li>中国文学</li>
                <li>外国文学</li>
                <li>中国文学</li>
                <li>外国文学</li>
                <li>中国文学</li>
                <li>外国文学</li>
            </ol>
        </li>
        <li>数学</li>
    </ol>

表格标签【table标签】

表格标签 table 表格行标签 tr (table row，column) 表格单元格 th td table标签的属性值 border width 像素 px(pixel) 1920*1208

代码如下：

    <table border="1" width="100px">
        <tr>
            <th>1</th>
            <th>2</th>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
    <table border="1" width="100px">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <th>2</th>
                <th></th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>1</th>
                <th>2</th>
                <th></th>
            </tr>
        </tfoot>
    </table>