zoukankan      html  css  js  c++  java
  • HTML 基础 元素 标签

    h1元素通常被用作主标题,h2元素通常被用作副标题,还有h3h4h5h6元素,它们分别用作不同级别的标题。

    用 p 元素代表段落

    所有的img元素必须有alt属性,alt属性的文本是当图片无法加载时显示的替代文本,这对于通过屏幕阅读器来浏览网页的用户非常重要。

    注意:如果图片是纯装饰性的,用一个空的alt是最佳实践。理想情况下,alt属性不应该包含特殊字符,除非需要。

     在 HTML 中,注释的开始标记是<!- -,结束标记是- ->

     

    用锚点实现网页内部跳转

    设置锚点的href属性值为井号#加上想跳转区域对应的id属性值,这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性,它的值在整个页面中唯一。

    下面是用来创建内部锚点的例子:

    <a href="#contacts-header">Contacts</a>
    ...
    <h2 id="contacts-header">Contacts</h2>

    当用户点击了Contacts链接,页面就会跳转到网页的Contacts区域。

     


    通过修改href属性为#footer来更改外部链接为内部链接,同时修改文本cat photosJump to Bottom

    移除 target="_blank"属性避免点击链接会打开新的元素页。

     

    给输入框添加占位符文本

    Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。

    <input type="text" placeholder="请输入查找内容">

    给表单添加一个必填字段

    <input type="text" required>

    单选按钮

    radio buttons(单选按钮)就好比单项选择题,正确答案只有一个。

    最佳实践是label元素上设置for属性,让其值与单选按钮的id属性值相等,这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。例如:

    <label for="apple"> 
      <input id="apple" type="radio" name="fruit">apple 
    </label>
    <label for="orange"> 
      <input id="orange" type="radio" name="fruit">orange 
    </label>

    checkboxes(复选框)就好比多项选择题,正确答案有多个。

    复选框是input输入框的另一种类型。

    每一个复选框都应该嵌套在它自己的label(标签)元素中。

    所有关联的复选框应该拥有相同的name属性。

    最佳实践是在label元素上设置for属性,让其值与复选框的id属性值相等,这样就在label元素和它的子元素复选框之间创建了一种链接关系。例如:

    下面是一个复选框的例子:

    <label for="apple"><input id="apple" type="checkbox" name="personality"> apple</label>
    <label for="banana"><input id="banana" type="checkbox" name="personality"> banana</label>
    <label for="orange"><input id="orange" type="checkbox" name="personality"> orange</label>

    给单选按钮和复选框添加默认选中项

    <input type="radio" name="test-name" checked>
     
    <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked>室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality" checked>忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
    </form>
     

    声明 HTML 文档的文档类型

    在文档的顶部,你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言,大部分浏览器都支持 HTML 的最新标准,也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。

    你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本,"..." 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。

    !和大写的DOCTYPE是很重要的,特别是对于老的浏览器。但html大写小写都可以。

    接下来,所有的 HTML 代码都必须位于html标签中。其中<html>位于<!DOCTYPE html>的后面,</html>位于网页的结尾。

    这是网页结构一个例子:

    <!DOCTYPE html>
    <html>
      <!-- Your HTML code goes here -->
    </html>

    html的结构主要分为两大部分:headbody。关于网页的描述都应该放入head标签,网页的内容都应该放入body标签。

    比如linkmetatitlestyle都应该放入head标签。

    这是网页布局的一个例子:

    <!DOCTYPE html>
    <html>
      <head>
        <!-- metadata elements -->
      </head>
      <body>
        <!-- page contents -->
      </body>
    </html>
  • 相关阅读:
    处理火星文重温vchar,char,nvchar,nchar
    删除文件
    js常用正则表达式
    安装iis 配置iis
    无题
    js函数大全
    常用正则表达式
    QQ在线客服
    获取系统文字字体
    无限级删除的存储过程
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/12491883.html
Copyright © 2011-2022 走看看