欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

我的第一篇博客(关于html初学笔记)

程序员文章站 2022-05-19 22:10:05
...

题记

第一次写博客竟是怀着如此激动的心情。曾经不论是在百度还是谷歌都受到过大神博客的文章在我的生活和学习中得到了帮助。如今自己动起手来实属激动。相信第一次来这里的心情都会和我一般。
初来到这里,像是发现了另一片天地。广场上刷着大神们的学习心得和资源分享。实属丰富了自己的生活。虽然自己还是一个菜鸟,还是想把自己学到的发表在这里。

我的html笔记

  1. 基本标签作用
<strong>:字体加粗
<em>:斜字体
span:强调字体span{color:blue;}
<head>:标题
<boby>:文本<p>段落
<q>引用文本  会给加引号
<blockquote>标签,长文本引用     会使文本缩进
<br/>换行
&nbsp;空格
<hr />标签,添加水平横线
<address>标签,为网页加入地址信息  斜体
<code>加入一行代码  <pre>多行。<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。在这里插入代码片
  1. 表格
    ul-li 添加新闻信息列表 例: <ul><li>我的第一个列表信息</li></ul>
    ol-li 排行
    div 可以分模块<div id="learningInstructed">id给div模块命名
    table 表格 tr 行 th表头的单元格 td单元格 tbody优先显示
    语法:<table summary="表格简介文本">
    1、<thead>标签表示表格头部,一般放<tr>和<th>标签。
    2、<tbody>标签表示表格内容,一般放<tr>和<td>标签。
    3、<tfoot>标签标签表格脚部标注,一般放<tr>和<td>标签。
    模板
<table border="1">
    <caption>标题文本</caption>
<tr>
    <th></th>
    <th></th>
    <th></th>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>
  1. 网页链接

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
如下代码:
<a href="目标网址" target="_blank">click here!</a>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例:
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解:
src:标识图像的位置;
alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

  1. 使用表单标签,与用户交互 - 使用<form>创建表单
<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
<input type="submit" value="确定" name="submit" />
        <input type="reset" value="重置" name="reset" />
</form>

placeholder属性的使用

<body>
<input type="text" placeholder="请输入用户名"> 
<br/>
<input type="password" placeholder="请输入密码"> 
</body>

数字框
<input type="number">
网址框
<input type="url">
邮箱框
<input type="email">
使用标签创建文本域
<textarea rows="行数" cols="列数">文本</textarea>

  1. 使用label为input标签穿上衣服
<form>
 <label for="uname">输入你的用户名</label>
 <input type="text" id="uname" placeholder="Enter uname">
 <br>
 <label for="pass">输入你的密码</label>
 <input type="password" id="pass" placeholder="Enter password">
</form>

下拉菜单

 <form>
        <select>
            <option value="看书">看书</option>
            <option value="旅游"selected="selected">旅游</option>  //selected="selected"选中这个为显示
            <option value="运动">运动</option>
            <option value="购物">购物</option>
        </select>
    </form>

提交按钮
<input type="submit" value="提交" name="submitBtn" />
重置按钮
<input type="reset" value="重置" />

相关标签: 笔记 html