为了账号安全,请及时绑定邮箱和手机立即绑定

HTML+CSS基础之HTML学习手记

标签:
Html/CSS
HTML+CSS基础

HTML和CSS的关系:

  • HTML是网页内容的载体;
  • CSS样式是表现;
  • Javascript是用来实现网页上的特效效果;

HTML标签

标签一般成对出现,分开始标签和结束标签,例如<html></html>,标签与标签之间可以嵌套,标签不区分大小写,但建议小写。

Head标签

head标签为文档的头部,描述了文档的各种属性和信息,包括文档的标题等,典型的head标签包含的内容如下所示:

<head>
    <title>HTML+CSS基础</title>
    <meta name="Description" content="文档描述" />
    <link rel="stylesheet" href="/static/moco/v1.0/dist/css/moco.min.css" type="text/css" />
    <style>
    div{
        border:1px solid;
    }
    </style>
    <script type="text/javascript">
    </script>
</head>

HTML和CSS代码注释

HTML代码注释不会在结果窗口中显示出来。
HTML代码注释的格式为

<!--注释文字-->

CSS样式代码注释不会生效,单行多行注释采用同一种注释方法

div{
    font-size:12px;/*单行注释*/
}
/*
  多行注释行1
  多行注释行2
*/

HTML标签的语义化

使用语义化的标签,更容易被搜索引擎收录

  • 段落标签<p></p>
  • 标题标签<h1>/h1>、<h2>/h2>、<h3>/h3>、<h4>/h4>、<h5>/h5>、<h6>/h6>
    h1~h6,6级标题标签

  • 强调语气标签<strong></strong>、<em></em>
    em斜体,表示强调,strong粗体,表示更强烈的强调

  • 独立样式标签<span></span>
    没有任何语义,但是可以在任何地方直接对一段文字设置单独的样式

  • 文本引用标签<q></q>、<blockquote></blockquote>
    单行引用标签q,多行引用标签quote

  • 换行标签<br />
    br是空标签,没有html内容的标签就是空标签

  • 空格
    在html代码中仅在输入 时才代表空行

  • 水平横线标签<hr />
    hr也是一个空标签,在网页中增加一条横向的水平线

  • 地址标签<address></address>
    常用来描述一个地理位置、电子邮件地址、签名或者作者的文档身份等。

  • 代码标签<code></code>、<pre></pre>
    如果想在网页中显示一行代码,使用code标签;如果显示多行代码,使用pre标签,其可以将代码行的格式保留。

  • 无序列表标签<ul><li></li></ul>
    无序列表标签前面默认自带圆点样式
    <ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    </ul>
  • 有序列表标签<ol><li></li></ol>
    有序列表标签默认有数字序号,从1开始
    <ol>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    </ol>
  • 超链标签<a></a>
    • href属性用于设置链接地址;
    • title属性用于设置鼠标划过时的显示内容,对搜索引擎更好;
    • target属性用于设置在新标签页打开网页,还是在当前页更新打开网页
      <a href="www.baidu.com" title="点击进入百度网" target="_blank">百度网</a>
  • 超链标签之邮件mailto
    • mailto:邮件关键字,后面紧跟着是邮件地址,如果有多个邮件地址使用分号;分割
    • mailto:关键字后如果有多个参数,则除了第一个使用问号之外,其余的都是用取地址符&分割;
    • cc=为抄送关键字,如果有多个邮件地址使用分号;分割
    • bcc=为密送关键字,如果有多个邮件地址使用分号;分割
    • subject=为主题关键字
    • body=为内容关键字
      <a href="mailto:joeychou@163.com;987@163.com?cc=123@163.com&bcc=456@163.com&subject=主题&body=内容">有什么意见请联系我们</a>
  • 图片标签<img></img>
    图片格式支持JPEG、PNG、GIF
    • src属性为图片链接地址
    • alt属性为图片下载失败时显示的文本
    • title属性为鼠标划过时显示的文本
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg" alt="图片下载失败显示文本" title="鼠标滑过显示文本" />
  • 表单标签<form></form>
    • method属性:有两个值post/get,数据传送的方式,默认为get方式,适用于少量数据且没有敏感信息,使用get方式提交时信息都是可见的;post方式,适用于大量数据提交,因为使用get方式提交浏览器长度是有限制的,而且post方式提交的内容不可见,安全性更高;
    • action属性:用户输入的数据被发往的地方;
  • 表单标签之label标签,label标签有for属性,用于将其相关的控件进行绑定,实现鼠标点击标签时,自己选中相关的控件,for属性中的id值为相关控件的id值;
  • 表单标签之inputbox标签类型之text、password、radio、checkbox
    • text文本输入框
      text文本输入框支持单行文本输入,多行选用textarea
      • name属性,文本输入框的名字,多个控件可以使用同一个名字,如果空间没有name值,后台是无法获取数据的;
      • id属性,id值必须全文档唯一,主要用于客户端页面中,与label进行控件关系绑定时,即使用的id
      • value属性,文本输入框的默认输入值
    • password密码输入框
      • name属性同text文本输入框
      • id属性同text文本输入框
      • value属性为密码输入框默认密码输入值,且显示默认为圆点表示,不显示实际值
    • radio单选框
      • name属性同text文本输入框
      • id属性同text文本输入框
      • value属性为提交给后台服务器的值
      • checked属性为默认是否选中
    • checkbox多选框
      • name属性同text文本输入框
      • id属性同text文本输入框
      • value属性为提交给后台服务器的值
      • checked属性为默认是否选中
  • 表单标签之下拉列表select
    • option标签,每个option标签就是一个选项
      • value属性,为提交给后台服务器的值;
      • selected属性,为默认选择的选项
      • 标签中间为显示给用户的值
    • select属性multiple如果设置了,下拉列表可以选择多个选项,使用CTRL键+点选选项值
  • 表单标签之文本域textarea
    文本域支持多行文本输入,可以设置行数和列数
    • rows,文本域的行数
    • cols,文本域的列数
  • 表单标签之submit和reset
    • submit为提交按钮
      点击submit按钮会将表单中的所有信息都提交到action所执行的文件中
      • input type="submit"
      • name属性
      • value属性
      • id属性
    • reset为重置按钮
      • input type="reset"
      • name属性
      • value属性
      • id属性
        
        <form method="post" action="login.php">
        <label for="user">用户名:</label>
        <input type="text" id="user" name="user" value="你叫啥" />
        <br />
        <label for="pass">密 码:</label>
        <input type="password" id="pass"/>
        <br />
        <label for="sex">性 别:</label>
        <label>男</label>
        <input type="radio" value="女" id="sex"/>
        <label>女</label>
        <input type="radio" value="男" id="sex" checked="checked"/>  
        <br />
        <label>年 龄:</label>
        <select>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20" selected="selected">20</option>
        </select>
        <br />
        <label>职 业:</label>    
        <select multiple="multiple">
        <option value="软件开发工程师">软件开发工程师</option>
        <option value="心理咨询师">心理咨询师</option>
        <option value="作家" selected="selected">作家</option>
        </select>    
        <br />
        <label>爱 好:</label>
        <label for="swimming">游泳</label>
        <input type="checkbox" value="游泳" id="swimming" checked="checked"/>
        <label for="song">唱歌</label>
        <input type="checkbox" value="唱歌" id="song"/>
        <br />
        <label>简 介:</label>    
        <textarea rows="5" cols="6">
点击查看更多内容
28人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Linux系统工程师
手记
粉丝
30
获赞与收藏
173

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消