美文网首页Web前端之路程序员
第三部分 web前端之HTML

第三部分 web前端之HTML

作者: 孙浩j | 来源:发表于2017-12-03 17:15 被阅读30次

    详情参考W3 School

    1.HTML是一种标记语言, 使用标记标签来描述网页
    2.HTML 标签是由尖括号包围的关键词,通常是成对出现的,比如 <b> 和 </b>标签对中的第一个标签是开始标签,第二个标签是结束标签

    <!DOCTYPE html>    
    /*html5标准网页声明,只有了解文档的类型,浏览器才能正确地显示文档。
     分为:1严格 2.过渡(默认使用) 3框架*/
    <html>
    <head>
    <title>  文档标题 </title>
    <base target=“_blank”/> <!--网页的打开方式,默认是blank,从新的一页中打开-->
    <link/>   <!-- 引入外部元素 -->
    <style type="text/css"> 插入样式信息的位置,type属性必须有</style>
    <script> 插入JS的位置  </script>
    </head>
    
    <body>
    <!-- 放各种标签的位置-->
    
    </body>
    </html>
    
    

    标签介绍
    1.标题元素 : <h1>我的第一个标题</h1> h1—h6标题大小越来越小

    2.段落元素 : <p>我的第一个段落。</p>
    换行标签 :
    在不产生新段落的情况下换行
    (不要使用
    ,因为它没有闭合标签,容易出现问题)
    分割线标签:<hr />
    强调文本标签:<strong>强调文本</strong>
    加粗文本标签 : <b>加粗文本</b>
    两者实现效果相同但是意义不同

    注:在html里手动输入多个空行或者多个空格都会被认为是一个空行或者一个空格

    3.超链接元素
    <a href="链接的地址">点击此内容进行跳转(可以是图片) </a>
    选择设置的属性:
    target="_blank" 跳转新网页进行加载,不设置此属性默认当前网页加载
    title="鼠标放上去显示文字"

    锚点< a name="p1"> </a>在需要定位的地方取一个名字
    在同网页中跳转可用锚点,先在需要定位的地方取一个名字,再用超链接通过:自身网址#名字进行跳转

    4.图片元素:<img src="文件位置" alt="图片没加载出来时显示的文字" title="鼠标放到图片上显示的文字" />

    可以在图片标签里width="宽" height="高"设置图片大小

    特殊的内联元素,图片大小就是标签的大小(一般的内联元素的大小由标签大小决定)
    注:img标签和css背景区别
    img表示的是网页的内容,可以保存下来那种,
    例:一个相册的修饰边框的图片是写在Css里,而相片放在img标签里

    5.列表元素
    无序列表 ul(开头是黑点)
    有序列表 ol(开头是数字)
    注意<li></li>与ul和ol组合使用,也就是
    <ul>
    <li> </li>
    <li> </li>
    <li> </li>
    </ul>

    有序,无序列表可以组合使用

    自定义列表标签
    以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    <dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
    </dl>
    

    6.表格元素:
    tr表示行,td表示列(有几个tr表示有几行,无内容用&nbsp占位),th表示表头

    border属性表示边框大小
    cellspacing属性表示两个单元格间的距离
    cellpadding属性表示内边距,就是表格里内容距离边框的距离
    colspan属性表示列合并
    rowspan属性表示行合并
    注:列合并删除本行其它列,行合并删除下一行的对应列

    <table border="1" >
    <tr>
    <th>Heading</th>
    <th>Another Heading</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    
    

    7.按钮元素
    <button type="button" onclick="点击之后变为">按钮内容</button>

    8.表单元素(重点)
    用于搜集不同类型的用户输入。表单元素指的是不同类型的 input 元素

    <form>

    <input type="text"> 定义用于文本输入的单行输入字段
    <input type="password"> 定义被隐藏的输入方式
    <input type="radio"> 定义单选按钮。
    <input type="checkbox"> 定义多选按钮。
    <input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮
    .<input type="hidden">内容对用于不可见
    注:input里的value属性,可以设置表单框里默认的值
    name属性,每个input最好都有一个name,只有有了name之后servlet才可以通过它的name得到用户填写的值

    <!--select下拉元素-->
    <select name="cars" size="4">   
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    

    select元素
    1.size属性表示可以通过滚动显示下拉框里的元素
    2 multiple属性,允许用户同时选择多个选项
    option元素:
    1.value属性: 被选择后会把value里的值发送给服务器
    2.disabled属性可以控制某个元素不可以被选择
    3.selected属性:指定在页面加载时预先选定该选项



    注:<input type="checkbox" name="knownType" value="2"/> 这样定义就在点击复选框的时候被选择上,而设置label标签后,就可以实现点击某一段文字就能选择上复选框,增强了用户体验

    <form>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    </form>

    表单属性,定义在<form>开始标签里的
    1.action:action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。如果省略 action 属性,则 action 会被设置为当前页面。(表单数据提交给网页之后,服务器才能获取数据)

    2.Method 属性:method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

    如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。
    当您使用 GET 时,表单数据在页面地址栏中是可见的:
    注:GET 最适合少量数据的提交。浏览器会设定容量限制。
    (表单里的数据以键值对的形式存到提交到的网页地址栏之后)

    如果表单正在更新数据,或者包含敏感信息(例如密码)。
    POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的

    Name 属性
    如果要正确地被提交,每个输入字段必须设置一个 name 属性。

    属性
    1.用于设置元素自身属性,而元素里内容的属性,通过css控制
    2.属性内容要用双引号括起来
    例:
    <h1 align="center"> 居中对齐
    <body bgcolor="yellow"> 设置背景色

    注:html标签尽量不要定义样式,而只定义内容,样式通过css里实现,从而实现内容和样式分离开

    9.div元素:主要用于包裹其它块级元素,用于布局,
    布局就像切豆腐,先写一个总div,在总div里进行分割

    span:包裹其它行内元素

    10.textarea元素:定义多行输入字段

    <textarea name="message" rows="10" cols="30"> </textarea>

    元素:HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

    <p>表示一个定义段落的元素,这个元素具有开始标签和结束标签

    块级元素:每一块都从一个新行开始 div(组合块级元素)
    行内/内联元素:每个元素都在同一行 span(组合行内元素,无任何实际意义)
    内联元素不可实现文字的变大小,因为程序把每行紧紧的包裹

    元素嵌套:尽量用块级元素嵌套行内元素

    类:
    可以为行内元素(span)和块级元素(div)设置class属性,class属性值相同则说明它们是同一类,这样我们就可以同时控制相同类的样式了

    常用字符实体:一些在html中不适合直接写出的字符

      空格

    & &

    < <

    > >

    " "

    &qpos; '

    文本格式化


    image.png YSGKKGV}0OCXI2IX7R3WMZ8.png

    href和src的区别
    href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。
    src 表示来源地址,在 img、script、iframe 等元素上。
    src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

    相关文章

      网友评论

        本文标题:第三部分 web前端之HTML

        本文链接:https://www.haomeiwen.com/subject/kwarbxtx.html