HTML｜ 青训营笔记

以后想做什么呢
122 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

一、HTML基本页面

aaa.jpg 每个标签有自己的属性：分为基本属性和事件属性

<button onclick=alert(“警告内容”)> 这是一个按钮 </button>

//onclick是一个事件属性

//alert()是javascript提供的一个警告框函数，参数即为警告内容

二、HTML中的特殊字符写法

bbb.png

三、HTML中常用的标签

1、换行： <br/>

2、字体标签： <font color = “red” face = “宋体” size = “2”>字体标签 </font>

3、标题标签： <h1 align = “center”></h1>

            align是对齐属性：左对齐left、居中center、右对齐right

4、超链接： <a href = “juejin.com” target = “_blank”> 掘金 </a>

              href是设置链接地址

              target是打开方式：1、当前页面(默认)：_self

                               2、跳转到新页面：_blank

5、列表标签：

有序：

<ol type=”none”>//取消符号（不完全兼容）

    <li> </li>

    <li> </li>

    <li> </li>

</ol>

无序：

<ul>

    <li> </li>

    <li> </li>

    <li> </li>

</ul>

6、img标签： <img src=”路径” width=“20” height=“24” border=“2” alt=“网络异常请刷新再查看”/>

 在web中的路径：

    相对： . / 表示当前目录下    
           . . / 表示上一级目录
    绝对：http://ip:post/工程名/资源路径
    
  border设置边框大小
  alt照片出现异常时用来代替显示的文本内容

7、table标签：

<table border=“1” width=“2” height=“2” cellspacing=“0” aligh=“center”>
       <tr>
              <th>表头</th>
              <th>表头</th>
       </tr>
       <tr>
              <td aligh=”center”>单元格内容</td>
              <td>单元格内容</td>
       </tr>
</table>
              table标签：border是表格边框大小
                        alight是整个表格的位置
              th是表头标签
              td是表格单位标签：aligh是单元格内容的位置

8、跨行跨列的属性： 设置单元格占据的格子数，设置完要删掉多出来的格子

在th、td标签加属性：colspan设置跨列

                   rowspan设置跨行

9、iframe标签： <iframe src=”路径” width=”500” height=”500” name=”name1”></iframe>

      iframe标签是定义一个窗口，窗口内容默认是scr的路径
      name属性是定义这个iframe的名字，可以把其他内容链接到这个窗口
例子：<a href=”路径” target=“name1”> 超链接a，点击后的内容显示在iframe窗口是</a>

10、表单标签：

<form action=<http://jeujin.com> method=”get”>

     名字： <input type=”text” value=”默认值” name=“username”/>
     密码： <input type=”password” name=”password”/>
     性别： <input type=”radio” name=”sex” value=”boy” checked="checked"/>男
           <input type=”radio” name=”sex” value=“girl”/>女
       //单选框，通过name设置成一组就只能两者选一个
       //checked="checked"表示默认选中
     多选题：<input type=”checkbox” name=”多选” value=”A” checked=”checked” /> A
            <input type=”checkbox” name=”多选” value=”B”/> B

     国家： <select name=”country”>
               <option selected=”selected” value=”CN”>中国</option>  //表示默认选中
               <option value=”USA”>美国</option>
               <option value=”UK”>英国</option>
            </select>
     //select是下拉列表框，option标签是下拉列表框的选项
     多行文本： <textarea rows=”10” cols=”20”>我才是默认值</textarea>
     //rows设置可以显示几行高度  clos设置每行显示字符宽度
     重置按钮：<input type=”reset” value=”点击重置”>
     提交按钮：<input type=”submit” value=“点击提交”>
     一个按钮：<input type=”button” value=”按钮上的字”>
     提交文件：<input type=”file”>
     隐藏域：<input type=”hidden” name=“abc” value=”aaa”>
     //需要发送一些用户不要参与的信息就使用隐藏域，在提交时会发送给服务器
</form>


form标签是表单标签:
       action属性设置提交的服务器地址
       method属性设置提交的方式GET(默认值)或POST

  • 提交后数据没发给服务器的三种情况：

    1、 表单项没有name属性

    2、 单选、复选(option标签中)都需要添加value属性，以便发送给服务器

    3、 表单不在form标签中 

  • GET请求的特点是：

    1、 浏览器地址栏中的地址是：action属性+？+请求参数

    2、 不安全

    3、 数据长度有限制

  • POST请求的特点是：

    1、 浏览器地址栏中的地址只有action属性

    2、 相对安全

    3、 理论上没有长度限制

11、div、span、p标签：

    div标签：默认独占一行
    span标签：它的长度是封装数据的长度
    p段落标签：段落的上方或下方空出一行
avatar
文章
阅读
粉丝