前端与HTML | 青训营笔记

487 阅读2分钟

这是我参与【第五届青训营】笔记创作活动的第一天

前端技术栈: HTML 页面内容、结构 css 样式 javascript 行为

通过网络协议与服务器交流,构成前端技术栈

功能、美观、无障碍、安全、性能、兼容,用户体验 开发环境:编辑器+浏览器

HTML:HyperText Markup Language

!doctype html 表示html文件的类型,浏览器用相应的渲染模式

html /html 文档的根标签

head /head 页面原数据,不需要呈现给用户

body /body 呈现给用户的内容

标签和属性推荐小写,空标签不闭合,属性值要有双引号,有的可以没有属性值

标题

<body> 
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6> 
</body>

h1~h6字体依次变小

段落

<body>
    <p>这是一个p标签</p>
</body>

列表 有序列表

<body>
     <ol>
       <li>   </li>
     </ol>
</body>

无序列表

<body>
    <ul>
      <li></li>
    </ul>
</body>

定义列表

<dl>
    <dt>描述列表的标题:</dt>
    <dd>具体内容1</dd>
    <dd>2</dd>
</dl>

链接

<body>
   <a href="http://www.baidu.com" title="点击进入百度">click here!</a>
</body>

target属性:代表打开网页的方式
可选值:"_self"(默认值)
“_blank”(在新窗口打开链接)

图片

<body>
    <img src="图片地址" alt="图像不可见时显示的文本" title="提示文本">
    <!--提示文本提供在图像可见时对图像的描述(鼠标滑过时显示的文本)-->
</body>

音频

<body>
    <audio src="音频地址" controls ></audio>
</body>

视频

<body>
    <video src="视频地址" controls ></video>
</body>

controls 显示时间条之类

<body>
    <input type="text" placeholder="请输入用户名">
    <input type="range" > 
    <input type="number" min="1" max="10">
    <input type="data">
    <textarea>文本框内容</textarea>
</body>

placeholder属性:提示用户输入框需要输入框的内容 textarea标签是成对出现的。
cols :多行输入域的列数。
rows :多行输入域的行数。
在textarea标签之间可以输入默认值。

选择 都呈现出来

<p>
    <label>
        <input type="checkbox"/> 1
    </label>
    <label>
        <input type="checkbox"/> 2
    </label>
</p>

选项较多时

<p>
    <select>
        <option value="看书">看书</option>
        <option value="旅游" selected="selected">旅游</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
    </select>
</p>

输入时有提示

<p>
    <input list="countries"/>
    <datalist>
        <option> 1 </option>
        <option> 2 </option>
    </datalist>
</p>

blockquote 快捷引用 cite属性 表明引用用处 cite 短引用,引用书名或前面提到的内容 q 短引用,引用内容 code /code 代码,长短都可 pre 在code外,多行代码 strong 强调 紧急的意思 em 语气强调

<p>
    <header>头部标签</header>
    <footer>底部标签</footer>
    <section>定义区段</section>
    <aside>侧边栏</aside>
    <span>设置单独样式</span>
    <div>容器</div>
    <hr>水平分割线
    <br/>转行
    &nbsp空格
</p>

做到语义化,传达内容而不是样式 需认真了解标签的含义及用法,在合适的地方用适当的标签来描述内容,注意所面向的群体。 HTML标签还有很多,需要慢慢了解